09、AppBarControl

1、Basics:

       这个示例主要演示了一个基本的 AppBar 控件。显示 AppBar 的方法： 用手轻划屏幕的顶部或者底部，或者右键单击鼠标，或者快捷方式 win键 + Z。轻划其它部分便可以隐藏 AppBar。

       系统按钮样式资源

       底部按钮:

   <Page.BottomAppBar>
        <AppBar x:Name="BottomAppBar1" Padding="10,0,10,0" AutomationProperties.Name="Bottom App Bar">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50*"/>
                    <ColumnDefinition Width="50*"/>
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                    <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Edit"/>
                    <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Save"/>
                    <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Delete"/>
                </StackPanel>
                <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                    <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refresh"/>
                    <Button x:Name="Previous" Style="{StaticResource PreviousAppBarButtonStyle}" Tag="Previous"/>
                    <Button x:Name="Next" Style="{StaticResource NextAppBarButtonStyle}" Tag="Next"/>
                    <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Help"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

  显示为:

   其中,第一个编辑按钮的样式为(其它类似):

 <Style x:Key="EditAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
        <Setter Property="AutomationProperties.AutomationId" Value="EditAppBarButton"/>
        <Setter Property="AutomationProperties.Name" Value="Edit"/>
        <Setter Property="Content" Value="&#xE104;"/>
    </Style>

2、"sticky" AppBars:

         如果不想在鼠标左键单击屏幕时隐藏 AppBar 时,可以通过吧 AppBar 的 IsSticky 属性设置为  true。（单击鼠标右键时，一样会隐藏 AppBar）

3、Global AppBars :

        本示例的思路是在一个全局的页面中 (Global),分别只放置一个 AppBar ,和一个 Frame:

AppBar (其中只有一个 Back 按钮):

 <Page.BottomAppBar>
        <AppBar x:Name="GlobalAppBar" Padding="10,0,10,0" AutomationProperties.Name="Global App Bar">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50*"/>
                    <ColumnDefinition Width="50*"/>
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftCommands" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                    <Button x:Name="Back" AutomationProperties.Name="Back" Style="{StaticResource BackAppBarButtonStyle}" HorizontalAlignment="Left"/>
                </StackPanel>
                <StackPanel x:Name="RightCommands" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

后退按钮的 C# 事件:

 private void Back_Click(object sender, RoutedEventArgs e)
        {
            if (Frame1.CanGoBack)
            {
                Frame1.GoBack();
            }
        }

Frame:

  <Grid Background="White">
        <Frame x:Name="Frame1"/>
    </Grid>

然后通过 Global 页面中的 Frame1 对象来显示其它页面，例如,导航到 Global 页面时,首先显示一个 Page1 页面,在 Global 页面的 OnNavigatedTo(NavigationEventArgs e) 事件中：

      protected override void OnNavigatedTo(NavigationEventArgs e)
        {
           // 把当前的 Global 页面作为参数，通过 this 传递到 Page1 页面
            Frame1.Navigate(typeof(Page1), this);
        }

然后,在 Page1 页面中接收参数：

 GlobalPage rootPage = null;
 protected override void OnNavigatedTo(NavigationEventArgs e)
        {
           // 获得 Global 页面
            rootPage = e.Parameter as GlobalPage;
        }

然后,在 Page1 页面中，可以通过 Page1 中的按钮导航到 Page2 页面：

private void PageTwo_Click(object sender, RoutedEventArgs e)
        {
          //同样把 Global 页面 传递到 Page2 中
            this.Frame.Navigate(typeof(Page2), rootPage);
        }

其它页面导航类似，即通过在 Global 页面中放置一个 Frame1 对象，从而使 Page1、Page2 等在该对象中进行导航。

4、Animating Commands：

     本示例展示的是在添加、删除 AppBar 中的按钮时，伴随着动画的效果。方法很简单，只是在相应的 AppBar 的布局面板的 ChildrenTransitions 属性中添加 AddDeleteThemeTransition 即可。

     AppBar:

 

相应的 xaml ：

  <Page.BottomAppBar>
        <AppBar x:Name="BottomAppBar1" IsSticky="True" AutomationProperties.Name="Bottom App Bar">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50*"/>
                    <ColumnDefinition Width="50*"/>
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                    <Button x:Name="Back" AutomationProperties.Name="Back" Style="{StaticResource BackAppBarButtonStyle}" HorizontalAlignment="Left" Click="Back_Click"/>
                    <Button x:Name="Separator" Style="{StaticResource AppBarSeparatorButtonStyle}"/>
                    <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Edit"/>
                    <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Save"/>
                    <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Delete"/>
                    <StackPanel.ChildrenTransitions>
                        <TransitionCollection>
                            <AddDeleteThemeTransition/>
                        </TransitionCollection>
                    </StackPanel.ChildrenTransitions>
                </StackPanel>
                <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                    <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refresh"/>
                    <Button x:Name="Previous" Style="{StaticResource PreviousAppBarButtonStyle}" Tag="Previous"/>
                    <Button x:Name="Next" Style="{StaticResource NextAppBarButtonStyle}" Tag="Next"/>
                    <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Help"/>
                    <StackPanel.ChildrenTransitions>
                        <TransitionCollection>
                            <AddDeleteThemeTransition/>
                        </TransitionCollection>
                    </StackPanel.ChildrenTransitions>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

 xaml 中的两个按钮：

                <Button Content="Remove Save Button" Click="RemoveSaveButton_Click"/>
                <Button Content="Add Favorite Button" Click="AddFavoriteButton_Click"/>

按钮对应的两个事件：

//删除页面中名为 Save 的按钮 
private void RemoveSaveButton_Click(object sender, RoutedEventArgs e)
        {
            if (Save != null)
            {
                LeftPanel.Children.Remove(Save);
            }
        }

//向 AppBar 的面板中添加 按钮
        private void AddFavoriteButton_Click(object sender, RoutedEventArgs e)
        {
            Button favButton = new Button();
            favButton.Style = App.Current.Resources["FavoriteAppBarButtonStyle"] as Style;
            LeftPanel.Children.Insert(2, favButton);
        }