如何实现电子邮件UWP主/详细信息视图？

Question

必须具备以下功能

1. 在大屏幕上，显示主视图和详细信息视图
2. 在小屏幕上，如果详细信息视图没有内容，则会显示主视图，如果有内容，则会显示详细信息视图，并且可以单击后退按钮，单击时将导航到主视图
3. 响应

我尝试了很多，但不能做第二条规则，我需要你的帮助：）

XAML：

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="AdaptiveStates">
            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.IsPaneOpen" Value="False"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="MiddleState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="920"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.IsPaneOpen" Value="True"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <SplitView x:Name="MainSplitView" IsPaneOpen="True" OpenPaneLength="400" DisplayMode="CompactInline" CompactPaneLength="0">
        <SplitView.Pane>
            <ListView/>
        </SplitView.Pane>
        <SplitView.Content>
            <Frame x:Name="DetailFrame"/>
        </SplitView.Content>
    </SplitView>
</Grid>

Answer 1

您可以使用UWP Community Toolkit中的MasterDetailsView控件，而不是实现您自己的控件。阅读更多here。