通过

拆分视图控件

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

重要 API： SplitView 类

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

Microsoft Edge 拆分视图示例

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

  • 覆盖

    窗格处于隐藏状态，直到打开。 打开时，窗格覆盖内容区域。

  • 内联

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

  • CompactOverlay

    此模式下，窗格的较窄部分始终可见，该模式的宽度足以显示图标。 默认的封闭窗格宽度为 48px，这可以通过CompactPaneLength进行修改。 如果打开窗格，它将覆盖内容区域。

  • CompactInline

    此模式下，窗格的较窄部分始终可见，该模式的宽度足以显示图标。 默认的封闭窗格宽度为 48px，这可以通过CompactPaneLength进行修改。 如果打开窗格，它将减少可用于内容的空间，从而把内容推到一边。

这是正确的控制吗？

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

如果要使用展开/折叠按钮和导航项列表生成导航菜单，请使用 NavigationView 控件。

创建拆分视图

这是一个 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>

获取示例代码

  • Last updated on