Win10 UWP 開發系列：使用SplitView實現漢堡菜單及頁面內導航

本文轉載自查看原文 2015-12-10 10:45 5494 UWP

在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>