UWP控件——SplitView的使用

1. 控件结构

SplitView菜单常用于抽屉式菜单展示和功能导航，该控件由两部分构成：

• 导航面板：SplitView.Pane
• 内容部分：SplitView.Content

导航面板用于功能展示，例如下图左侧黑色部分，右侧白色即为内容部分。这两部分内容缺一不可。

2. 显示模式

SplitView布局控件的展示模式（DisplayMode）分为四种:

• Inline：将右侧内容直接推开

• Overlay:覆盖右侧内容，覆盖的宽度取决于OpenPaneLength设置的像素值

• CompactOverlay：通过设置CompactPaneLength，预留一部分宽度，一般是为了展示图标信息，如下图所示，这里同样会对右侧的SplitView.Content进行遮盖。

• CompactInline：同样需要设置CompactPaneLength来预留宽度，面板打开后会将右侧内容推开。

3. 简单Demo

了解完上述基础知识，下面简单做个Demo来试用下SplitView。

• 通过鼠标点击事件，控制左侧SplitView.Pane面板的开关。XAML设计代码如下：

<Page
    x:Class="basicSplitView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:basicSplitView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <SplitView x:Name="mySplitView" DisplayMode="Overlay" CompactPaneLength="100" OpenPaneLength="200" IsPaneOpen="True">
            <SplitView.Pane>
                <StackPanel Background="Gold">
                    <TextBlock Text="helo"/>
                    <TextBlock Text="heoj"/>
                    <TextBlock Text="jfhs"/>
                </StackPanel>
            </SplitView.Pane>
            <SplitView.Content>
                <StackPanel Background="LightGreen">
                    <TextBlock Text="jhfa"/>
                    <TextBlock Text="jjia"/>
                    <TextBlock Text="kfoa"/>
                </StackPanel>
            </SplitView.Content>
        </SplitView>
        <Button Content="Click Me" Click="Button_Click" HorizontalAlignment="Center"/>
    </Grid>
</Page>

后台的C#代码为：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x804 上介绍了“空白页”项模板

namespace basicSplitView
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            mySplitView.IsPaneOpen = !mySplitView.IsPaneOpen;
        }
    }
}

最终效果为：

• 默认界面
  
• 点击按钮后
  
  在实现汉堡菜单时，需要使用上述SplitView控件。而现在，对于汉堡菜单，有全新的NavigationView控件，实现了汉堡菜单的基本功能，界面如下：