UWP主/明细视图

Question

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

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> 

您还可以在示例应用程序中找到另一个示例：qazxsw poi

Answer 3

您也可以使用https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlListView提供的MasterDetailsView Control。

Answer 4

您可以使用区域框架。这是MvvmCross的一个例子。

UWP Community Toolkit

在代码后面的文件中添加

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

在setup.cs文件中添加它

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

对于较新版本使用：

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

在子视图的代码隐藏文件的顶部添加以下属性：

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

对于更高版本：

[MvxRegion("FrameContent")]

用它来导航到子视图：

[MvxRegionPresentation("FrameContent")]

请参阅此链接：ShowViewModel<SecondViewModel>()

示例：https://depblog.weblogs.us/2015/11/23/mvvmcross-uwp-splitview/