UWP主/明细视图

Question

I am searching for a good example how to build a master/detail view for UWP Win 10 app like shown on this page: https://msdn.microsoft.com/en-us/library/windows/apps/dn997765.aspx For example Windows Mail app has the same master/detail view. How can I implement this style? On the left side I think to use a listview, but how to show the data in the Detail side? Can I use a Frame or ContentPresenter? How can enable/disable the detail view on phone/tablet/pc? Hope there is example or tutorial which shows how to deal with this.

Answer 1

It's good to have some app architecture... The Windows XAML community already worked on it.

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

<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 exemple in samples app : https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlListView

Answer 3

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

Answer 4

You can use region frames. Here is an example for MvvmCross.

<SplitView x:Name="RootSplitView"
           DisplayMode="Inline"
           OpenPaneLength="256"
           IsTabStop="False">
    <SplitView.Pane>
        <StackPanel Margin="0,50,0,0">
            <Button Content="Second" Command="{x:Bind Vm.SecondCommand}" />
            <Button Content="Third" Command="{x:Bind Vm.ThirdCommand}" />
        </StackPanel>
    </SplitView.Pane>

    <!-- OnNavigatingToPage we synchronize the selected item in the nav menu with the current page.
         OnNavigatedToPage we move keyboard focus to the first item on the page after it's loaded and update the Back button. -->
    <Frame x:Name="FrameContent">
        <Frame.ContentTransitions>
            <TransitionCollection>
                <NavigationThemeTransition>
                    <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                        <EntranceNavigationTransitionInfo/>
                    </NavigationThemeTransition.DefaultNavigationTransitionInfo>
                </NavigationThemeTransition>
            </TransitionCollection>
        </Frame.ContentTransitions>
    </Frame>
</SplitView>

In the code behind file add

public Frame AppFrame { get { return (Frame)this.WrappedFrame.UnderlyingControl; } }

Add this in setup.cs file

protected override IMvxWindowsViewPresenter CreateViewPresenter(IMvxWindowsFrame rootFrame)
{
    return new MvxWindowsMultiRegionViewPresenter(rootFrame);
}

for newer versions use:

protected override IMvxWindowsViewPresenter CreateViewPresenter(IMvxWindowsFrame rootFrame)
{
    return new MvxWindowsMultiRegionViewPresenter(rootFrame);
}

Add following attribute at the top of the code behind file of child view:

[MvxRegion("FrameContent")]

For later versions:

[MvxRegionPresentation("FrameContent")]

Use this for navigating to child view:

ShowViewModel<SecondViewModel>()

Refer to this link: https://depblog.weblogs.us/2015/11/23/mvvmcross-uwp-splitview/

Examples: https://github.com/MvvmCross/MvvmCross-Samples/tree/master/XPlatformMenus