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("[e-mail]", "反饋", "緊急求助反饋", "");
                    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的兩個對象，用於存儲手勢開始和結束的兩個點。我這里定義向下和向右都可以打開漢堡菜單。