uwp汉堡菜单的实现

---恢复内容开始---

现在uwp上面的汉堡菜单（就是那个三道杠，点击之后会出现菜单）使用的越来越普遍，比如微软自己家的Cortana。现在我使用的实现方法是使用SplitView实现。首先SplitView将整个App的界面分成两块，一块是弹出来的汉堡菜单，一块是收起汉堡菜单之后App的界面。弹出来的汉堡菜单叫做Pane，这个界面在<SplitView.Pane></SplitView.Pane>标签下面写，就和普通的页面布局一样，该用Grid就用Grid（对了，现在微软所谓的响应式布局是不是推荐使用Grid？）

<SplitView.Pane>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Button x:Name="btnSplitViewClose" Grid.Column="0" Click="btnSplitViewClose_Click">
                            <Image Source="Assets/Menu.png" Height="30" Width="30"/>
                        </Button>
                        <TextBlock Text="目录" Grid.Column="1" x:Name="PaneHeader"
                               Margin="30,12,0,0" Style="{StaticResource BaseTextBlockStyle}"/>
                    </Grid>
                    <ListView x:Name="NavLinksList" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1" VerticalAlignment="Stretch" 
                    ItemClick="NavLinksList_ItemClick" IsItemClickEnabled="True" 
                    ItemsSource="{x:Bind NavLinks}" ItemTemplate="{StaticResource NavLinkItemTemplate}"/>
                </Grid>
            </SplitView.Pane>

效果是这样的：

剩下的Span收起后的界面就是和平常写界面的一样啦，把汉堡菜单忘掉之后接着写自己的App界面就好。

这个界面的所有XAML是这样的：

                                                                        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="rootGrid">
        <SplitView
                   DisplayMode="Overlay"
                   OpenPaneLength="220"
                   x:Name="splitView">
            <SplitView.Pane>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Button x:Name="btnSplitViewClose" Grid.Column="0" Click="btnSplitViewClose_Click">
                            <Image Source="Assets/Menu.png" Height="30" Width="30"/>
                        </Button>
                        <TextBlock Text="目录" Grid.Column="1" x:Name="PaneHeader"
                               Margin="30,12,0,0" Style="{StaticResource BaseTextBlockStyle}"/>
                    </Grid>
                    <ListView x:Name="NavLinksList" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1" VerticalAlignment="Stretch" 
                    ItemClick="NavLinksList_ItemClick" IsItemClickEnabled="True" 
                    ItemsSource="{x:Bind NavLinks}" ItemTemplate="{StaticResource NavLinkItemTemplate}"/>
                    <!--<StackPanel Orientation="Horizontal"
                                Grid.Row="2" Margin="14,24,0,24">
                        <SymbolIcon Symbol="Setting"/>
                        <TextBlock Text="Settings" Margin="24,0,0,0"
                                   VerticalAlignment="Center" Tapped="TextBlock_Tapped"/>
                    </StackPanel>-->
                </Grid>
            </SplitView.Pane>

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="auto"/>
                    </Grid.ColumnDefinitions>
                  <!--你的主界面代码-->
　　　　　　　　  </SplitView>
            </Grid>
    </Grid>

private ObservableCollection<NavLink> _navLinks = new ObservableCollection<NavLink>()
        {
            new NavLink() {Label="个性化",Symbol=Symbol.People },
            new NavLink() {Label="地图",Symbol=Symbol.Map },
            new NavLink() { Label = "联系我", Symbol = Windows.UI.Xaml.Controls.Symbol.Mail },
            new NavLink() { Label = "使用帮助", Symbol = Symbol.Help  },
            new NavLink() {Label="Settings",Symbol=Symbol.Setting }
        };

        public ObservableCollection<NavLink> NavLinks
        {
            get { return _navLinks; }
        }


        private void NavLinksList_ItemClick(object sender, ItemClickEventArgs e)
        {
            switch((e.ClickedItem as NavLink).Label)
            {
                case "个性化":
                    this.Frame.Navigate(typeof(PersonalSettings));                                                                    
                    break;
                case "地图":
                    this.Frame.Navigate(typeof(Map));
                    break;
                case "联系我":
                    conTool.SendEmail("cncmn@sina.cn", "反馈", "紧急求助反馈", "");
                    break;
                case "使用帮助":
                    this.Frame.Navigate(typeof(UserGuide));
                    break;
                case "Settings":
                    this.Frame.Navigate(typeof(Settings));
                    break;
                default:
                    break;
            }
        }

附上后台响应包括ListView数据源的C#代码。

有时候大家打开这个汉堡菜单喜欢主界面上右划打开，左划关闭。实现起来也十分简单。

private void RootGrid_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            beforePoint = e.GetCurrentPoint(rootGrid);
        }

        private void RootGrid_PointerReleased(object sender, PointerRoutedEventArgs e)
        {
            afterPoint = e.GetCurrentPoint(rootGrid);
            if((beforePoint.PointerId==afterPoint.PointerId&&(afterPoint.Position.X-beforePoint.Position.X>10))||
                (beforePoint.PointerId == afterPoint.PointerId && (afterPoint.Position.Y - beforePoint.Position.Y > 10)))
            {
                splitView.IsPaneOpen = true;
            }else if(beforePoint.PointerId == afterPoint.PointerId &&
                ((afterPoint.Position.X - beforePoint.Position.X < -10)|| (afterPoint.Position.Y - beforePoint.Position.Y < -10))
                && splitView.IsPaneOpen)
            {
                splitView.IsPaneOpen = false;
            }
        }

其中，rootGrid是上面定义的一个Grid的Name，通过SplitView.IsPaneOpen的赋值是True或者False来控制汉堡菜单的开关，其中，beforePoint和afterPoint是PointerPoint的两个对象，用于存储手势开始和结束的两个点。我这里定义向下和向右都可以打开汉堡菜单。