UWP 主/详细视图答案

【问题标题】：UWP Master/Detail viewUWP 主/详细视图
【发布时间】：2016-05-14 03:17:32
【问题描述】：

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

【问题讨论】：

您可以在此处查看官方主/详细示例：github.com/Microsoft/Windows-universal-samples/tree/master/…

标签： c# win-universal-app uwp master-detail

【解决方案1】：

拥有一些应用架构是件好事...Windows XAML 社区已经在研究它。

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

【讨论】：

该仓库有一些问题需要解决。我不确定代码审查/审查是否能很好地理解异步/等待。我发表了一条评论，所以我们会看看它是如何更新的。

【解决方案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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以使用区域框架。这是 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>

在文件后面的代码中添加

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

在 setup.cs 文件中添加这个

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/

示例：https://github.com/MvvmCross/MvvmCross-Samples/tree/master/XPlatformMenus

【讨论】：