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=""/> </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); }