什麼是漢堡菜單? 漢堡菜單,指的是一個可以彈出和收回的側邊欄。在UWP和Android應用中,漢堡菜單都非常常見。 首先我們列出所有需要掌握的前置知識: 1,SplitView 2,StackPanel 3,ListBox 3,TextBlock 4,RelativePanel 6,Button 7 ...
什麼是漢堡菜單?
漢堡菜單,指的是一個可以彈出和收回的側邊欄。在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>