UWP Master / Detail View

Question

I am looking for a good example of how to create a wizard / part view for UWP Win 10, as shown on this page: https://msdn.microsoft.com/en-us/library/windows/apps/dn997765.aspx For example, a Windows application Mail has the same master / detail view. How can I implement this style? On the left side, I think using listview, but how to show the data in detail? Can I use Frame or ContentPresenter? How to enable / disable detailed viewing on a phone / tablet / PC? Hopefully there is an example or tutorial that shows how to handle this.

Answer 1

It's nice to have some application architecture ... The Windows XAML community has already worked on this.

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

Answer 2

I think: https://blogs.msdn.microsoft.com/johnshews_blog/2015/09/09/a-minimal-mvvm-uwp-app/ is a good example.

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

You can also find another example in the examples application: https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlListView

Answer 3

MasterDetailsView , UWP.

Answer 4

I used MvvmCross, so this example really made it possible: https://github.com/MvvmCross/MvvmCross-Samples/tree/master/XPlatformMenus