UWP主/详细视图

Question

我在寻找一个很好的示例如何为此页上显示的UWP Win 10应用程序构建主/详细视图：https://msdn.microsoft.com/en-us/library/windows/apps/dn997765.aspx 例如，Windows Mail应用程序具有相同的主/明细视图。我怎样才能实现这种风格？在左边我想使用listview，但是如何在Detail侧显示数据？我可以使用Frame或ContentPresenter吗？如何启用/禁用手机/平板电脑/电脑上的详细视图？ 希望有示例或教程显示如何处理此问题。

Answer 1

很高兴有一些应用程序体系结构...... Windows XAML社区已经开始使用它了。

https://github.com/Windows-XAML/Template10/tree/master/Samples/MasterDetail

Answer 2

我想： https://blogs.msdn.microsoft.com/johnshews_blog/2015/09/09/a-minimal-mvvm-uwp-app/ 是一个很好为例。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 

    <StackPanel Grid.Column="0" Orientation="Vertical"> 
     <ListView x:Name="MainList" 
      ItemsSource="{x:Bind Organization.People, Mode=OneWay}" 
      SelectedIndex="{x:Bind Organization.SelectedIndex, Mode=TwoWay}" 
      MinWidth="250" Margin="5"> 

      <ListView.ItemTemplate> 
       <DataTemplate x:DataType="viewModels:PersonViewModel" > 
        <TextBlock Text="{x:Bind Name, Mode=OneWay}" /> 
       </DataTemplate> 
      </ListView.ItemTemplate> 
     </ListView> 
    </StackPanel> 

    <StackPanel Grid.Column="2" Orientation="Vertical"> 
     <TextBox 
      Text="{x:Bind Organization.SelectedPerson.Name, Mode=TwoWay, FallbackValue=''}" 
      Margin="5" /> 
     <TextBox 
      Text="{x:Bind Organization.SelectedPerson.Age, Mode=TwoWay, FallbackValue='0'}" 
      Margin="5" /> 
    </StackPanel> 
</Grid> 

您还可以找到在样本应用另一为例：https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlListView

Answer 3

您还可以使用由UWP Community Toolkit提供的MasterDetailsView控制。