Win10 UWP 开发系列：使用SplitView实现汉堡菜单及页面内导航
在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 >
< Style x : Key ="SplitViewTogglePaneButtonStyle" TargetType ="ToggleButton">
< Setter Property ="FontSize" Value ="20" />
< Setter Property ="FontFamily" Value ="{ ThemeResource SymbolThemeFontFamily }" />
< Setter Property ="MinHeight" Value ="48" />
< Setter Property ="MinWidth" Value ="48" />
< Setter Property ="Margin" Value ="0" />
< Setter Property ="Padding" Value ="0" />
< Setter Property ="HorizontalAlignment" Value ="Left" />
< Setter Property ="VerticalAlignment" Value ="Top" />
< Setter Property ="HorizontalContentAlignment" Value ="Center" />
< Setter Property ="VerticalContentAlignment" Value ="Center" />
< Setter Property ="Background" Value ="Transparent" />
< Setter Property ="Foreground" Value ="{ ThemeResource SystemControlForegroundBaseHighBrush }" />
< Setter Property ="Content" Value ="" />
< Setter Property ="AutomationProperties.Name" Value ="Menu" />
< Setter Property ="UseSystemFocusVisuals" Value ="True"/>
< Setter Property ="Template">
< Setter.Value >
< ControlTemplate TargetType ="ToggleButton">
< Grid Background ="{ TemplateBinding Background }" x : Name ="LayoutRoot">
< VisualStateManager.VisualStateGroups >
< VisualStateGroup x : Name ="CommonStates">
< VisualState x : Name ="Normal" />
< VisualState x : Name ="PointerOver">
< Storyboard >
< ObjectAnimationUsingKeyFrames Storyboard.TargetName ="LayoutRoot" Storyboard.TargetProperty ="(Grid.Background)">
< DiscreteObjectKeyFrame KeyTime ="0" Value ="{ ThemeResource SystemControlHighlightListLowBrush }"/>
</ ObjectAnimationUsingKeyFrames >
< ObjectAnimationUsingKeyFrames Storyboard.TargetName ="ContentPresenter" Storyboard.TargetProperty ="Foreground">
< DiscreteObjectKeyFrame KeyTime ="0" Value ="{ ThemeResource SystemControlHighlightAltBaseHighBrush }"/>
</ ObjectAnimationUsingKeyFrames >
</ Storyboard >
</ VisualState >
< VisualState x : Name ="Pressed">
< Storyboard >
< ObjectAnimationUsingKeyFrames Storyboard.TargetName ="LayoutRoot" Storyboard.TargetProperty ="(Grid.Background)">
< DiscreteObjectKeyFrame KeyTime ="0" Value ="{ ThemeResource SystemControlHighlightListMediumBrush }"/>
</ ObjectAnimationUsingKeyFrames >
< ObjectAnimationUsingKeyFrames Storyboard.TargetName ="ContentPresenter" Storyboard.TargetProperty ="Foreground">
< DiscreteObjectKeyFrame KeyTime ="0" Value ="{ ThemeResource SystemControlHighlightAltBaseHighBrush }"/>
</ ObjectAnimationUsingKeyFrames >
</ Storyboard >
</ VisualState >
< VisualState x : Name ="Disabled">
< Storyboard >
< ObjectAnimationUsingKeyFrames Storyboard.TargetName ="ContentPresenter" Storyboard.TargetProperty ="(TextBlock.Foreground)">
< DiscreteObjectKeyFrame KeyTime ="0" Value ="{ ThemeResource SystemControlDisabledBaseLowBrush }"/>
</ ObjectAnimationUsingKeyFrames >
</ Storyboard >
</ VisualState >
< VisualState x : Name ="Checked"/>
< VisualState x : Name ="CheckedPointerOver">
< Storyboard >
< ObjectAnimationUsingKeyFrames Storyboard.TargetName ="LayoutRoot" Storyboard.TargetProperty ="(Grid.Background)">
< DiscreteObjectKeyFrame KeyTime ="0" Value ="{ ThemeResource SystemControlHighlightListLowBrush }"/>
</ ObjectAnimationUsingKeyFrames >
< ObjectAnimationUsingKeyFrames Storyboard.TargetName ="ContentPresenter" Storyboard.TargetProperty ="Foreground">
< DiscreteObjectKeyFrame KeyTime ="0" Value ="{ ThemeResource SystemControlHighlightAltBaseHighBrush }"/>
</ ObjectAnimationUsingKeyFrames >
</ Storyboard >
</ VisualState >
< VisualState x : Name ="CheckedPressed">
< Storyboard >
< ObjectAnimationUsingKeyFrames Storyboard.TargetName ="LayoutRoot" Storyboard.TargetProperty ="(Grid.Background)">
< DiscreteObjectKeyFrame KeyTime ="0" Value ="{ ThemeResource SystemControlHighlightListMediumBrush }"/>
</ ObjectAnimationUsingKeyFrames >
< ObjectAnimationUsingKeyFrames Storyboard.TargetName ="ContentPresenter" Storyboard.TargetProperty ="Foreground">
< DiscreteObjectKeyFrame KeyTime ="0" Value ="{ ThemeResource SystemControlHighlightAltBaseHighBrush }"/>
</ ObjectAnimationUsingKeyFrames >
</ Storyboard >
</ VisualState >
< VisualState x : Name ="CheckedDisabled">
< Storyboard >
< ObjectAnimationUsingKeyFrames Storyboard.TargetName ="ContentPresenter" Storyboard.TargetProperty ="(TextBlock.Foreground)">
< DiscreteObjectKeyFrame KeyTime ="0" Value ="{ ThemeResource SystemControlDisabledBaseLowBrush }"/>
</ ObjectAnimationUsingKeyFrames >
</ Storyboard >
</ VisualState >
</ VisualStateGroup >
</ VisualStateManager.VisualStateGroups >
< ContentPresenter x : Name ="ContentPresenter"
Content ="{ TemplateBinding Content }"
Margin ="{ TemplateBinding Padding }"
HorizontalAlignment ="{ TemplateBinding HorizontalContentAlignment }"
VerticalAlignment ="{ TemplateBinding VerticalContentAlignment }"
AutomationProperties.AccessibilityView ="Raw" />
</ Grid >
</ ControlTemplate >
</ Setter.Value >
</ Setter >
</ Style >
</ ResourceDictionary >
然后打开App.xaml文件，把这个资源引用进来：
< Application.Resources >
< ResourceDictionary >
< ResourceDictionary.MergedDictionaries >
< ResourceDictionary Source ="CustomTheme/CustomStyles.xaml"/>
</ ResourceDictionary.MergedDictionaries >
</ ResourceDictionary >
</ Application.Resources >
样式资源文件里主要定义了两个样式，一是定义了FontAwesomeFontFamily字体，二是定义了一个针对ToggleButton的按钮样式SplitViewTogglePaneButtonStyle，作为汉堡菜单的开关。这个开关键为什么要设置高度为48呢？参考 https://msdn.microsoft.com/zh-cn/library/windows/apps/dn997787.aspx
拆分视图控件具有一个可展开/可折叠的窗格和一个内容区域。内容区域始终可见。窗格可以展开和折叠或停留在打开状态，而且可以从应用窗口的左侧或右侧显示其自身。窗格中有三种模式：
-
覆盖
在打开之前隐藏窗格。在打开时，窗格覆盖内容区域。
-
内联
窗格始终可见，并且不会覆盖内容区域。窗格和内容区域划分可用的屏幕实际使用面积。
-
精简
在此模式下窗格始终可见，它仅足够宽以显示图标（通常 48 epx 宽）。 窗格和内容区域划分可用的屏幕实际使用面积。尽管标准精简模式不覆盖内容区域，但它可以转化为更宽的窗格来显示更多内容，这将覆盖该内容区域。
所以我就根据官方文档设置为48了。
修改MainPage.xaml，把根Grid改为以下代码：
< Grid Background ="{ ThemeResource ApplicationPageBackgroundThemeBrush }" DataContext ="{ StaticResource DesignVM }">
<!-- Top-level navigation menu + app content -->
< SplitView x : Name ="RootSplitView" IsPaneOpen ="True"
DisplayMode ="Inline"
OpenPaneLength ="256"
IsTabStop ="False">
< SplitView.Pane >
<!-- A custom ListView to display the items in the pane. The automation Name is set in the ContainerContentChanging event. -->
< ListView ItemsSource ="{ Binding NavMenuItemList }">
</ ListView >
</ SplitView.Pane >
< SplitView.Content >
< Frame x : Name ="mainFrame">
</ Frame >
</ SplitView.Content >
</ SplitView >
<!-- Declared last to have it rendered above everything else, but it needs to be the first item in the tab sequence. -->
< ToggleButton x : Name ="TogglePaneButton"
TabIndex ="1"
Style ="{ StaticResource SplitViewTogglePaneButtonStyle }"
IsChecked ="{ Binding IsPaneOpen , ElementName =RootSplitView, Mode =TwoWay}"
AutomationProperties.Name ="Menu"
ToolTipService.ToolTip ="Menu" />
</ Grid >
为了方便查看菜单展开的效果，暂时先把IsPaneOpen属性设置为true，OpenPaneLength设置的是菜单展开后的宽度。在Pane里放一个ListView，ItemSource绑定到之前做好的NavMenuItemList上。SplitView的Content设置为一个Frame，用来展示右侧的页面。
注意，如果当SplitView的Content直接设置为Frame的时候，也就是把外层的 < SplitView.Content > 去掉 后，会报一个错：
这个错误可以不用理会，程序是可以正常运行的。
此外 还要有一个按钮来控制菜单的展开关闭状态，用一个ToggleButton来实现，这个按钮的图标一般是三个横杠，设置其Style为SplitViewTogglePaneButtonStyle即可。
然后，还要设置ListView的项模板，可以使用Blend来设计项模板，但因为这个比较简单，我就直接手写了，在Resources目录下添加一个资源文件CustomDataTemplates.xaml，项目所有的自定义模板都可以写在这里，代码如下：
< ResourceDictionary
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns : x ="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns : Interactivity ="using:Microsoft.Xaml.Interactivity"
xmlns : Core ="using:Microsoft.Xaml.Interactions.Core"
xmlns : Behaviors ="using:MVVMSidekick.Behaviors">
< DataTemplate x : Key ="NavMenuItemTemplate" >
< Grid >
< Grid.ColumnDefinitions >
< ColumnDefinition MinWidth ="48" />
< ColumnDefinition />
</ Grid.ColumnDefinitions >
< FontIcon x : Name ="Glyph" FontFamily ="{ StaticResource FontAwesomeFontFamily }" FontSize ="16" Margin ="0" Glyph ="{ Binding Glyph }" VerticalAlignment ="Center" HorizontalAlignment ="Center" ToolTipService.ToolTip ="{ Binding Label }"/>
< TextBlock x : Name ="Text" Grid.Column ="1" Text ="{ Binding Label }" VerticalAlignment ="Center"/>
</ Grid >
</ DataTemplate >
</ ResourceDictionary >
在这里定义一个项模板NavMenuItemTemplate，在里面放一个FontIcon，把Glyph属性绑定到NavMenuItem的Glyph属性，当然不要忘了把FontFamily设置为我们在自定义样式里定义好的FontAwesomeFontFamily，不然是不会生效的。
再把这个项模板应用到页面的ListView控件上：
ItemTemplate ="{ StaticResource NavMenuItemTemplate }"
现在跑一下试试，报错了：
原来忘了把刚才的模板文件引入进来，修改App.xaml，修改为以下的样子：
< Application.Resources >
< ResourceDictionary >
< ResourceDictionary.MergedDictionaries >
< ResourceDictionary Source ="CustomTheme/CustomStyles.xaml"/>
< ResourceDictionary Source ="Resources/CustomDataTemplates.xaml" />
</ ResourceDictionary.MergedDictionaries >
</ ResourceDictionary >
</ Application.Resources >
现在可以运行了：
貌似左上角的按钮跟ListView重叠了，这样可不好看。
三、调整显示效果
左上角的按钮应用了SplitViewTogglePaneButtonStyle样式，最小高度为48，把ListView往下移动一点，添加一个Margin属性，顶部把开关按钮的空间空出来：
< ListView Margin ="0,48,0,0" ItemsSource ="{ Binding NavMenuItemList }"
ItemTemplate ="{ StaticResource NavMenuItemTemplate }">
现在列表位置正常了，但图标的位置貌似还是偏右了，那就再给ListView设置ItemContainerStyle样式，在CustomStyles.xaml文件里添加以下代码：
< Style x : Key ="NavMenuItemContainerStyle" TargetType ="ListViewItem">
< Setter Property ="MinWidth" Value ="{ StaticResource SplitViewCompactPaneThemeLength }"/>
< Setter Property ="Height" Value ="48"/>
< Setter Property ="Padding" Value ="0"/>
</ Style >
ListView应用此样式：
< ListView Margin ="0,48,0,0" ItemsSource ="{ Binding NavMenuItemList }"
ItemTemplate ="{ StaticResource NavMenuItemTemplate }"
ItemContainerStyle ="{ StaticResource NavMenuItemContainerStyle }">
</ ListView >
再跑一下：
现在样式正常了。
四、增加新页面
现在MainPage.xaml只是一个壳，右侧内容是空的，下面来添加几个页面。在项目里添加几个页面，比如可以命名为HomePage、SearchPage、AboutPage等：
因为每个页面里已经默认添加了一个TextBlock，并且绑定到了vm的Title属性，这个属性默认取值就是当前页面的Name，所以我们就不用改了，知道当前页面是哪个就行了。
现在的问题是，如何在MainPage载入时，自动在SplitView的Content里显示HomePage呢？
这就需要用到MVVM-Sidekick的一个Behavior了，用Blend打开项目，找到行为：
有一个叫做BaeconBehavior的行为，把它拖到……咦，怎么找不到Content呢？
那就直接手写吧，把Frame部分的代码改成这样：
< SplitView.Content >
< Frame x : Name ="mainFrame" mvvm : StageManager.Beacon ="frameMain" x : FieldModifier ="public">
</ Frame >
</ SplitView.Content >
StageManager.Beacon属性是用来标识StageManager，MVVM-Sidekick已经把导航的功能封装到了StageManager里，以前我们一般使用this.StageManager.DefaultStage.Show(xxx)的方式来使用，即可实现整个页面的导航，如果要实现页面内某个区域的导航，就需要手动指定是哪个StageManager了，这就需要使用以下属性来标识某个区域：
mvvm : StageManager.Beacon ="frameMain"
找到OnBindedViewLoad方法，取消默认的注释，将该方法改为以下的样子：
protected override async Task OnBindedViewLoad(MVVMSidekick.Views. IView view)
{
await base .OnBindedViewLoad(view);
await StageManager[ "frameMain" ].Show( new HomePage_Model ());
}
这里要注意，一定要等Bind完成后再Show，不然会显示不出来哦，因为要将整个页面Bind完后，才可以进行后续的动作。
跑一下看看：
很好，默认转到HomePage页了。
五、实现其他页面导航
现在可以处理菜单部分的导航了，点击不同的项导航到不同的页面。看到这里应该也有个大概了，处理不同项的点击事件，将名为frameMain的StageManager使用Show方法展示不同的ViewModel即可。
使用ItemClick事件吗？No，还记得我之前提过的SendToEventRouterAction吗？如果不熟悉的话就翻翻我之前的blog吧，这里我还是用这个Action来实现。
修改项模板为：
< DataTemplate x : Key ="NavMenuItemTemplate" >
< Grid >
< Interactivity : Interaction.Behaviors >
< Core : EventTriggerBehavior EventName ="Tapped">
< Behaviors : SendToEventRouterAction IsEventFiringToAllBaseClassesChannels ="True" EventRoutingName ="NavToPage" EventData ="{ Binding }" />
</ Core : EventTriggerBehavior >
</ Interactivity : Interaction.Behaviors >
< Grid.ColumnDefinitions >
< ColumnDefinition MinWidth ="48" />
< ColumnDefinition />
</ Grid.ColumnDefinitions >
< FontIcon x : Name ="Glyph" FontFamily ="{ StaticResource FontAwesomeFontFamily }" FontSize ="16" Margin ="0" Glyph ="{ Binding Glyph }" VerticalAlignment ="Center" HorizontalAlignment ="Center" ToolTipService.ToolTip ="{ Binding Label }"/>
< TextBlock x : Name ="Text" Grid.Column ="1" Text ="{ Binding Label }" VerticalAlignment ="Center"/>
</ Grid >
</ DataTemplate >
然后在MainPage_Model.cs文件中，添加一个方法：
private void RegisterCommand()
{
// 一般列表项点击事件
MVVMSidekick.EventRouting. EventRouter .Instance.GetEventChannel< Object >()
.Where(x => x.EventName == "NavToPage" )
.Subscribe(
async e =>
{
NavMenuItem item = e.EventData as NavMenuItem ;
if (item != null )
{
switch (item.Label)
{
case " 首页 " :
await StageManager[ "frameMain" ].Show( new HomePage_Model ());
break ;
case " 搜索 " :
await StageManager[ "frameMain" ].Show( new SearchPage_Model ());
break ;
case " 关于 " :
await StageManager[ "frameMain" ].Show( new AboutPage_Model ());
break ;
default :
break ;
}
}
}
).DisposeWith( this );
}
别忘了在OnBindedViewLoad方法里调用一下：
private bool isLoaded;
/// <summary>
/// This will be invoked by view when the view fires Load event and this viewmodel instance is already in view's ViewModel property
/// </summary>
/// <param name=" view "> View that firing Load event </param>
/// <returns> Task awaiter </returns>
protected override async Task OnBindedViewLoad(MVVMSidekick.Views. IView view)
{
if (!isLoaded)
{
this .RegisterCommand();
this .isLoaded = true ;
}
await base .OnBindedViewLoad(view);
await StageManager[ "frameMain" ].Show( new HomePage_Model ());
}
添加一个isLoaded属性是避免重复调用。
跑一下看看，咦，有时候好用，有时候不好用，点击图标和文字的时候好用，点击不到图标和文字就不好用，这是什么原因？
熟悉ListView的同学可能会想到，ListViewItem默认是没有横向撑满的，所以虽然点击了项，但因为项模板里的Grid没有横向撑满，所以并没有触发Grid的Tapped事件，那我们可以设置ListItemStyle，让ListViewItem都横向撑满。在NavMenuItemContainerStyle里添加以下代码：
< Setter Property ="HorizontalContentAlignment" Value ="Stretch"/>
< Setter Property ="VerticalContentAlignment" Value ="Stretch"/>
这样就可以横向纵向撑满了，再跑下：
又乱套了，再改哪里呢，修改项模板 NavMenuItemTemplate ，设置左侧列宽为Auto：
< DataTemplate x : Key ="NavMenuItemTemplate" >
< Grid >
< Interactivity : Interaction.Behaviors >
< Core : EventTriggerBehavior EventName ="Tapped">
< Behaviors : SendToEventRouterAction IsEventFiringToAllBaseClassesChannels ="True" EventRoutingName ="NavToPage" EventData ="{ Binding }" />
</ Core : EventTriggerBehavior >
</ Interactivity : Interaction.Behaviors >
< Grid.ColumnDefinitions >
< ColumnDefinition MinWidth ="48" Width ="Auto" />
< ColumnDefinition />
</ Grid.ColumnDefinitions >
< FontIcon x : Name ="Glyph" FontFamily ="{ StaticResource FontAwesomeFontFamily }" FontSize ="16" Margin ="0" Glyph ="{ Binding Glyph }" VerticalAlignment ="Center" HorizontalAlignment ="Center" ToolTipService.ToolTip ="{ Binding Label }"/>
< TextBlock x : Name ="Text" Grid.Column ="1" Text ="{ Binding Label }" VerticalAlignment ="Center" />
</ Grid >
</ DataTemplate >
再运行一下：
现在正常了。
看一下手机上的样子：
六、其他细节调整
使用了一下感觉还是有点细节需要改进，比如菜单弹出后，点击项后应该让菜单自动缩回去，现在改一下吧。
在MainPage的vm里添加一个属性：
/// <summary>
/// 是否展开菜单
/// </summary>
public bool IsPaneOpen
{
get { return _IsPaneOpenLocator( this ).Value; }
set { _IsPaneOpenLocator( this ).SetValueAndTryNotify( value ); }
}
#region Property bool IsPaneOpen Setup
protected Property < bool > _IsPaneOpen = new Property < bool > { LocatorFunc = _IsPaneOpenLocator };
static Func < BindableBase , ValueContainer < bool >> _IsPaneOpenLocator = RegisterContainerLocator< bool >( "IsPaneOpen" , model => model.Initialize( "IsPaneOpen" , ref model._IsPaneOpen, ref _IsPaneOpenLocator, _IsPaneOpenDefaultValueFactory));
static Func < bool > _IsPaneOpenDefaultValueFactory = () => default ( bool );
#endregion
在vm的构造函数里将此值设置为false，默认为关闭。
然后将SplitView的IsPaneOpen属性绑定到上面：
< SplitView x : Name ="RootSplitView" IsPaneOpen ="{ Binding IsPaneOpen , Mode =TwoWay}"
DisplayMode ="Inline"
OpenPaneLength ="256"
IsTabStop ="False">
修改RegisterCommand方法，在点击每个项的部分，添加以下代码，关闭菜单：
this .IsPaneOpen = false ;
现在点击菜单项后可以自动关闭菜单面板了。
还可以继续针对PC版和手机版调整一下细节，PC版屏幕大，可以让菜单收起时留下图标的部分，这就需要调整PC版的DisplayMode属性为CompactInline，需要请StateTriggers出马了。
在根Grid里添加以下代码：
<!-- Adaptive triggers -->
< VisualStateManager.VisualStateGroups >
< VisualStateGroup >
< VisualState >
< VisualState.StateTriggers >
< AdaptiveTrigger MinWindowWidth ="720" />
</ VisualState.StateTriggers >
< VisualState.Setters >
< Setter Target ="RootSplitView.DisplayMode" Value ="CompactInline"/>
< Setter Target ="RootSplitView.IsPaneOpen" Value ="True"/>
< Setter Target ="RootSplitView.CompactPaneLength" Value ="48" />
</ VisualState.Setters >
</ VisualState >
< VisualState >
< VisualState.StateTriggers >
< AdaptiveTrigger MinWindowWidth ="0" />
</ VisualState.StateTriggers >
< VisualState.Setters >
< Setter Target ="RootSplitView.DisplayMode" Value ="Overlay"/>
</ VisualState.Setters >
</ VisualState >
</ VisualStateGroup >
</ VisualStateManager.VisualStateGroups >
这段代码的意思是，如果宽度大于720，就将SplitView的DisplayMode设置为CompactInline，菜单收起的时候可以保留图标部分，这部分图标的宽度通过CompactPaneLength这个值来设定。
还有一点，手机是有硬件返回键的，在菜单弹出的时候，如果用户点击了返回键，应该让菜单缩回去，所以还要额外处理一下手机的返回键。
给项目添加Mobile Extensions引用：
注意我安装了两个版本的SDK，这里需要根据项目的实际版本来选择对应的扩展。
打开MainPage.xaml.cs，添加以下代码：
protected override void OnNavigatedTo( NavigationEventArgs e)
{
if (Windows.Foundation.Metadata. ApiInformation .IsTypePresent( "Windows.Phone.UI.Input.HardwareButtons" ))
{
HardwareButtons .BackPressed += HardwareButtons_BackPressed;
}
base .OnNavigatedTo(e);
}
protected override void OnNavigatedFrom( NavigationEventArgs e)
{
if (Windows.Foundation.Metadata. ApiInformation .IsTypePresent( "Windows.Phone.UI.Input.HardwareButtons" ))
{
HardwareButtons .BackPressed -= HardwareButtons_BackPressed;
}
base .OnNavigatedFrom(e);
}
private void HardwareButtons_BackPressed( object sender, BackPressedEventArgs e)
{
//throw new NotImplementedException();
var vm = this .LayoutRoot.DataContext as MainPage_Model ;
if (vm != null )
{
if (vm.IsPaneOpen)
{
e.Handled = true ;
vm.IsPaneOpen = false ;
}
}
}
至此，一个具有基本功能的汉堡菜单就完成了，可以通过修改背景色、前景色等方式再来改善展示效果。再来总结一下主要的知识点：
- 使用SplitView来区分菜单面板和内容部分；
- 使用FontAwesomeFont字体显示图标；
- 为区域使用 mvvm : StageManager.Beacon 属性 来设置StageManager的标识，并通过 StageManager[ "xxx" ] 的 形式来调用；
- 通过StateTriggers来为PC和手机端设置不同的菜单效果；
- 通过添加Mobile Extensions引用来支持手机硬件返回键；
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
