主导细节与导航？

Posted 2021-04-05

我正在尝试使用Xamarin.Forms MasterDetail页面来实现汉堡菜单导航。我遇到的问题是，根据我更改细节页面的方式，汉堡包菜单会消失，但返回功能会起作用，或者汉堡包会停留但我们却无法浏览详细信息页面（硬件/屏幕返回）按钮将用户返回到设备的主屏幕）。

使用最新的XF（2.3.4.247）可以很容易地复制这个问题。在Visual Studio中创建一个新的Cross Platform App (Xamarin)。确保所有Nuget包都是最新的。然后到共享项目，添加一个名为MasterDetail的MyMasterPage页面。

默认情况下，在MyMasterDetailPage.xaml.cs的ListView_ItemSelected中有一条线Detail = new NavigationPage(page)，它保留了汉堡菜单，但实际上并没有在细节页面之间导航。在android上按下关闭应用程序。

如果您将行更改为Detail.Navigation.PushAsync(page, true)，则后退按钮可以工作，您可以浏览所有先前打开的子项，但汉堡包图标将替换为另一个back按钮（除了设备通常显示的按钮）。

如何让汉堡包菜单保留，以便用户可以在所有页面上访问它，同时仍然允许用户返回之前的详细信息页面？

答案

你需要遵循这个例子。 https://developer.xamarin.com/samples/xamarin-forms/Navigation/MasterDetailPage

在我的App.xaml.cs上，我将它重定向到Menu页面。

MainPage = new MainMenu();

接下来，我创建了MainMenu视图，它是MasterDetailPage

<MasterDetailPage.Master>

    <ContentPage 
            Icon="hamburger_menu.png" 
            Title="MyTitle"
            BackgroundColor="#29632A"
            >

        <!--Menu Title background color--> 

         <!--Slide out Menu--> 
        <StackLayout VerticalOptions="FillAndExpand" >

            <!--Menu Header Layout-->

            <Label 
                Text="MyTitle" 
                TextColor="White" 
                FontSize="22" 
                VerticalOptions="Center" 
                HorizontalOptions="Center" 
                Margin="0, -10, 0, 5" />

            <ListView 
                    x:Name="MenuListView"
                    ItemsSource="{Binding MainMenuItems}"
                    ItemSelected="MainMenuItem_Selected"
                    VerticalOptions="FillAndExpand" 
                    SeparatorVisibility="None" 
                    BackgroundColor="#f5f5f5">
                 <!--Menu background color--> 
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <StackLayout Orientation="Horizontal" Padding="10,0,0,0">
                                     <!--Menu layout-->

                                    <Label Text="{Binding Title}" FontSize="18" VerticalTextAlignment="Center"/>

                                </StackLayout>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>

    </ContentPage>
</MasterDetailPage.Master>

MainMenu.xaml.cs

    public partial class MainMenu : MasterDetailPage
{
    public List<MainMenuItem> MainMenuItems { get; set; }

    public MainMenu ()
    {
        BindingContext = this;

        // Build the Menu
        MainMenuItems = new List<MainMenuItem>()
        {
            new MainMenuItem() { Title = "Menu1", Icon = "menu1.png", IconSize = 18, TargetType = typeof(Menu1) },
            new MainMenuItem() { Title = "Menu2", Icon = "menu2.png", IconSize = 18, TargetType = typeof(Menu2) }
        };

        // Set the default page, this is the "home" page.
        ChangeDetail(new Menu1());
        InitializeComponent ();

    }

    // When a MenuItem is selected.
    public void MainMenuItem_Selected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as MainMenuItem;
        if (item != null)
        {
            if (item.Title.Equals("Menu1"))
            {
                ChangeDetail(new Menu1());
            }
            else if (item.Title.Equals("Menu2"))
            {
                ChangeDetail(new Menu2());
            }

            MenuListView.SelectedItem = null;
            IsPresented = false;
        }
    }

    public void ChangeDetail(Page page)
    {
        var navigationPage = Detail as NavigationPage;
        if (navigationPage != null)
        {
            navigationPage.PushAsync(page);
            return;
        }
        Detail = new NavigationPage(page) { BarBackgroundColor = Color.FromHex("#FF0000"), BarTextColor = Color.White };
    }
}