通过

拆分视图控件

  • 项目

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

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

获取示例代码