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

                (beforePoint.PointerId == afterPoint.PointerId && (afterPoint.Position.Y - beforePoint.Position.Y > )))

            {

                splitView.IsPaneOpen = true;

            }else if(beforePoint.PointerId == afterPoint.PointerId &&

                ((afterPoint.Position.X - beforePoint.Position.X < -)|| (afterPoint.Position.Y - beforePoint.Position.Y < -))

                && splitView.IsPaneOpen)

            {

                splitView.IsPaneOpen = false;

            }

        }

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

巴特西

uwp汉堡菜单的实现

最新文章

热门文章