Win10 UWP 开发系列：使用SplitView实现汉堡菜单及页面内导航

时间：2015-12-10 11:14:01 阅读：325 评论：0 收藏：0 [点我收藏+]

标签：

在Win10之前，WP平台的App主要有枢轴和全景两种导航模式，我个人更喜欢Pivot即枢轴模式，可以左右切换，非常方便。全景视图因为对设计要求比较高，自己总是做不出好的效果。对于一般的新闻阅读类App来说，Pivot更适合多个频道的展示，因为内容基本都是一样的。

到了Win10，微软模仿其他平台也推出了汉堡菜单，但并没有提供现成的控件，而是需要开发者通过一个名为SplitView的控件来实现。我个人并不觉得左上角的菜单有多么方便，汉堡菜单的使用必然会改变以前的导航模式，比如以前底部的AppBar使用很频繁，现在可以通过汉堡菜单的按钮来切换不同的页面。因此之前的App的导航模式需要重新设计。

假设有A、B、C三个平行的页面，可以在每个页面的左侧都放个汉堡菜单，也可以像web的框架页一样，做一个壳，汉堡菜单只放在外面的框架里，点击不同的按钮，在content里实现不同页面的导航。我比较倾向第二种，之前在做澎湃新闻uwp的时候就使用了这种方式，后来看了下Template10的模板，也是用的这种方式，在主页面外层套了一个Frame，而且还实现了一个汉堡菜单控件。有兴趣的同学可以参考Template10来快速生成一个带汉堡菜单的基础App，Github地址：https://github.com/Windows-XAML/Template10 ，这个项目还带了很多好东西，比如一些常用的帮助类和一些behavior等，值得uwp开发者好好学习。

我没有直接使用T10的模板，以下介绍的还是当时使用MVVM-Sidekick框架实现的页面内导航。

首先通过MVVM-Sidekick提供的项目模板来新建一个UWP项目，命名为NavDemo。

考虑我们要实现的目的：在主页面放置一个汉堡菜单，在右侧的content中实现不同页面的导航。

先来看一下效果：

PC版：

技术分享

手机版：

技术分享

一、创建菜单项类

汉堡菜单每个选项一般是由一个图标和一个文字组成，我还是使用FontAwesomeFont这个字体来显示图标，如何使用这个字体来做图标，可参考我之前的blog。首先建立一个菜单的类NavMenuItem，放在Models目录下，使用provm代码段生成两个属性：

public class NavMenuItem : BindableBase<NavMenuItem>

{

/// <summary>

/// FontAwesomeFontFamily

/// </summary>

public string Glyph

{

get { return _GlyphLocator(this).Value; }

set { _GlyphLocator(this).SetValueAndTryNotify(value); }

}

#region Property string Glyph Setup

protected Property<string> _Glyph = new Property<string> { LocatorFunc = _GlyphLocator };

static Func<BindableBase, ValueContainer<string>> _GlyphLocator = RegisterContainerLocator<string>("Glyph", model => model.Initialize("Glyph", ref model._Glyph, ref _GlyphLocator, _GlyphDefaultValueFactory));

static Func<string> _GlyphDefaultValueFactory = () => { return default(string); };

#endregion

/// <summary>

///文字

/// </summary>

public string Label

{

get { return _LabelLocator(this).Value; }

set { _LabelLocator(this).SetValueAndTryNotify(value); }

}

#region Property string Label Setup

protected Property<string> _Label = new Property<string> { LocatorFunc = _LabelLocator };

static Func<BindableBase, ValueContainer<string>> _LabelLocator = RegisterContainerLocator<string>("Label", model => model.Initialize("Label", ref model._Label, ref _LabelLocator, _LabelDefaultValueFactory));

static Func<string> _LabelDefaultValueFactory = () => { return default(string); };

#endregion

}

打开NavDemo\ViewModels\MainPage_Model.cs，使用propvm代码段生成一个列表：

public ObservableCollection<NavMenuItem> NavMenuItemList

{

get { return _NavMenuItemListLocator(this).Value; }

set { _NavMenuItemListLocator(this).SetValueAndTryNotify(value); }

}

#region Property ObservableCollection<HamburgerMenuItem> NavMenuItemList Setup

protected Property<ObservableCollection<NavMenuItem>> _NavMenuItemList = new Property<ObservableCollection<NavMenuItem>> { LocatorFunc = _NavMenuItemListLocator };

static Func<BindableBase, ValueContainer<ObservableCollection<NavMenuItem>>> _NavMenuItemListLocator = RegisterContainerLocator<ObservableCollection<NavMenuItem>>("NavMenuItemList", model => model.Initialize("NavMenuItemList", ref model._NavMenuItemList, ref _NavMenuItemListLocator, _NavMenuItemListDefaultValueFactory));

static Func<ObservableCollection<NavMenuItem>> _NavMenuItemListDefaultValueFactory = () => default(ObservableCollection<NavMenuItem>);

#endregion

在vm的构造函数里，添加几个项：

public MainPage_Model()

{

if (IsInDesignMode )

{

Title = "Title is a little different in Design mode";

}

NavMenuItemList = new ObservableCollection<NavMenuItem>();

NavMenuItemList.Add(new NavMenuItem { Glyph = "\uf015", Label = "首页" });

NavMenuItemList.Add(new NavMenuItem { Glyph = "\uf002", Label = "搜索" });

NavMenuItemList.Add(new NavMenuItem { Glyph = "\uf05a", Label = "关于" });

}

注意Glyph的赋值方式。

二、显示汉堡菜单

在项目中新建Resources目录，把FontAwesome.otf字体文件放在里面。在项目中新建CustomTheme目录，然后建立自定义的样式资源文件CustomStyles.xaml，代码如下：

<ResourceDictionary

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:NavDemo">

<FontFamily x:Key="FontAwesomeFontFamily">/Resources/FontAwesome.otf#FontAwesome</FontFamily>

<Setter.Value>

<VisualStateManager.VisualStateGroups>