拆分视图控件

  • 项目

拆分视图控件具有一个可展开/可折叠的窗格和一个内容区域。

重要 API：SplitView 类

下面是使用 SplitView 显示其中心的 Microsoft Edge 应用的示例。

Microsoft Edge 拆分视图示例

拆分视图的内容区域始终可见。 窗格可以展开和折叠或停留在打开状态，而且可以从应用窗口的左侧或右侧显示其自身。 窗格中有四种模式：

  • Overlay

    在打开之前隐藏窗格。 在打开时，窗格覆盖内容区域。

  • 内联

    窗格始终可见，并且不会覆盖内容区域。 窗格和内容区域划分可用的屏幕空间。

  • CompactOverlay

    在此模式下始终可以看见狭窄的部分窗格，宽度恰好足以显示图标。 默认关闭窗格宽度为 48px，可以使用 CompactPaneLength 进行修改。 如果打开窗格，将覆盖内容区域。

  • CompactInline

    在此模式下始终可以看见狭窄的部分窗格，宽度恰好足以显示图标。 默认关闭窗格宽度为 48px，可以使用 CompactPaneLength 进行修改。 如果打开窗格，将减少用于内容的空间，从而会将内容挤出去。

这是正确的控件吗？

拆分视图控件可用于创建任何“抽屉”体验，其中用户可以打开和关闭补充窗格。 例如，可以使用 SplitView 构建/细节模式。

若要生成带有展开/折叠按钮和导航项列表的导航菜单，可使用 NavigationView 控件。

示例

WinUI 2 库
WinUI 库

如果已安装 WinUI 2 库 应用，请单击此处 打开该应用并查看 SplitView 的实际应用。

创建拆分视图

下面是 SplitView 控件，有一个打开的窗格内联显示在“内容”旁边。

<SplitView IsPaneOpen="True"
           DisplayMode="Inline"
           OpenPaneLength="296">
    <SplitView.Pane>
        <TextBlock Text="Pane"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </SplitView.Pane>

    <Grid>
        <TextBlock Text="Content"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </Grid>
</SplitView>

获取示例代码