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

发表于 分类于 ， 阅读次数： 本文字数： 3.4k 阅读时长 ≈ 3 分钟

在 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

相关文章