How to control contents in a content view with a button in another content view in .Net Maui

Question

I'm practicing.Net Maui by making a Todo List App and now I'm wondering how to change the main page's content view by tapping the buttons on the bottom bar. I defined both the bottom bar and the page views as content views because I don't know how to insert a content page into an existing content page, and I want to customize the bottom bar. The Todo List App is unfinished, I only wrote one page.

The main Todo List App

And the file structure is:

The file structure

I've defined four functions in the bottom bar user content, but I don't know how to implement them.

The whole project is on the GitHub: GitHub Link . I really need your help.

I have searched through the Inte.net and didn't find any practical solution. But I do think that this is a realizable feature.

Here's the code.

The bottom bar:

BottomBar.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiTodoApp.Views.Contents.BottomBar">
    <Border StrokeThickness="0"
                    BackgroundColor="LightBlue"
                    Margin="10, 5, 10, 10">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="10"/>
        </Border.StrokeShape>
        <Grid Margin="20, 0, 20, 0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
                <Grid.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Page1Clicked"
                                      NumberOfTapsRequired="1"/>
                </Grid.GestureRecognizers>

                <Border HeightRequest="50"
                        WidthRequest="50"
                        BackgroundColor="AliceBlue"
                        StrokeThickness="0"
                        >
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="5"/>
                    </Border.StrokeShape>
                    <Grid HorizontalOptions="Center" VerticalOptions="Center">
                        <Label Text="1" FontSize="30"/>
                    </Grid>
                </Border>
            </Grid>
            <Grid Grid.Column="1">
                <Grid.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Page2Clicked"
                                      NumberOfTapsRequired="1"/>
                </Grid.GestureRecognizers>

                <Border HeightRequest="50"
                        WidthRequest="50"
                        BackgroundColor="AliceBlue"
                        StrokeThickness="0"
                        >
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="5"/>
                    </Border.StrokeShape>
                    <Grid HorizontalOptions="Center" VerticalOptions="Center">
                        <Label Text="2" FontSize="30"/>
                    </Grid>
                </Border>
            </Grid>
            <Grid Grid.Column="2">
                <Grid.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Page3Clicked"
                                      NumberOfTapsRequired="1"/>
                </Grid.GestureRecognizers>

                <Border HeightRequest="50"
                        WidthRequest="50"
                        BackgroundColor="AliceBlue"
                        StrokeThickness="0"
                        >
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="5"/>
                    </Border.StrokeShape>
                    <Grid HorizontalOptions="Center" VerticalOptions="Center">
                        <Label Text="3" FontSize="30"/>
                    </Grid>
                </Border>
            </Grid>
            <Grid Grid.Column="3">
                <Grid.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Page4Clicked"
                                      NumberOfTapsRequired="1"/>
                </Grid.GestureRecognizers>

                <Border HeightRequest="50"
                        WidthRequest="50"
                        BackgroundColor="AliceBlue"
                        StrokeThickness="0"
                        >
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="5"/>
                    </Border.StrokeShape>
                    <Grid HorizontalOptions="Center" VerticalOptions="Center">
                        <Label Text="4" FontSize="30"/>
                    </Grid>
                </Border>
            </Grid>
        </Grid>
    </Border>
</ContentView>

BottomBar.xaml.cs

namespace MauiTodoApp.Views.Contents;

public partial class BottomBar : ContentView
{
    public BottomBar()
    {
        InitializeComponent();
    }

    private void Page1Clicked(object sender, TappedEventArgs e)
    {
    }

    private void Page2Clicked(object sender, TappedEventArgs e)
    {

    }

    private void Page3Clicked(object sender, TappedEventArgs e)
    {

    }

    private void Page4Clicked(object sender, TappedEventArgs e)
    {

    }
}

The first page:

FirstPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:Contents="clr-namespace:MauiTodoApp.Views.Contents"
             x:Class="MauiTodoApp.Views.Pages.FirstPage">
    <Grid Background="#e5e7eb">
        <Grid Margin="10, 0, 10, 0">
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid Grid.Row="0">
                <Label Text="Today's Tasks"
                   Margin="10, 10, 10, 10"
                   Padding="0, 40, 0, 0"
                   HorizontalOptions="Start"
                   VerticalOptions="Center"
                   FontSize="30"
                   FontAttributes="Bold"
                   />
            </Grid>
            <ScrollView Grid.Row="1" Margin="10, 0, 10, 0">
                <StackLayout Grid.Row="1"  >
                    <Contents:TasksContent/>
                    <Contents:TasksContent/>
                    <Contents:TasksContent/>
                    <Contents:TasksContent/>
                    <Contents:TasksContent/>

                    <Grid HeightRequest="90"></Grid>
                </StackLayout>
            </ScrollView>
        </Grid>
    </Grid>
</ContentView>

The main page:

TodoMainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiTodoApp.Views.TodoMainPage"
             xmlns:Pages="clr-namespace:MauiTodoApp.Views.Pages"
             xmlns:contents="clr-namespace:MauiTodoApp.Views.Contents"
             Title="TodoMainPage">
    <Grid IgnoreSafeArea="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="80"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Grid.RowSpan="2" ZIndex="0" x:Name="MainPageView">
            <Pages:FirstPage Grid.Row="0" Grid.RowSpan="2" ZIndex="0"/>
        </Grid>
        <Grid  Grid.Row="1" ZIndex="1">
            <contents:BottomBar/>
        </Grid>

    </Grid>
</ContentPage>

Answer 1

You can use Shell to achieve your need:

I'm wondering how to change the main page's content view by tapping the buttons on the bottom bar.

AppShell.xaml:

<Shell
    x:Class="MauiTodoApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:MauiTodoApp.Views.Pages">

     <TabBar>
        <ShellContent Title="FirstPage"
                     ContentTemplate="{DataTemplate views:FirstPage}" />
        <ShellContent Title="SecondPage"
                     ContentTemplate="{DataTemplate views:SecondPage}" />
    </TabBar>
</Shell>

Note that FirstPage is ContentPage :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:Contents="clr-namespace:MauiTodoApp.Views.Contents"
             x:Class="MauiTodoApp.Views.Pages.FirstPage">

           ...

</ContentPage>