如何使用.Net Maui 中另一個內容視圖中的按鈕控制內容視圖中的內容

Question

我正在通過制作待辦事項列表應用程序來練習 .Net Maui，現在我想知道如何通過點擊底部欄上的按鈕來更改主頁的內容視圖。 我將底部欄和頁面視圖都定義為內容視圖，因為我不知道如何將內容頁面插入現有內容頁面，我想自定義底部欄。 Todo List App 未完成，我只寫了一頁。

主要待辦事項列表應用程序

文件結構是：

文件結構

我在底部欄用戶內容中定義了四個功能，但我不知道如何實現它們。

整個項目在 GitHub: GitHub 鏈接。 我真的需要你的幫助。

我搜索了 Inte.net，但沒有找到任何實用的解決方案。 但我確實認為這是一個可以實現的功能。

這是代碼。

底欄：

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)
    {

    }
}

第一頁：

第一頁.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>

主頁：

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

您可以使用Shell來實現您的需求：

我想知道如何通過點擊底部欄上的按鈕來更改主頁的內容視圖。

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>

請注意， FirstPage 是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>