Xamarin 使用 xaml 创建具有多个详细视图的 masterdetailpage

Question

我是 Xamarin 框架的新手，正在为 iOS 和 Droid 共享应用程序开发应用程序。我只是想使用带有 XAML 的 Masterdetailpage 布局制作像 facebook 应用程序一样的左侧滑块菜单。我找不到合适的示例或存根来开发结构化编程。如果有人可以向我推荐链接或示例代码以从现在开始我当前项目的旅程，那将是很大的帮助？提前致谢。

Answer 1

MasterDetailPageDemoPage 是指向来自GitHub Xamarin-forms-samples 的主详细信息页面示例的链接。我也会发布此链接中的代码，以防将来链接中断

using System;
using Xamarin.Forms;

namespace FormsGallery
{
    class MasterDetailPageDemoPage :  MasterDetailPage
    {
        public MasterDetailPageDemoPage()
        {
            Label header = new Label
            {
                Text = "MasterDetailPage",
                Font = Font.SystemFontOfSize(30, FontAttributes.Bold),
                HorizontalOptions = LayoutOptions.Center
            };

            // Assemble an array of NamedColor objects.
            NamedColor[] namedColors = 
                {
                    new NamedColor("Aqua", Color.Aqua),
                    new NamedColor("Black", Color.Black),
                    new NamedColor("Blue", Color.Blue),
                    new NamedColor("Fuschia", Color.Fuschia),
                    new NamedColor("Gray", Color.Gray),
                    new NamedColor("Green", Color.Green),
                    new NamedColor("Lime", Color.Lime),
                    new NamedColor("Maroon", Color.Maroon),
                    new NamedColor("Navy", Color.Navy),
                    new NamedColor("Olive", Color.Olive),
                    new NamedColor("Purple", Color.Purple),
                    new NamedColor("Red", Color.Red),
                    new NamedColor("Silver", Color.Silver),
                    new NamedColor("Teal", Color.Teal),
                    new NamedColor("White", Color.White),
                    new NamedColor("Yellow", Color.Yellow)
                };

            // Create ListView for the master page.
            ListView listView = new ListView
            {
                ItemsSource = namedColors
            };

            // Create the master page with the ListView.
            this.Master = new ContentPage
            {
                Title = "Color List",       // Title required!
                Content = new StackLayout
                {
                    Children = 
                    {
                        header, 
                        listView
                    }
                }
            };

            // Create the detail page using NamedColorPage
            NamedColorPage detailPage = new NamedColorPage(true);
            this.Detail = detailPage;

            // For Android & Windows Phone, provide a way to get back to the master page.
            if (Device.OS != TargetPlatform.iOS)
            {
                TapGestureRecognizer tap = new TapGestureRecognizer();
                tap.Tapped += (sender, args) =>
                    {
                        this.IsPresented = true;
                    };

                detailPage.Content.BackgroundColor = Color.Transparent;
                detailPage.Content.GestureRecognizers.Add(tap);
            }

            // Define a selected handler for the ListView.
            listView.ItemSelected += (sender, args) =>
                {
                    // Set the BindingContext of the detail page.
                    this.Detail.BindingContext = args.SelectedItem;

                    // Show the detail page.
                    this.IsPresented = false;
                };

            // Initialize the ListView selection.
            listView.SelectedItem = namedColors[0];
        }
    }
}

如果您想在 Xaml 中执行此操作，请参阅以下示例：

根页面

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"       
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:view="clr-namespace:MyApp.Views;assembly=MyApp"
    x:Class="MyApp.Views.RootPage">
    <MasterDetailPage.Master>
        <view:MainMenu />
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <view:HomePage />
    </MasterDetailPage.Detail>
</MasterDetailPage>

主菜单

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                       x:Class="MyApp.Views.MainMenu">
    <Label Text="I should actually be a list or something" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

主页

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                       x:Class="MyApp.Views.HomePage">
    <Label Text="Hello World" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>