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字体,这是种字体是矢量的,可以无限放大不会模糊,其中提供了一些图标,

汉堡图标为

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


FontFamily="Segoe MDL2 Assets" Content=""


为两个按钮添加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="" 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="" 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;

       }


你可能感兴趣的:(uwp)