微软信仰之路(一)——汉堡菜单

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


微软信仰之路(一)——汉堡菜单_第1张图片
汉堡菜单效果图

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

SplitView控件


做一个汉堡菜单,首先要使用SplitView控件。SplitView控件可以创建一个面板。这个面板可以显示或者隐藏,而且在切换的时候用动画效果。

SplitView分为两个部分。第一部分是可选的,也就是Pane部分;另一部分是必须的,也就是Content部分。

微软信仰之路(一)——汉堡菜单_第2张图片
SplitView的两个部分

代码的结构大致是这样:


    
        
    
    
         
    

需要注意的是,Pane和Content属性只能被设置一次。因此里面只能包含一个标签。如果要加入多个文本,则要用一个Grid或者其他包括起来。

SplitView的属性


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

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

Icon


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

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

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


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

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


微软信仰之路(一)——汉堡菜单_第3张图片
字符映射表

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


ListBox


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


     
         
             
         
     
     
         
              
              
         
     

ListBox绑定事件


我们需要在按Name为HamburgerButton的Item时,汉堡菜单隐藏或者出现。为了达到这个目的,我们必须给这个Item绑定事件。当然我们也可以用双向绑定。但是直接绑定事件会更加简单。而且学会绑定事件,也可以照猫画虎地实现其他Item的功能。
在ListBox控件里面没有直接的Click,但是我们找到一个属性: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的效果时,只需要在这个方法里面添加其他效果就行。

自适应布局


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


   
      
         
           
         
         
            
         
      
      
         
            
         
         
            
         
     
   

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

你可能感兴趣的:(微软信仰之路(一)——汉堡菜单)