MainPage.xaml 之外的 Shell FlyoutItem 菜单

Question

我正在使用来自 https://www.youtube.com/watch?v=DuNLR_NJv8U 的 Monkey Finder 教程。有一个DetailsPage.xaml，导航到使用

        await Shell.Current.GoToAsync( nameof( DetailsPage ), true, new Dictionary<string, object>
        {
            {"Monkey", monkey }
        } );

我可以使用 AppShell.xaml 将弹出菜单添加到 MainPage.xaml。如何为使用 Shell 的 MainPage.xaml 之外的 ContentPage 添加弹出菜单？

    <FlyoutItem Title="Dashboard"
        FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Dashboard"
              ContentTemplate="{DataTemplate view:MainPage}"
              Route="MainPage"
              Icon="dotnet_bot.svg" />

    <ShellContent Title="Profile"
              ContentTemplate="{DataTemplate view:ProfilePage}"
              Route="ProfilePage"
              Icon="dotnet_bot.svg" />
    <ShellContent Title="Billing"
              ContentTemplate="{DataTemplate view:BillingPage}"
              Route="BillingPage"
              Icon="dotnet_bot.svg" />
</FlyoutItem>

Answer 1

如何为 MainPage.xaml 之外的 ContentPage 添加弹出菜单 使用Shell？

主要有两种方法可以实现这一目标：

#1：使用 FlyoutPage。

由于弹出菜单是一个从屏幕侧面滑出的导航面板，因此可以快速访问常用功能或设置。

以下示例显示了

FlyoutMenuPage

对象的定义，该对象的类型为 ContentPage:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlyoutPageNavigation"
             x:Class="FlyoutPageNavigation.FlyoutMenuPage"
             Padding="0,40,0,0"
             IconImageSource="hamburger.png"
             Title="Personal Organiser">
    <CollectionView x:Name="collectionView"
                    x:FieldModifier="public"
                    SelectionMode="Single">
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type local:FlyoutPageItem}">
                <local:FlyoutPageItem Title="Contacts"
                                      IconSource="contacts.png"
                                      TargetType="{x:Type local:ContactsPage}" />
                <local:FlyoutPageItem Title="TodoList"
                                      IconSource="todo.png"
                                      TargetType="{x:Type local:TodoListPage}" />
                <local:FlyoutPageItem Title="Reminders"
                                      IconSource="reminders.png"
                                      TargetType="{x:Type local:ReminderPage}" />
            </x:Array>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="5,10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding IconSource}" />
                    <Label Grid.Column="1"
                           Margin="20,0"
                           Text="{Binding Title}"
                           FontSize="20"
                           FontAttributes="Bold"
                           VerticalOptions="Center" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

更多详情，可以参考创建FlyoutPage

#2：从头开始制作模仿 Shell

FlyoutItem

菜单默认功能的控件。您可以参考这个优秀的回答线程：Can a Flyoutwindow/hamburger menu be Implemented out of the shell in .NET MAUI?。并且不要忘记设置默认起始页，因为您不使用 Shell。

public App()
{
    InitializeComponent();
  //MainPage = new AppShell();
    MainPage = new MainPage();
}

输出：