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>

您还可以在示例应用中找到另一个示例：https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlListView

Answer 3

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

Answer 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>()

请参阅此链接：two-way binding

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

UWP主/明细视图

4 个答案: