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("[email protected]", "反馈", "紧急求助反馈", "");
                    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的两个对象,用于存储手势开始和结束的两个点。我这里定义向下和向右都可以打开汉堡菜单。

时间: 2024-10-13 22:15:56

uwp汉堡菜单的实现的相关文章

10分钟制作UWP汉堡菜单

什么是汉堡菜单? 汉堡菜单,指的是一个可以弹出和收回的侧边栏.在UWP和Android应用中,汉堡菜单都非常常见. 首先我们列出所有需要掌握的前置知识: 1,SplitView 2,StackPanel 3,ListBox 3,TextBlock 4,RelativePanel 6,Button 7,Grid ============================== 首先,我们来分割主页面,将其分为两块. 1 <Grid.RowDefinitions> 2 <RowDefinitio

张高兴的 Xamarin.Forms 开发笔记:为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

所谓 UWP 样式的汉堡菜单,我曾在"张高兴的 UWP 开发笔记:汉堡菜单进阶"里说过,也就是使用 Segoe MDL2 Assets 字体作为左侧 Icon,并且左侧使用填充颜色的矩形用来表示 ListView 的选中.如下图 但怎样通过 Xamarin.Forms ,将这一样式的汉堡菜单带入到 Android 与 iOS 中呢? 一.大纲-细节模式简介 讲代码前首先来说说这种导航模式,官方称"大纲-细节模式"(MasterDetail).左侧的汉堡菜单称为&qu

Win10 UWP 开发系列:使用SplitView实现汉堡菜单及页面内导航

在Win10之前,WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式,可以左右切换,非常方便.全景视图因为对设计要求比较高,自己总是做不出好的效果.对于一般的新闻阅读类App来说,Pivot更适合多个频道的展示,因为内容基本都是一样的. 到了Win10,微软模仿其他平台也推出了汉堡菜单,但并没有提供现成的控件,而是需要开发者通过一个名为SplitView的控件来实现.我个人并不觉得左上角的菜单有多么方便,汉堡菜单的使用必然会改变以前的导航模式,比如以前底部的AppBa

张高兴的 UWP 开发笔记:汉堡菜单进阶

不同于Windows 8应用,Windows 10引入了"汉堡菜单"这一导航模式.说具体点,就拿官方的天气应用来说,左上角三条横杠的图标外加一个SplitView控件组成的这一导航模式就叫"汉堡菜单". 本文讨论的是如何实现官方的这一样式(点击后左侧出现一个填充矩形),普通实现网上到处都是,有需要的朋友自己百度下吧. 下面将介绍两种不同的实现方法,第一种最简单的方法是直接使用 Template 10 模板,第二种就是纯手写了. 若有什么不正确的地方望指正,大家共同讨

UWP 圆形菜单

用过Surface dial的童鞋们都很熟悉,当使用Dial的时候,那个圆形菜单很漂亮,那么我们在普通的uwp中是否也可以实现吗? 答案是肯定的. 其实这是来源于GayHub的一个开源项目,做的很不错. https://github.com/CatalystCode/radial-menu 下面就一步一步来操作演示下: 1.新建一个项目,打开Nuget,搜索"RadialMenuControl" 安装最新的即可,或者使用命令行 PM> Install-Package Radial

UWP开发入门(一)——SplitView

接下来会写一个UWP(Universal Windows Platform)开发入门的系列,自己学习到哪里,有什么心得总结,就会写到哪里.本篇对适用于顶层导航的SplitView控件展开讨论. 首先SplitView是Win10 UWP新增的控件,以前虽然可以通过DockPanel模拟出类似的效果,但又哪里及得上M$原生支持的SplitView快捷方便呢. 至于为什么说SplitView适合顶层导航,可以参考目前尚为数不多的UWP APP,比如微博.QQ和网易等Win10 APP,基本都是通过S

Win10 UWP系列:关于错误 0x80073CF9及一个小bug的解决

原文:Win10 UWP系列:关于错误 0x80073CF9及一个小bug的解决 最近一直在开发XX的uwp版本,也是边摸索边做,最近遇到几个比较奇怪的问题,记录于此. 1.项目可用部署到PC,但无法部署到手机,提示以下错误: 错误 : DEP0001 : 意外错误: Install failed. Please contact your software vendor. (Exception from HRESULT: 0x80073CF9 为了方便开发,我将常用的类库引用好.默认的几个页面做

Win10 UWP开发系列——开源控件库:UWPCommunityToolkit

原文:Win10 UWP开发系列--开源控件库:UWPCommunityToolkit 在开发应用的过程中,不可避免的会使用第三方类库.之前用过一个WinRTXamlToolkit.UWP,现在微软官方发布了一个新的开源控件库—— UWPCommunityToolkit 项目代码托管在Github上:https://github.com/Microsoft/UWPCommunityToolkit 包括以下几个类库: 都可以很方便的从Nuget上安装. NuGet Package Name des

【UWP通用应用开发】控件、应用栏

控件的属性.事件与样式资源 怎样加入控件 加入控件的方式有多种,大家更喜欢以下哪一种呢? 1)使用诸如Blend for Visual Studio或Microsoft Visual Studio XAML设计器的设计工具. 2)在Visual Studio XAML编辑器中将控件加入到XAML代码中. 3)在代码中加入控件. 注意:当应用执行时会看到你在代码中加入的控件,但在 Visual Studio XAML 设计器中看不到. 前面我们通过在工具箱拖住控件以及直接在写XAML代码来设置控件