Question

我想知道是否有办法只使用一个实现响应式主/详细信息页面。我想要的东西与项目完全一样：

https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlMasterDetail

除了细节之外，我不会使用两个页面并且从一个页面导航到另一个页面，我只会使用一页。

有办法吗？如果是这样，你能给我一个工作实例吗？

Answer 1

除了细节之外，我不会使用两个页面并且从一个页面导航到另一个页面，我只会使用一页。

完成the project后，我发现它根据屏幕尺寸实现了响应式主/细节体验。当应用视图足够宽时，主列表和详细信息视图应在同一应用页面中并排显示。但是，在较小的屏幕尺寸上，两个UI应显示在不同的页面上，允许用户在它们之间导航。从我的角度来看，我认为这是实现响应式主/细节体验的良好解决方案。

有办法吗？如果是这样，你能给我一个工作实例吗？

The project已经展示了如何仅使用一个页面在UWP中实现响应式主/细节，但它实现了更多，这使得理解起来有点复杂。所以我做了一个简单的例子，它直接显示了如何仅使用一个页面在UWP中实现响应式Master / Detail。

以下是主要步骤：

首先，创建一个ListView以在xaml页面中显示主信息：

<!--Master VIEW-->
<ListView x:Name="ItemListView" Margin="0,0,0,8">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel HorizontalAlignment="Left" Margin="10,8,0,0">
                <TextBlock Text="{Binding Title}" FontSize="25"  Width="400" />
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

其次，在同一个xaml页面中指定详细信息视图，该视图显示与主列表中的选择相关的详细信息项：

<!--DETAILS VIEW-->
<StackPanel Grid.Column="1" x:Name="ContentPanelDetail" Margin="10,0,0,0" DataContext="{Binding SelectedItem, ElementName=ItemListView}">
    <TextBlock Text="{Binding Title}" MaxHeight="80" FontSize="30" HorizontalAlignment="Left"  Margin="0" />
    <TextBlock x:Name="DetailTextBlock" FontSize="35" Text="{Binding Content}" HorizontalAlignment="Left" Margin="0,18,40,0" Width="500"  Height="Auto" TextWrapping="Wrap" />
</StackPanel>

然后，在代码后面为ListView设置ItemsSource：

public MainPage()
{
    this.InitializeComponent();
    //set the ItemsSource for the ListView
    ItemDetails messageData = new ItemDetails();
    ItemListView.ItemsSource = messageData.Collection;
    ItemListView.SelectedIndex = 0;
}

最后但并非最不重要的是，将主视图和详细信息视图放入SplitView并使用VisualStateManager使其更加 responsive 。

以下是simple example和output供您参考。

Answer 2

要在页面上实现“主/详细”模式，您不必自己做。相反，您可以使用UWP Community Toolkit中的MasterDetailsView控件，它为您完成了很多工作，并且有据可查。

注意：对于控件的“详细信息”部分，请勿将背景设置为null（NoSelectionContent将可见）。

仅使用一个页面在UWP中实现响应式主/细节

2 个答案: