uwp AppBar

应用栏布局

Windows上的modern应用我倒是不常用，不过WP8上的应用我觉得和安卓什么的最大的区别就是它的应用栏了，下面就来讲讲应用栏是怎么做出来的。

在Document Outline（在视图中找到，或者按Ctrl+W，U）中有TopAppBar和BottomAppBar，分别是顶部和底部的应用栏。点鼠标右键可以快速定义AppBar和CommandBar，通常将AppBar放在应用上端也就是TopAppBar内，CommandBar放在下端也就是BottomAppBar内。

或许很多人都不知道，在Modern应用下，按Win+Z键可以直接呼出应用栏哟。另外要注意AppBar与CommandBar不同，前者只能包含一条子内容，通常定义一个Grid控件，然后在Grid内嵌套其他控件。下面贴出一段AppBar的示例：

 

<Page.TopAppBar>
  <AppBar IsSticky="True">
     <Grid>
       <Grid.ColumnDefinitions>
          <ColumnDefinition/>
          <ColumnDefinition/>
       </Grid.ColumnDefinitions>
       <StackPanel Orientation="Horizontal">
          <Button Content="Main Page" Width="140" Height="80" Click="AppBarButton1_Click"/>
          <Button Content="Second Page" Width="140" Height="80" Click="AppBarButton2_Click"/>
          <Button Content="Third Page" Width="140" Height="80" Click="AppBarButton3_Click"/>
          <TextBlock Text="AppBar" Foreground="Red" FontSize="40" VerticalAlignment="Center" Margin="12" Width="200"/>
       </StackPanel>                   
       <SearchBox Grid.Column="1" Width="300" Height="50" HorizontalAlignment="Right"/>
    </Grid>
  </AppBar>
</Page.TopAppBar>

<Page.BottomAppBar>
    <CommandBar>
       <AppBarButton Label="Refresh" Icon="Refresh"  
           Click="appBarBtn4_Click"/>
       <AppBarButton Label="Redo" Icon="Redo"
           Click="appBarBtn5_Click"/>        
       <CommandBar.SecondaryCommands>
          <AppBarButton Label="Add" Icon="Add" Click="AppBarButton6_Click"/>
          <AppBarButton Label="Delete" Icon="Delete" Click="AppBarButton7_Click"/>
          <AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton8_Click"/>
       </CommandBar.SecondaryCommands>                                     
   </CommandBar>
</Page.BottomAppBar>

但是大家应该都发现了，默认情况下应用栏是隐藏起来的，如果想要在加载的时候就是启动的，那该怎么办呢？很简单，直接在AppBar定义IsOpen属性为真就好。

 

<CommandBar IsOpen="True">
    <!-- -->
</CommandBar>

另外还有粘滞属性哟。也就是说，原本当用右键呼出应用栏后，再用左键等点一下其他位置应用栏就会自己消失啦，但如果IsSticky属性为真的话呢，非得再多按几下右键才会消失的。

<AppBar IsSticky="True">
    <!-- -->
</AppBar>

除了在XAML中定义这些属性外，我们也可以在后台代码中用函数来实现呢，这里我就是用的2个Button的Click事件

private void btnSetAppBar_Click(object sender, RoutedEventArgs e)
{
   if (this.TopAppBar != null)
   {
       this.TopAppBar.IsSticky = true;
   }
}

private void btnSetAppBar2_Click(object sender, RoutedEventArgs e)
{
    if (BottomAppBar.IsOpen ==false)
    {
       this.BottomAppBar.IsOpen = true;
    }
}