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