Question

在MasterDetailView中，我列出了不同的项目。选择该项后，必须加载适当的DetailsTemplate。

我绝对不知道该怎么做！

这个例子就是我期望的互动方式。

MasterDetailView左侧的列表中充满了猪，鸡和金鱼。

当用户选择清管器项目时，清管器的详细信息必须出现在MasterDetailView控件的详细信息部分中。

当用户选择金鱼项目时，金鱼的详细信息必须出现。

等

Answer 1

如果您的左菜单列表视图中的项目是IAnimal的实例。

只需将SelectedItem绑定到视图模型上的属性SelectedAnimal。

创建一个网格并将一个ContentControl放置在该网格中以承载详细信息视图。将其内容绑定到SelectedAnimal，然后在网格的资源中为每种动物类型添加一个数据模板，并将其映射到一个视图，该视图将可视化您要显示的IAnimal细节。

因此，当您单击左侧菜单中的IAnimal时，它将被设置为VM SelectedAnimal属性。然后，ContentControl将使用由DataTemplate定义的View来显示IAnimal。

我将使用相同的方法来定义左侧菜单在菜单列表中查找IAnimal项目的方式。

Answer 2

添加到我的上述评论中。如果您想成为UWP的初学者。您只想知道如何开始使用Windows社区工具包的MasterDetailsView XAML控件。然后，正式文件Windows Community Toolkit Documentation将是一个好的开始。

并且Windows社区工具包还为每个控件提供了完整的代码示例。样本位于github上。对于MasterDetalsView是here。

我甚至根据您的描述制作了一个简单的代码示例供您参考。

<controls:MasterDetailsView
      ItemsSource="{Binding animals}">
        <controls:MasterDetailsView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding DisplayName}"></TextBlock>
            </DataTemplate>
        </controls:MasterDetailsView.ItemTemplate>
        <controls:MasterDetailsView.DetailsTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding DisplayName}"></TextBlock>
                    <TextBlock Text="{Binding Description}"></TextBlock>
                </StackPanel>
            </DataTemplate>
        </controls:MasterDetailsView.DetailsTemplate>
        <controls:MasterDetailsView.NoSelectionContentTemplate>
            <DataTemplate>
                <TextBlock Text="No Selection"></TextBlock>
            </DataTemplate>
        </controls:MasterDetailsView.NoSelectionContentTemplate>
    </controls:MasterDetailsView>

public sealed partial class MainPage : Page
{
    public ObservableCollection<Animal> animals { get; set; }

    public MainPage()
    {
        this.InitializeComponent();
        animals = new ObservableCollection<Animal>();
        animals.Add(new Animal() { DisplayName = "Pig", Description = "This is a pig" });
        animals.Add(new Animal() { DisplayName = "Dog", Description = "This is a dog" });
        this.DataContext = this;
    }
}

public class Animal
{
    public string DisplayName { get; set; }

    public string Description { get; set; }
}

选择更改时，在MasterDetailsView上更改为其他DetailsTemplate

2 个答案: