UWP控件——SplitView的使用

UWP控件——SplitView的使用

• • • 1. 控件结构
    • 2. 显示模式
    • 3. 简单Demo

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设计代码如下：

后台的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
{/// 
/// 可用于自身或导航至 Frame 内部的空白页。/// public sealed partial class MainPage : Page{public MainPage(){this.InitializeComponent();}private void Button_Click(object sender, RoutedEventArgs e){mySplitView.IsPaneOpen = !mySplitView.IsPaneOpen;}}
}

最终效果为：

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