Xamarin.Forms 中 MasterDetailPage 的 XAML 数据绑定

Question

到目前为止，大多数使用 Xamarin.Forms 的示例都是使用 C# 来构建 UI。我更喜欢将 XAML 用于 UI，并将其数据绑定到 ViewModel。

我在将 Xamarin.Forms.MasterDetailPage 与 XAML 结合使用时遇到问题，而且我似乎无法将 C# 示例移植到 XAML + ViewModels。

这是我目前得到的 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:NSContacten;assembly=NSContacten"
    x:Class="MasterDetailExample.Main"
    Title="Master Detail Example">

    <MasterDetailPage.Master BindingContext="{Binding Menu}">
        <ContentPage Padding="5, 25">               
            <StackLayout Orientation="Vertical">
                <Label Text="Master" HorizontalOptions="Center" />
                <Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
            </StackLayout>    
        </ContentPage>
    </MasterDetailPage.Master>

    <MasterDetailPage.Detail BindingContext="{Binding Detailpage}">
        <ContentPage Padding="5, 25">    
            <StackLayout Orientation="Vertical">
                <Label Text="Detail" HorizontalOptions="Center" />
                <Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
            </StackLayout>    
        </ContentPage>
    </MasterDetailPage.Detail>    
</MasterDetailPage>

该组件有效：我确实看到了“Master”和“Detail”标签。不显示绑定标签（在 BindingContext 对象上）。

我已经使用了很多不同的组合，但我仍然陷入困境：这是如何工作的？我的绑定不正确（应该在“ContentPage”上），我不能绑定到 .Master 和 .Detail 属性等吗？ “菜单”和“详细信息页面”绑定应该是什么样子？

如果有人可以帮助我，那将是一个巨大的帮助！下一步是当在 .Master 中按下按钮时 .Detail 将被更改。提前致谢！

Answer 1

您的 Xaml 几乎没问题，但是：

• {BindingContext} 在属性上无效，应在 ContentPage 元素上
• MasterDetailPage.Master 要求设置Page.Title，否则会抛出。

这是为我工作的正确 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:NSContacten;assembly=NSContacten"
    x:Class="MasterDetailExample.Main"
    Title="Master Detail Example">

    <MasterDetailPage.Master>
      <ContentPage Padding="5, 25"  BindingContext="{Binding Menu}" Title="Master">
          <StackLayout Orientation="Vertical">
              <Label Text="Master" HorizontalOptions="Center" />
              <Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
          </StackLayout>
        </ContentPage>

    </MasterDetailPage.Master>

    <MasterDetailPage.Detail>
        <ContentPage Padding="5, 25"  BindingContext="{Binding Detailpage}">

          <StackLayout Orientation="Vertical">
              <Label Text="Detail" HorizontalOptions="Center" />
              <Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
          </StackLayout>

        </ContentPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

我用匿名类型作为页面视图模型进行了测试：

public MyMDPage ()
{
    InitializeComponent ();
    BindingContext = new {
        Menu = new { Subtitle = "I'm Master" },
        Detailpage = new { Subtitle = "I'm Detail" }
    };
}

这很好用。在您的情况下，您可能希望视图模型使用具体类型而不是匿名类型，但您明白了。