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

发布时间：2015-12-10 11:00:11

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

在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 get='_blank'>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

}

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com