仅使用一页在 UWP 中实现响应式 Master/Detail

Question

我想知道是否有办法仅使用一个来实现响应式 Master/Detail 页面。我想要的是和这里的项目完全一样的东西：

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

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

有办法吗？如果是这样，你能 link 给我一个可行的例子吗？

Answer 1

Except for the detail that instead of using two pages and navigating from one to another I would only use one page.

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

Is there a way to do it? If so, could you link me a working example?

The project 已经展示了如何仅使用一个页面在 UWP 中实现响应式 Master/Detail，但它实现了更多，这使得理解起来有点复杂。所以我做了一个简单的例子，直接展示了如何在 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 页面中指定显示与主列表上的选择相关的详细信息项 的详细信息视图：

 <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; }

最后但同样重要的是，将Master View 和Details View 放入一个SplitView 中，并使用VisualStateManager 使其更加responsive。

这里是simple example and the output供大家参考。

Answer 2

要在您的页面上实施 Master/Detail 模式，您不必自己动手。相反，您可以使用 UWP Community Toolkit 中的 MasterDetailsView 控件，它为您做了很多工作 + 它有据可查。

注意：对于控件的细节部分，不要将背景设置为空（NoSelectionContent 将可见）。

仅使用一页在 UWP 中实现响应式 Master/Detail

Implement responsive Master/Detail in UWP using only one page

c#

xaml

uwp

master-detail