6. 一个简单可用的“汉堡包”应用

首先看目标：

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

1. 界面布局

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

<Grid.RowDefinitions>
     <RowDefinition Height="Auto"/>
     <RowDefinition/>
</Grid.RowDefinitions>

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

<RelativePanel Grid.Row="0">
    <Button Name="togglePaneButton"
            FontFamily="Segoe MDL2 Assets" FontSize="30"
            Content="&#xE700;"
            Click="togglePaneButton_Click"/>
    <Button Name="backButton"
            RelativePanel.RightOf="togglePaneButton"
            FontFamily="Segoe MDL2 Assets" FontSize="30"
            Visibility="Collapsed"
            Content="&#xE0A6;"
            Click="backButton_Click"/>
    <TextBlock Name="titleTextBlock"
               RelativePanel.RightOf="backButton"
               FontSize="30"/>
    <Button Name="searchButton"
            RelativePanel.AlignRightWithPanel="True"
            FontFamily="Segoe MDL2 Assets" FontSize="30"
            Content="&#xE11A;"/>
    <TextBox Name="searchKeyTextBox"
             RelativePanel.LeftOf="searchButton"
             FontSize="20"
             Height="{Binding ActualHeight,ElementName=searchButton}" Width="200"
             PlaceholderText="Search"/>
</RelativePanel>

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

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

<SplitView Name="splitView" Grid.Row="1"
           CompactPaneLength="{Binding ActualWidth,ElementName=togglePaneButton}"
           DisplayMode="CompactOverlay">
    <SplitView.Pane>
        <ListBox Name="listBox" SelectionChanged="listBox_SelectionChanged">
            <ListBoxItem Tag="Financial" IsSelected="True">
                <StackPanel Orientation="Horizontal">
                    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="30"
                               VerticalAlignment="Center"
                               Text="&#xE128;"/>
                    <TextBlock FontSize="30"
                               Margin="10,0,0,0"
                               Text="Financial"/>
                </StackPanel>
            </ListBoxItem>
            <ListBoxItem Tag="Food">
                <StackPanel Orientation="Horizontal">
                    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="30"
                               VerticalAlignment="Center"
                               Text="&#xE006;"/>
                    <TextBlock FontSize="30"
                               Margin="10,0,0,0"
                               Text="Food"/>
                </StackPanel>
            </ListBoxItem>
        </ListBox>
    </SplitView.Pane>
    <SplitView.Content>
        <Frame Name="contentFrame"/>
    </SplitView.Content>
</SplitView>

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

2. 新增导航页面

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

<Image Source="/Assets/Financial.png"/>

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 的事件。

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

---

原视频链接：

UWP24