E700是汉堡菜单的,汉堡菜单

汉堡菜单,E700是汉堡菜单的,汉堡菜单,E700是汉堡菜单的,汉堡菜单,E700是汉堡菜单的,汉堡菜单效果图,那么这个是怎么做出来的呢,我这里介绍的手势滑动场景是在拥有以ListView等控件为主的界面中,无论大大小小的APP都需要拥有手势滑动功能

图片 4

10分钟制作UWP汉堡菜单,uwp汉堡菜单

什么是汉堡菜单?

汉堡菜单,指的是一个可以弹出和收回的侧边栏。在UWP和Android应用中,汉堡菜单都非常常见。

图片 1图片 2

 

首先我们列出所有需要掌握的前置知识:

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="&#xE700;" 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="&#xE72D;" />
 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="&#xE734;" />
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="&#xE700;" 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="&#xE72D;" />
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="&#xE734;" />
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>

 

什么是汉堡菜单?
汉堡菜单,指的是一个可以弹出和收回的侧边栏。在UWP和Android应用中,汉堡菜单都…

一个简单的汉堡菜单设置完成。

1 private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
2     {
3     if (ShareListBoxItem.IsSelected) {}
4     else if (FavoritesListBoxItem.IsSelected) {}
5     }

图片 3

2.编写后台cs代码

private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
    MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}
1 <Grid.RowDefinitions>
2     <RowDefinition Height="Auto" />
3     <RowDefinition Height="*" />
4 </Grid.RowDefinitions>

那么这个是怎么做出来的呢?

首先在移动APP开发中,手势滑动已经成为一个必备的技能,无论大大小小的APP都需要拥有手势滑动功能。在Android和iOS操作系统的APP中,手势滑动比较普及。然而由于国内有关UWP应用的教程比较少,所以新的开发者在这一块可能达不到其他两个平台的能力和标准。所以今天本人在这里给大家介绍一种手势滑动的方法,希望和大家交流交流。

汉堡菜单,指的是一个可以弹出和收回的侧边栏。在UWP和Android应用中,汉堡菜单都非常常见。

==============================

在布局中,我们经常会看到汉堡菜单。它大概是这个样子的:

        double x = 0;//用来接收手势水平滑动的长度

        public TravelListsPage()
        {
            this.InitializeComponent();
            ManipulationCompleted += The_ManipulationCompleted;//订阅手势滑动结束后的事件
            ManipulationDelta += The_ManipulationDelta;//订阅手势滑动事件
        }

        private void The_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)//手势滑动中
        {
            x += e.Delta.Translation.X;//将滑动的值赋给x
        }

        private void The_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)//手势滑动结束
        {
            if (x > 200)//判断滑动的距离是否符合条件
            {
                splitview.IsPaneOpen = true;//打开汉堡菜单
            }
        }

首先我们列出所有需要掌握的前置知识:

注意,这里SplitView的各个属性:

自适应布局


最后,我们加入自适应布局。使得在窗口比较窄的时候,菜单隐藏,窗口比较宽的时候显示出来。这个比较简单,只需要在Setter里面设置IsPaneOpen即可。代码如下:

<VisualStateManager.VisualStateGroups>
   <VisualStateGroup x:Name="VisualStateGroup">
      <VisualState x:Name="VisualStateMin0">
         <VisualState.Setters>
           <Setter Target="RootSplitView.IsPaneOpen" Value="False" />
         </VisualState.Setters>
         <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="1"/>
         </VisualState.StateTriggers>
      </VisualState>
      <VisualState x:Name="VisualStateMin800">
         <VisualState.Setters>
            <Setter Target="RootSplitView.IsPaneOpen" Value="True" />
         </VisualState.Setters>
         <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="800"/>
         </VisualState.StateTriggers>
     </VisualState>
   </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

自此,一个“乞丐版”的汉堡菜单就完成了。

        <DataTemplate x:Key="News_Without_Photo">
            <RelativePanel Padding="5,10,5,10" ManipulationMode="System,TranslateX">
                <TextBlock x:Name="news_title" Text="{Binding title}" TextWrapping="Wrap" TextTrimming="WordEllipsis" FontSize="17" FontWeight="Bold" RelativePanel.AlignTopWithPanel="True"></TextBlock>
            </RelativePanel>
        </DataTemplate>

6,Button

之后,设置菜单里的选项。

ListBox


ListBox由很多个ListBoxItem组成。每一个Item可以有自己的定义。于是我们定义多个简单的,只包含图标和文本的Item就行了。这里我们写了两个ListBoxItem。一个是未来我们要写点击收缩的部分,另一个是“首页”。分别用了两种不同的Icon。

<ListBox>
     <ListBoxItem Name="HamburgerButton" Margin="0,5,0,5">
         <StackPanel Orientation="Horizontal" >
             <FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""/>
         </StackPanel>
     </ListBoxItem>
     <ListBoxItem Margin="0,5,0,5">
         <StackPanel Orientation="Horizontal" >
              <SymbolIcon Symbol="Emoji2" />
              <TextBlock Text="首页" Margin="24,0,0,0" VerticalAlignment="Center" />
         </StackPanel>
     </ListBoxItem>
</ListBox>

