10分钟制作UWP汉堡菜单

什么是汉堡菜单？

汉堡菜单，指的是一个可以弹出和收回的侧边栏。在UWP和Android应用中，汉堡菜单都非常常见。

首先我们列出所有需要掌握的前置知识：

1，SplitView

2，StackPanel

3，ListBox

3，TextBlock

4，RelativePanel

6，Button

7，Grid

==============================

首先，我们来分割主页面，将其分为两块。

1 <Grid.RowDefinitions>
2     <RowDefinition Height="Auto" />
3     <RowDefinition Height="*" />
4 </Grid.RowDefinitions>

之后，用RelativePanel将按钮固定在第一块的左边。Segoe MDL2 Assets是一款Windows 10内置的字体，E700是汉堡菜单的“三”字图标。

1 <RelativePanel>
2     <Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" FontSize="36" Click="HamburgerButton_Click" />
3 </RelativePanel>

我们先定义SplitView，再将Button的点击事件改成控制菜单的开合。

 1  <SplitView Name="MySplitView"
 2             Grid.Row="1"
 3             DisplayMode="CompactOverlay"
 4             OpenPaneLength="200"
 5             CompactPaneLength="56"
 6             HorizontalAlignment="Left">
 7     <SplitView.Pane>
 8         <!--这里写菜单内的东西-->
 9     </SplitView.Pane>
10     <SplitView.Content>
11         <!--这里写菜单外的东西-->
12     </SplitView.Content>
13 </SplitView>

注意，这里SplitView的各个属性：

　　DisplayMode指弹出和收回的方式，有四种，效果各不一样。

　　OpenPaneLength和CompactPaneLength分别指弹出菜单长度和收回菜单长度。

然后设置按钮事件。

private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}

之后，设置菜单里的选项。

 1 <ListBox SelectionMode="Single"
 2          Name="IconsListBox"
 3          SelectionChanged="IconsListBox_SelectionChanged">
 4     <ListBoxItem Name="ShareListBoxItem">
 5         <StackPanel Orientation="Horizontal">
 6             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="" />
 7             <TextBlock Text="Share" FontSize="24" Margin="20,0,0,0" />
 8         </StackPanel>
 9     </ListBoxItem>
10
11     <ListBoxItem Name="FavoritesListBoxItem">
12         <StackPanel Orientation="Horizontal">
13             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="" />
14             <TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0" />
15         </StackPanel>
16     </ListBoxItem>17 </ListBox>

我将ListBox的选择模式设为Single，代表单选，同时设置一个事件。

我将每一个ListBoxItem设为一个StackPanel，横向堆叠了图标和文字，同时进行了微调。

接下来设置选择事件。

1 private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
2     {
3     if (ShareListBoxItem.IsSelected) {}
4     else if (FavoritesListBoxItem.IsSelected) {}
5     }

一个简单的汉堡菜单设置完成。

接下来贴出完整XAML代码。

 1 <Page
 2     x:Class="HamburgerExample.MainPage"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:HamburgerExample"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d">
 9
10     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
11         <Grid.RowDefinitions>
12             <RowDefinition Height="Auto" />
13             <RowDefinition Height="*" />
14         </Grid.RowDefinitions>
15         <RelativePanel>
16             <Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" FontSize="36" Click="HamburgerButton_Click" />
17         </RelativePanel>
18         <SplitView Name="MySplitView"
19                    Grid.Row="1"
20                    DisplayMode="CompactOverlay"
21                    OpenPaneLength="200"
22                    CompactPaneLength="56"
23                    HorizontalAlignment="Left">
24             <SplitView.Pane>
25                 <ListBox SelectionMode="Single"
26                          Name="IconsListBox"
27                          SelectionChanged="IconsListBox_SelectionChanged">
28                     <ListBoxItem Name="ShareListBoxItem">
29                         <StackPanel Orientation="Horizontal">
30                             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="" />
31                             <TextBlock Text="Share" FontSize="24" Margin="20,0,0,0" />
32                         </StackPanel>
33                     </ListBoxItem>
34
35                     <ListBoxItem Name="FavoritesListBoxItem">
36                         <StackPanel Orientation="Horizontal">
37                             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="" />
38                             <TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0" />
39                         </StackPanel>
40                     </ListBoxItem>
41
42                 </ListBox>
43             </SplitView.Pane>
44             <SplitView.Content>
45                 <TextBlock Name="ResultTextBlock" />
46             </SplitView.Content>
47         </SplitView>
48
49     </Grid>
50 </Page>

转载于:https://www.cnblogs.com/ldzhangyx/p/5998899.html

10分钟制作UWP汉堡菜单相关推荐

收藏这套模板，你也能10分钟制作一张数据地图！
前几天在知乎上看了一个问题: 怎么在Excel上做数据地图? 参照着热门回答,尝试了用VBA以及插件做数据地图,发现过程还是比较复杂: 首先我还是要掌握一些基础代码才能做,VBA我是靠着百度现学现卖, ...
《教你10分钟制作3D网游》视频吐槽
源自GAMERES社区的MGE引擎(也即神秘游戏引擎),近期曝光了第一份制作游戏的带演示视频,透过视频我们发现,这不仅是一份演示或教程,更是一个略带心酸的故事. 视频刚开始,在悲伤的气氛下介绍了作者从 ...
拉易网10分钟制作图文并茂邮件的高级技巧
有想做精美HTML邮件格式的小伙伴可以来围观. 这里介绍国内一款制作图文并茂邮件格式的拉易网应用. 技巧操作 1.复制可以支持组件复制,容器复制和子容器复制.直接在容器或子容器中复制,会自动增加一列 ...
mysql主从表单如何设计_如何快速的10分钟制作一张主从表单及功能
//#region 奖励管理--主单列表//奖励管理--主单列表--页面加载 function Reward_MainList_Init() { func_InitPageDataSource(); ...
UWP 制作汉堡菜单及添加滑动手势
1.汉堡菜单界面: <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">< ...
UWP开发入门（十九）——10分钟学会在VS2015中使用Git
原文:UWP开发入门(十九)--10分钟学会在VS2015中使用Git 写程序必然需要版本控制,哪怕是个人项目也是必须的.我们在开发UWP APP的时候,VS2015默认提供了对微软TFS和Git的支 ...
大屏监控系统实战（13）-10分钟投票增量曲线制作（二）
因为内容太多,所以我们分成了两部分,接前文大屏监控系统实战(11)-10分钟投票增量曲线制作(一) 八.投票网站最近72小时10分钟投票走势和增量数据爬取在SchedulingTest中添加方法如 ...
python三级联动菜单_2分钟制作智能式联动下拉菜单，轻松搞定重复内容，录入不出错...
在日常工作中,对于重复性录入的内容,如员工姓名,固定的产品型号等.你是不是还在一个个手动输入? 2分钟制作一个联动下拉菜单,不仅可以减少录入的错误率,还可以大大减少工作量,我们一起来学习一下吧~ 制作 ...
python制作一个菜单_用CSS打造一个图形化的汉堡菜单
Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. 最近,我发现Vitaly Rubstov写的运球投篮特效十分了不起,我简直遏制不住想要亲自用代码实现这个功 ...

10分钟制作UWP汉堡菜单

10分钟制作UWP汉堡菜单相关推荐

最新文章

热门文章