UWP开发，如何做出汉堡菜单

UWP新的设计规范推荐使用汉堡菜单，效果如下：

如何制作这种效果，其实很简单:

添加分屏视图SplitView

Pane属性是菜单项

为菜单项添加内容

为Spliview添加OpenPaneLength属性以调整宽度，并使菜单打开状态默认为不打开，添加x:Name属性

<SplitView OpenPaneLength="150" IsPaneOpen="False"  x:Name="mySplit">

调整前

调整后

为SplitView添加动画 DisplayMode="CompactOverlay"，把关闭时的长度设置为0 CompactPaneLength="0"

在菜单和grid分别添加按钮，使其长宽为50，呈正方形，并上对其

<Button VerticalAlignment="Top" Width="50" Height="50"></Button>

为了美观，在Grid中的按钮颜色设置为和Grid一致的颜色。

为按钮添加汉堡图案

具体方法是引用一种Segoe字体，这是种字体是矢量的，可以无限放大不会模糊，其中提供了一些图标，

汉堡图标为&#xE700;

更多图标可在http://modernicons.io/segoe-mdl2/cheatsheet/ 查询

FontFamily="Segoe MDL2 Assets" Content="&#xE700;"

为两个按钮添加click事件： Click="Button_Click"

private void Button_Click(object sender, RoutedEventArgs e)

       {

           mySplit.IsPaneOpen = !mySplit.IsPaneOpen;

     //把Split的打开状态调整为相反

       }

在SplitView添加内容并运行

完成！

全部代码如下:

xaml:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Button Click="Button_Click" FontFamily="Segoe MDL2 Assets"

Content="&#xE700;" VerticalAlignment="Top" Width="50" Height="50"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

></Button>

<SplitView x:Name="mySplit" DisplayMode="CompactOverlay" CompactPaneLength="0"

OpenPaneLength="150" IsPaneOpen="False" >

<SplitView.Pane >

<StackPanel Background="Gray">

<Button Background="Gray" Click="Button_Click" FontFamily="Segoe MDL2 Assets"

Content="&#xE700;" VerticalAlignment="Top" Width="50" Height="50"></Button>

<TextBlock FontSize="20">第一项</TextBlock>

<TextBlock FontSize="20">第二项</TextBlock>

</StackPanel>

</SplitView.Pane>

<TextBlock HorizontalAlignment="Center"

VerticalAlignment="Center" FontSize="100">HELLO!</TextBlock>

</SplitView>

</Grid>

cs:

private void Button_Click(object sender, RoutedEventArgs e)

       {

           mySplit.IsPaneOpen = !mySplit.IsPaneOpen;

       }