分屏控件SplitView

38-分屏控件SplitView

分屏控件 SplitView 是 Windows10 新增的控件类型，也是 Windows10 通用应用程序推荐的交互控件，通常和一个汉堡按钮搭配作为一种抽屉式菜单来进行呈现。

语法

<SplitView>
    <SplitView.Pane>
        .....菜单面板的内容
    </SplitView.Pane>
    ....主题内容
</SplitView>Code language: HTML, XML (xml)

SplitView 控件主要由两部分组成：一部分是菜单的面板；另一部分是主体内容。菜单面板是通过 Pane 属性来进行赋值，并且通过 IsPaneOpen 属性来控制打开和关闭状态。当菜单关闭的时候，页面将全部显示 SplitView 的主体内容，主题内容为 Content 属性。

练一练

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <SplitView
        IsPaneOpen="False"
        DisplayMode="CompactInline"
        OpenPaneLength="150">
        <SplitView.Pane>
            <TextBlock
                Text="Pane"
                FontSize="24"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"/>
        </SplitView.Pane>

        <Grid Background="Gray">
            <TextBlock
                Text="Content"
                FontSize="24"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"/>
        </Grid>
    </SplitView>
</Grid>Code language: HTML, XML (xml)