Windows8应用开发学习（四）AppBar

什么是AppBar?

AppBar可以用来显示导航，命令等，可以放在页面的顶部或底部，默认情况下AppBar是隐藏的，用户可以通过鼠标右键，Win+z或用手指从屏幕顶端或底端划过来显示或隐藏AppBar.

这是Windows应用商店顶端的AppBar，顶端AppBar通常用来做导航：

这是Windows8自带应用 “人脉” 底端的AppBar，底端AppBar通常用来显示命令按钮：

下面创建一个简单的拥有AppBar的应用，打开VS2012，FILE -> New -> Project -> Windows Store -> Blank App(XAML) -> 命名项目为 “AppBarDemo” -> OK. 

MainPage.xaml:

<Page
    x:Class="AppBarDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppBarDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <!--顶端AppBar-->
    <Page.TopAppBar>
        <AppBar IsSticky="True">
            <StackPanel Orientation="Horizontal">
                <!--这个Button以及之后的Button的样式都包含在Common文件夹下的StandardStyles.xaml文件中，这个文件为我们提供了很多AppBar按钮的样式，我们可以直接使用，也可以修改下使用-->
                <Button Name="ToPage2Button" Click="ToPage2Button_Click" Style="{StaticResource GoAppBarButtonStyle}"/>
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
    <!--底端AppBar-->
    <Page.BottomAppBar>
        <AppBar>
            <!--AppBar中只能容纳一个元素，我们想要在AppBar中放两个StackPanel需要用要给Grid去容纳这两个StackPanel-->
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button Name="GetResultsButton" Click="GetResultsButton_Click" Style="{StaticResource ShowResultsAppBarButtonStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Name="AddButton" Click="AddButton_Click" Style="{StaticResource AddAppBarButtonStyle}"/>     
                    <Button Name="RemoveButton" Click="RemoveButton_Click" Style="{StaticResource RemoveAppBarButtonStyle}"/>                    
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Name="DisplayTextBlock" FontSize="50" Text="This is a AppBar demo" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
</Page>

MainPage.xaml.cs:

namespace AppBarDemo
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
       
        private void GetResultsButton_Click(object sender, RoutedEventArgs e)
        {
           DisplayTextBlock.Text += "\nShow results button is clicked!";
        }

        private void AddButton_Click(object sender, RoutedEventArgs e)
        {
            DisplayTextBlock.Text += "\nAdd button is clicked!";
        }

        private void RemoveButton_Click(object sender, RoutedEventArgs e)
        {
            DisplayTextBlock.Text += "\nRemove button is clicked!";
        }
    }
}

按F5运行看下效果：

通过点击鼠标右键，Win+z或用手指从屏幕顶端或底端划过可使AppBar显示，点击AppBar中的按钮看下效果：

看下AppBar类的定义：

    // Summary:
    //     Represents the container control that holds app UI components for commanding
    //     and experiences.
    [MarshalingBehavior(MarshalingType.Agile)]
    [Threading(ThreadingModel.Both)]
    [Version(100794368)]
    [WebHostHidden]
    public class AppBar : ContentControl
    {
        // Summary:
        //     Initializes a new instance of the AppBar class.
        public AppBar();

        // Summary:
        //     Gets or sets a value that indicates whether the AppBar is visible.
        //
        // Returns:
        //     True to display the AppBar and make it visible. False to hide the AppBar.
        public bool IsOpen { get; set; }
        //
        // Summary:
        //     Identifies the IsOpen dependency property.
        //
        // Returns:
        //     The identifier for the IsOpen dependency property.
        public static DependencyProperty IsOpenProperty { get; }
        //
        // Summary:
        //     Gets or sets a value that indicates whether the AppBar does not close on
        //     light dismiss.
        //
        // Returns:
        //     True if the AppBar does not close on light dismiss.  False if the AppBar
        //     is hidden on light dismiss.
        public bool IsSticky { get; set; }
        //
        // Summary:
        //     Identifies the IsSticky dependency property.
        //
        // Returns:
        //     The identifier for the IsSticky dependency property.
        public static DependencyProperty IsStickyProperty { get; }

        // Summary:
        //     Occurs when the AppBar changes from visible to hidden.
        public event EventHandler<object> Closed;
        //
        // Summary:
        //     Occurs when the AppBar changes from hidden to visible.
        public event EventHandler<object> Opened;

        // Summary:
        //     Invoked when the AppBar changes from visible to hidden.
        //
        // Parameters:
        //   e:
        //     Event data for the event.
        protected virtual void OnClosed(object e);
        //
        // Summary:
        //     Invoked when the AppBar changes from hidden to visible, or is first displayed.
        //
        // Parameters:
        //   e:
        //     Event data for the event.
        protected virtual void OnOpened(object e);
    }

可以看到有一个IsOpen和一个IsSticky属性，可以通过从后台代码中把IsOpen设置为true来打开AppBar. AppBar默认是在用户与AppBar以外的部分进行交互时，AppBar自动隐藏，例如当AppBar在打开状态时，用鼠标左键点击应用的非AppBar部分，AppBar则会自动关闭，但将IsStick属性设置为true时，除非用户显式地点击鼠标右键或按Win+z, 或用手指从屏幕顶端或底端划过才会隐藏，否则AppBar会一直显示。给TopAppBar设置一个IsSticky属性，再运行，点击鼠标右键调出AppBar，在应用的非AppBar位置用鼠标左键点击以下，会发现BottomAppBar隐藏了，而TopAppBar还在。

同时AppBar还有一个Opened和一个Closed事件，可以在其中做一些事情。

更多关于AppBar的使用，可以参考以下链接：

如何跨页面共享应用栏

如何将上下文命令添加到应用栏

如何将菜单添加到应用栏