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

weixin_34054866發表於2015-12-10

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