uwp开发笔记 汉堡菜单

先画出汉堡菜单按钮或返回按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<RelativePanel>
true<Button Name="HamburgerButton"
FontFamily="Segoe MDL2 Assets"
Content="&#xE700;"
Click="HamburgerButton_Click"
FontSize="36"
Background="LightGray"
RelativePanel.AlignLeftWithPanel="True"/>
true<Button Name="Back"
Visibility="Collapsed"
FontFamily="Segoe MDL2 Assets"
Content="&#xE7EA;"
Click="Back_Click"
FontSize="36"
Background="White"
RelativePanel.RightOf="HamburgerButton"/>
</RelativePanel>

然后是菜单列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<SplitView Grid.Row="1"
Name="HamburgerMeun"
DisplayMode="CompactOverlay"
OpenPaneLength="200"
CompactPaneLength="56"
IsPaneOpen="False" >
<SplitView.Pane>
true<ListBox SelectionMode="Single"
SelectionChanged="ListBox_SelectionChanged">
truetrue<ListBoxItem Name="Financial">
truetruetrue<StackPanel Orientation="Horizontal">
truetruetruetrue<TextBlock Text="&#xE10F;"
FontFamily="Segoe MDL2 Assets"
FontSize="36"></TextBlock>
truetruetruetrue<TextBlock Text="Home"
FontSize="24"
Margin="20,0,0,0"></TextBlock>
truetruetrue</StackPanel>
truetrue</ListBoxItem>

truetrue<ListBoxItem Name="Food">
truetruetrue<StackPanel Orientation="Horizontal">
truetruetruetrue<TextBlock Text="&#xE1CE;"
FontFamily="Segoe MDL2 Assets"
FontSize="36"></TextBlock>
truetruetruetrue<TextBlock Text="Food"
FontSize="24"
Margin="20,0,0,0"></TextBlock>
truetruetrue</StackPanel>
truetrue</ListBoxItem>
true</ListBox>
</SplitView.Pane>

接下来是点击事件

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

Bob Tabord 的汉堡菜单弹出写法

第一次看到这样写按钮,很巧妙