UWP漢堡菜單

在ＵＷＰ中引入了漢堡菜單，我們先看下效果圖

菜單項

    public class MenuItem
    {
        public Symbol Icon { get; set; }
        public string Text { get; set; }
    }

XAML

<Page.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="MenuItemDataTemplate">
                <StackPanel Orientation="Horizontal">
                    <SymbolIcon Symbol="{Binding Icon}" />
                    <TextBlock Text="{Binding Text}" Margin="18" />
                </StackPanel>
            </DataTemplate>
        </ResourceDictionary>
    </Page.Resources>
    <Grid x:Name="rootGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <SplitView x:Name="mainSplitView" OpenPaneLength="150" CompactPaneLength="45" PaneBackground="LightGray" DisplayMode="CompactOverlay">
            <SplitView.Pane>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <StackPanel Orientation="Horizontal">
                        <Button x:Name="hanburgButton" FontFamily="Segoe MDL2 Assets" Content="" FontSize="24" Click="hanburgButton_Click" />
                        <TextBlock Margin="10,0,0,0" VerticalAlignment="Center" FontSize="18" Text="漢堡菜單"/>
                    </StackPanel>
                    <ListView Grid.Row="1" x:Name="mainListView" ItemsSource="{Binding menuItems}" ItemTemplate="{StaticResource MenuItemDataTemplate}" />
                </Grid>
            </SplitView.Pane>
            <Frame x:Name="splitVewFrame" Margin="0,10" />
        </SplitView>
    </Grid>

添加菜單項數據源

   ObservableCollection<MenuItem> menuItems = new ObservableCollection<MenuItem>()
        {
            new MenuItem() { Icon=Symbol.People,Text="People"},
             new MenuItem() { Icon=Symbol.Phone,Text="Phone"},
              new MenuItem() { Icon=Symbol.Message,Text="Message"},
               new MenuItem() { Icon=Symbol.Mail,Text="Mail"}
        };
            mainListView.ItemsSource = menuItems;

漢堡按鈕切換SplitView收起摺疊狀態

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

SplitView常用屬性

• CompactPaneLength
  設置SplitView收起的長度
• OpenPaneLength
  設置SplitView打開的長度
• DisplayMode
  Overlay：窗格打開時會覆蓋內容，且不會占據控制項佈局中的空間。
  Inline： 窗格及內容是並行顯示的，並占據控制項佈局中的空間。
  CompactOverlay：定義的窗格數量及內容是並行顯示的，並占據控制項佈局中的空間。窗格的其餘部分打開時會覆蓋內容，且不會占據控制項佈局中的空間。
  CompactInline：定義的窗格數量及內容是並行顯示的，並占據控制項佈局中的空間.窗格的其餘部分打開時會將內容推到側邊，且會占據控制項佈局中的空間.

參考msdn