首先看目标：

我们要做一个类似上图的应用，通过左侧的“汉堡包”导航可以切换右边的内容（只是图片而已），同时更新顶部的标题，以及当切换到Food内容时出现返回按钮，而顶部右边的搜索是没有作用的。

1. 界面布局

　　首先可以看到，应用主要分为两部分，分别是标题栏和内容栏，所以我们用 Grid 作为主体，Row 将他们分开：

顶部标题栏因为有控件分别位于两侧，所以我们可以用到 RelativePanel：

　　这里有三点值得注意，一是控件使用了 RelativePanel 的定位属性，比如 AlignRightWithPanel，RightOf 等；二是 Segoe MDL2 Assets 字体的使用，可以通过系统自带的“字符映射表”查找使用；三是使用了数据绑定，如 searchKeyTextBox 的 Height 属性我将它绑定成了 searchButton 的 ActualHeight 上，这样就能保证文本框的高度和右边按钮的高度一致了。

底部的“汉堡包”导航则使用了 SplitView：

　　SplitView.Pane 是指左边可弹出的窗口，SplitView.Content 则是右边的主体内容。其中 CompactPaneLength 是指 Pane 缩起来时的宽度，同样的，这里使用了数据绑定使得它和顶部的按钮宽度一致；DisplayMode 是设置 Pane 的展示形式，大家可以逐一试试。

2. 新增导航页面

　　新增两个导航页面，页面内只是一张图片，如：

3. 处理事件

　　当我们点击导航的 ListBox 时，需要将右边的 Frame 导航至对应的页面：

if (contentFrame != null){    string tag = (e.AddedItems.FirstOrDefault() as ListBoxItem).Tag.ToString();    switch (tag)    {        case "Financial":            contentFrame.GoBack();            backButton.Visibility = Visibility.Collapsed;            break;        case "Food":            contentFrame.Navigate(typeof(FoodPage));            backButton.Visibility = Visibility.Visible;            break;    }    titleTextBlock.Text = tag;}

 　　可看出，当我们点击不同 ListBoxItem 时，根据它的 Tag 属性进行判断跳转，同时更新返回按钮的可见性和标题的内容。

　　返回返回按钮的事件则是：

listBox.SelectedIndex = 0;

 　　因为我们手动将 ListBox 的选中项改为第一个，所以会触发 SelectionChange 的事件。

　　至此，一个简单可用的“汉堡包”导航应用就完成了，与视频的解决办法有点不一样。

---

原视频链接：