注意:这里有一个重要内容。因为ListView本身自带滑动模式,要是直接添加我们自己的滑动手势会被ListView屏蔽掉。所以在这个地方,我在DataTemplate中放一个最外层的RelativePanel,或者你用相似的布局控件也可以。在这个地方,ManipulationMode属性设置成“System,TranslateX”。这样子就解决了这个问题。

我将每一个ListBoxItem设为一个StackPanel,横向堆叠了图标和文字,同时进行了微调。

 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="&#xE72D;" />
 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="&#xE734;" />
14             <TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0" />
15         </StackPanel>
16     </ListBoxItem>
17 </ListBox>

SplitView的属性


SplitView包含几个特殊的属性。利用这些属性,我们就可以做出汉堡菜单的效果来。
首先是IsPaneOpen。这个值表现Pane是显示还是隐藏,而且默认是隐藏的。
其次是DisplayMode。DisplayMode有四种形式。

  • inline
  • overlay
  • CompactInline
  • CompactOverlay
    前面加不加Compact的区别在于是否不完全隐藏。加上Compact就会显示出一部分。例如有很多汉堡菜单会显示一个图标。inline属性在显示的时候,会将Content的内容推开,而overlay属性则会将Content的内容覆盖。
    如果加上了Compact,则需要CompactPaneLength属性来设置显示的多少。默认是48px。而还有OpenPaneLength属性,表示显示出来的时候,占多少个像素。当然还有其他的属性,例如可以通过BackGround去设置Content的背景颜色。

如果大家有什么好的想法或是觉得我的思路有所不足,欢迎评论,谢谢。

  OpenPaneLength和CompactPaneLength分别指弹出菜单长度和收回菜单长度。

2,StackPanel

ListBox绑定事件


我们需要在按Name为HamburgerButton的Item时,汉堡菜单隐藏或者出现。为了达到这个目的,我们必须给这个Item绑定事件。当然我们也可以用双向绑定。但是直接绑定事件会更加简单。而且学会绑定事件,也可以照猫画虎地实现其他Item的功能。
在ListBox控件里面没有直接的Click,但是我们找到一个属性:SelectionChanged。当有东西被选中的时候,就调用其绑定的方法。于是我们在代码里面加入了这个属性。

<ListBox SelectionMode="Single" SelectionChanged="ListBox_SelectionChanged">

接着我们在cs文件里面实现这个方法。

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)  {
   if (HamburgerButton.IsSelected) {
      RootSplitView.IsPaneOpen = !RootSplitView.IsPaneOpen;
      HamburgerButton.IsSelected = false;
   }
}

当调用这个方法的时候,我们先判断是哪个Item被选中了。在这里,我们是直接判断HamburgerButton是否被选中。当HamburButton被选中时,我们将IsPaneOpen取反(先设置SplitView的Name,这里为RootSplitView)。接着,由于我们要再次按Item的时候,菜单重新出现,所有我们要保证原来的保持没有被选中的状态,即HamburgerButton.IsSelected
= false。
未来,我们需要实现点击其他Item的效果时,只需要在这个方法里面添加其他效果就行。

我这里介绍的手势滑动场景是在拥有以ListView等控件为主的界面中,通过手势滑动来展开汉堡菜单。有关ListView和SplitView的相关内容就不在这里一一介绍了。下面是功能的实现过程:

接下来贴出完整XAML代码。

6,Button

Icon


我们要做一个简易版的汉堡菜单。这个汉堡菜单在隐藏的时候,显示图标,而显示的时候显示出图标和文字。为了达到这个目的,我们先了解了解UWP中的Icon控件。
Icon有几种方式,分别是:

  • 符号图标SymbolIcon:这是基于Segoe UI Symbol字体的预定义好的符号列表
  • 字体图标FontIcon:可以使用字体来显示图标
  • 位图图标BitmapIcon:使用位图的图标,缺点是不是矢量的,有可能失真
  • 路径图标PathIcon:基于Path的图标
  • 自定义图标

在这里我们只需要SymbolIcon和FontIcon就足够了。
SymbolIcon最为简单。只需要在里面设置自带的Icon就足够了。
代码如下:

<SymbolIcon Symbol="Switch" />

Symbol可以直接在编辑器中选择。微软的官网也有一览表,方便查看。
https://msdn.microsoft.com/zh-cn/library/windows/apps/windows.ui.xaml.controls.symbol.aspx

FontIcon本质上是字体。我们在寻找合适的字符图标的时候,可以先唤出Cortana,帮助我们找到字符映射表。再从字符映射表中选取合适的图标。

图片 4

字符映射表

如图找到了空心雪人的图标。于是我们的代码如下:

<FontIcon FontFamily="Segoe UI Emoji" Glyph="$#x26c7;" />

在这里,我们通过订阅了事件ManipulationDelta和事件ManipulationCompleted的事件处理方法来完成手势滑动展开汉堡菜单。基本的实现过程很简单。首先在类中定义一个字段x,这个字段用来接收指针或手指在屏幕上的位移量。然后当手势滑动开始时,The_ManipulationDelta方法将位移量不断赋值给x。在手势滑动结束之后,The_ManipulationCompleted方法进行滑动过程的分析判断。当判断当前的手势操作可以打开汉堡菜单时,SplitView的IsPaneOpen属性为true。至此,整个手势滑动展开汉堡菜单的过程结束。