Xamarin 使用 xaml 创建具有多个详细信息视图的母版详细信息页面

本文关键字:详细信息 视图 xaml 使用 创建 Xamarin | 更新日期: 2023-09-27 18:30:16

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

Xamarin 使用 xaml 创建具有多个详细信息视图的母版详细信息页面

MasterDetailPageDemoPage 是指向 GitHub Xamarin-forms-samples 中的 master detail page 示例的链接。我也会从这个链接发布代码,以防将来链接断开

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>