UWP学习札记--制作一个简单的汉堡包菜单

在 UWP 新的设计规范中,汉堡包菜单变成了官方推荐的导航方式,但是并没有提供相应的控件,需要使用 SplitView 来模拟。

SplitView 是分屏视图,把一个视图分割为两部分,Content 属性所表示的为主要视图,而 Pane 属性设置的视图则可以隐藏,可以折叠和展开。

添加 SplitView,并加入一些内容

1
2
3
4
5
6
7
8
9
<SplitView>
<SplitView.Pane>
<StackPanel>
<TextBlock FontSize="20">first</TextBlock>
<TextBlock FontSize="20">second</TextBlock>
<TextBlock FontSize="20">third</TextBlock>
</StackPanel>
</SplitView.Pane>
</SplitView>

设置 SplitView 属性

设置名字,显示模式,调整打开时的宽度和关闭时的宽度,设置默认不打开

1
<SplitView x:Name="mySplit" DisplayMode="CompactOverlay" CompactPaneLength="0" OpenPaneLength="150" IsPaneOpen="False">

具体关于 SplitView 的见解,可以参照:【Win 10 应用开发】SplitView 控件

添加汉堡包按钮极其属性

需要添加两个按钮,一个位于 SplitView 之外,用于开启 SplitView,另一个在 SplitView 之内,用于关闭 SplitView 需要注意,汉堡包的图案其实是一个矢量字符,在一种 Segoe 字体中,操作方式很简单,将字体设置为”Segoe MDL2 Assets” 即可,其中汉堡图标为 &#xE700;,更多图标可以参考:http://modernicons.io/segoe-mdl2/cheatsheet/

1
2
3
4
//开启按钮
<Button Click="Button_Click" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" VerticalAlignment="Top" Width="50" Height="50" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
//关闭按钮
<Button Click="Button_Click" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" VerticalAlignment="Top" Width="50" Height="50" />

两个按钮的 Click 事件绑定同样的操作 Button_Click,作用是打开或关闭 SplitView

1
2
3
4
private void Button_Click(object sender, RoutedEventArgs e)
{
mySplit.IsPaneOpen = !mySplit.IsPaneOpen;
}

最后做一些外观的微调,改变颜色

这里附上全部 XAML 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<Page
x:Class="BirthClock.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BirthClock"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Click="Button_Click" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" VerticalAlignment="Top" Width="50" Height="50" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
<SplitView x:Name="mySplit" DisplayMode="CompactOverlay" CompactPaneLength="0" OpenPaneLength="150" IsPaneOpen="False">
<SplitView.Pane>
<StackPanel Background="#FF9F9F9F">
<Button Background="#FF9F9F9F" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" VerticalAlignment="Top" Width="50" Height="50" Click="Button_Click"/>
<TextBlock FontSize="20">first</TextBlock>
<TextBlock FontSize="20">second</TextBlock>
<TextBlock FontSize="20">third</TextBlock>
</StackPanel>
</SplitView.Pane>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="100">Hello!</TextBlock>
</SplitView>
</Grid>
</Page>

关于汉堡包菜单更具体的描述可以参考:Implementing an Awesome Hamburger Button with XAML’s new SplitView control in Windows 10

请鼓励我的原创文章