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控制。