Windows本地机器上Xamarin Forms的MasterDetailPage实现新手求助

嘿，作为Xamarin Forms新手，你已经把MasterDetailPage的基础架子搭起来了，不错！不过看起来你还没实现菜单按钮切换详情页的核心功能，我来一步步帮你完善~

你提供的代码片段缺少MasterDetailPage的根节点定义，我先给你补全完整的XAML代码，同时给每个按钮加上点击事件：

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace" <!-- 替换成你的应用命名空间 -->
             x:Class="YourAppNamespace.MainMasterDetailPage"> <!-- 替换成你的页面类名 -->
    <MasterDetailPage.Master>
        <ContentPage Title="Menu">
            <StackLayout Orientation="Vertical" Padding="10" Spacing="10">
                <Button Text="Sports" Clicked="SportsButton_Clicked" />
                <Button Text="Science" Clicked="ScienceButton_Clicked" />
                <Button Text="Education" Clicked="EducationButton_Clicked" />
                <Button Text="Economy" Clicked="EconomyButton_Clicked" />
            </StackLayout>
        </ContentPage>
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <!-- 给Detail页套个NavigationPage，方便后续导航和返回 -->
        <NavigationPage>
            <x:Arguments>
                <local:MainPage/>
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

打开对应的MainMasterDetailPage.xaml.cs文件，添加每个按钮的点击事件处理方法，实现切换详情页并关闭侧边菜单：

using Xamarin.Forms;

namespace YourAppNamespace // 同样替换成你的应用命名空间
{
    public partial class MainMasterDetailPage : MasterDetailPage
    {
        public MainMasterDetailPage()
        {
            InitializeComponent();
        }

        private void SportsButton_Clicked(object sender, EventArgs e)
        {
            // 切换到Sports页面，记得先创建好SportsPage这个ContentPage哦
            Detail = new NavigationPage(new SportsPage());
            // 切换完成后自动关闭侧边菜单
            IsPresented = false;
        }

        private void ScienceButton_Clicked(object sender, EventArgs e)
        {
            Detail = new NavigationPage(new SciencePage());
            IsPresented = false;
        }

        private void EducationButton_Clicked(object sender, EventArgs e)
        {
            Detail = new NavigationPage(new EducationPage());
            IsPresented = false;
        }

        private void EconomyButton_Clicked(object sender, EventArgs e)
        {
            Detail = new NavigationPage(new EconomyPage());
            IsPresented = false;
        }
    }
}

别忘了在App.xaml.cs里把应用的启动页改成这个MasterDetailPage，这样打开应用就直接进入侧边菜单结构了：

public App()
{
    InitializeComponent();
    // 替换成你的MasterDetailPage类名
    MainPage = new MainMasterDetailPage();
}

如果后续想让代码更整洁、更易维护，可以试试MVVM模式，用命令绑定代替事件。举个简单的例子：

首先创建一个菜单ViewModel：

using Xamarin.Forms;
using System.Windows.Input;

namespace YourAppNamespace
{
    public class MenuViewModel
    {
        public ICommand NavigateToSportsCommand { get; }
        public ICommand NavigateToScienceCommand { get; }
        public ICommand NavigateToEducationCommand { get; }
        public ICommand NavigateToEconomyCommand { get; }

        private readonly MasterDetailPage _masterPage;

        public MenuViewModel(MasterDetailPage masterPage)
        {
            _masterPage = masterPage;

            NavigateToSportsCommand = new Command(() => NavigateToPage(new SportsPage()));
            NavigateToScienceCommand = new Command(() => NavigateToPage(new SciencePage()));
            NavigateToEducationCommand = new Command(() => NavigateToPage(new EducationPage()));
            NavigateToEconomyCommand = new Command(() => NavigateToPage(new EconomyPage()));
        }

        private void NavigateToPage(Page targetPage)
        {
            _masterPage.Detail = new NavigationPage(targetPage);
            _masterPage.IsPresented = false;
        }
    }
}

然后修改XAML里的按钮绑定：

<MasterDetailPage.Master>
    <ContentPage Title="Menu">
        <ContentPage.BindingContext>
            <local:MenuViewModel/>
        </ContentPage.BindingContext>
        <StackLayout Orientation="Vertical" Padding="10" Spacing="10">
            <Button Text="Sports" Command="{Binding NavigateToSportsCommand}" />
            <Button Text="Science" Command="{Binding NavigateToScienceCommand}" />
            <Button Text="Education" Command="{Binding NavigateToEducationCommand}" />
            <Button Text="Economy" Command="{Binding NavigateToEconomyCommand}" />
        </StackLayout>
    </ContentPage>
</MasterDetailPage.Master>

最后在后台初始化ViewModel时传入当前MasterDetailPage：

public MainMasterDetailPage()
{
    InitializeComponent();
    ((ContentPage)Master).BindingContext = new MenuViewModel(this);
}

这样就把UI和逻辑分开了，后续扩展更方便~

内容的提问来源于stack exchange，提问作者Abhishek Aggarwal