Windows8 Metro开发 (03) : AppBar控件之BottomAppBar

BottomAppBar

在介绍BottomAppBar之前还是先上张图。

这次我们关注底部的AppBar.

上图的AppBar分为左右2个部分。

左侧是引用系统自带的AppBar按钮，右侧是自定义的AppBar按钮。其实写法都一样。

下面来看看布局文件

[plain]  view plain copy print ?

1. <Page.BottomAppBar>  
2.         <!-- ApplicationBar -->  
3.         <AppBar x:Name="BottomAppbar">  
4.             <Grid>  
5.                 <Grid.RowDefinitions>  
6.                     <RowDefinition Height="Auto"/>  
7.                     <RowDefinition Height="Auto"/>  
8.                 </Grid.RowDefinitions>  
9.                 <StackPanel x:Name="systemAppBarPanel" Orientation="Horizontal">  
10.                     <Button x:Name="SkipBackAppBarButton" Style="{StaticResource SkipBackAppBarButtonStyle}" Click="OnSkipBackAppBarButtonCilcked" />  
11.                     <Button x:Name="SkipAheadAppBarButton" Style="{StaticResource SkipAheadAppBarButtonStyle}" Click="OnSkipAheadAppBarButtonCilcked"/>  
12.                     <Line Width="5" Stroke="White" Stretch="Fill" Y2="{Binding ActualHeight, ElementName=systemAppBarPanel, Mode=OneWay}"/>  
13.                     <Button x:Name="PlayAppBarButton" Style="{StaticResource PlayAppBarButtonStyle}" Click="OnPlayAppBarButtonCilcked"/>  
14.                     <Button x:Name="PauseAppBarButton" Style="{StaticResource PauseAppBarButtonStyle}" Click="OnPauseAppBarButtonCilcked"/>  
15.                     <Button x:Name="StopAppBarButton" Style="{StaticResource StopAppBarButtonStyle}" Click="OnStopAppBarButtonCilcked"/>  
16.                 </StackPanel>  
17.                 <StackPanel x:Name="customAppBarPanel" Orientation="Horizontal" HorizontalAlignment="Right">  
18.                     <Button x:Name="LoveAppBarButton" Style="{StaticResource LoveAppBarButtonStyle}" Click="OnLoveAppBarButtonCilcked"/>  
19.                     <Button x:Name="CalcAppBarButton"  Style="{StaticResource CalcAppBarButtonStyle}" Click="OnCalcAppBarButtonCilcked"/>  
20.                     <Button x:Name="TelAppBarButton"  Style="{StaticResource TelAppBarButtonStyle}" Click="OnTelAppBarButtonCilcked"/>  
21.                     <Button x:Name="GoodAppBarButton"  Style="{StaticResource GoodAppBarButtonStyle}" Click="OnGoodAppBarButtonCilcked"/>  
22.                     <Button x:Name="LaughAppBarButton"  Style="{StaticResource LaughAppBarButtonStyle}" Click="OnLaughAppBarButtonCilcked"/>  
23.                 </StackPanel>  
24.             </Grid>  
25.         </AppBar>  
26.     </Page.BottomAppBar>  

里面每一个Button的样式都是不同的。这些样式是什么呢？先来看看系统的样式。

以SkipBackAppBarButtonStyle为例：

[html]  view plain copy print ?

1. <Style x:Key="SkipBackAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">  
2.     <Setter Property="AutomationProperties.AutomationId" Value="SkipBackAppBarButton"/>  
3.     <Setter Property="AutomationProperties.Name" Value="Skip Back"/>  
4.     <Setter Property="Content" Value="&#xE100;"/>  
5. </Style>  

SkipBackAppBarButton是以AppBarButtonStyle为基本样式的一个AppBar按钮，在这里我们只需注意 最后2个Setter.

<Setter Property="AutomationProperties.Name" Value="Skip Back"/> 用来显示按钮下面的字串

<Setter Property="Content" Value="&#xE100;"/>  用来显示按钮中间圆圈里的字符串，再次强调这个不是“图片”。

看到这里，你们也许知道了自定义按钮该怎样定义了。代码还是贴下吧。

[html]  view plain copy print ?

1.     <Style x:Key="LoveAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">  
2.         <Setter Property="AutomationProperties.AutomationId" Value="LoveAppBarButton"/>  
3.         <Setter Property="AutomationProperties.Name" Value="爱心"/>  
4.         <Setter Property="Content" Value=""/>  
5.     </Style>  

每一个按钮的事件都很简单，就是弹出一个相应的对话框，这里就省略了。

Snap模式处理

同TopAppBar一样，BottomAppBar在Snap模式下的时候需要进行UI转换。
Snap模式后面会详细介绍。这里先省略概念。

如果不做处理，当你把程序拖到侧边栏时，你会发现此时BottomAppBar上面的按钮只剩下了3个!并且按钮上面的文字显示不全。

因此我们需要对BottomAppBar的布局做下调整。 当程序拖到侧边栏时，将左右两侧的按钮分两排显示，缩小按钮尺寸并且隐去按钮下面文字。

不过系统并没有定义这种按钮的样式，需要我们自己来实现：

创建文件AppBarPageStyle.xaml，在StandardStyles.xaml里找到AppBarButtonStyle，将其复制到AppBarPageStyle.xaml中，并更名为
AppBarButtonSnapStyle,修改 Template属性。

[plain]  view plain copy print ?

1. <ControlTemplate TargetType="ButtonBase">  
2.                    <Grid x:Name="RootGrid" Width="60" Background="Transparent">  
3.                        <StackPanel VerticalAlignment="Top" Margin="0,12,0,11">  
4.                            <Grid Width="40" Height="40" Margin="0,0,0,5" HorizontalAlignment="Center">  
5.                                <TextBlock x:Name="BackgroundGlyph" Text="" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemBackgroundThemeBrush}"/>  
6.                                <TextBlock x:Name="OutlineGlyph" Text="" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0"/>  
7.                                <ContentPresenter x:Name="Content" HorizontalAlignment="Center" Margin="-1,-1,0,0" VerticalAlignment="Center"/>  
8.                            </Grid>  
9.                        </StackPanel>  
10.                     ...  
11.                    </Grid>  
12.                </ControlTemplate>  

然后定义相对应的Snap AppBar按钮

[plain]  view plain copy print ?

1. <Style x:Key="LoveAppBarButtonSnapStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonSnapStyle}">  
2.     <Setter Property="Content" Value=""/>  
3. </Style>  

在AppBarPage页面进入Snap模式的时候，如果在XAML里面注册状态监听，程序会根据XAML代码变换UI布局。

[plain]  view plain copy print ?

1. <VisualState x:Name="Snapped">  
2.                     <Storyboard>  
3.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">  
4.                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>  
5.                         </ObjectAnimationUsingKeyFrames>  
6.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">  
7.                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>  
8.                         </ObjectAnimationUsingKeyFrames>  
9.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="customAppBarPanel"  Storyboard.TargetProperty="(Grid.Row)">  
10.                             <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>  
11.                         </ObjectAnimationUsingKeyFrames>  
12.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="customAppBarPanel"  Storyboard.TargetProperty="HorizontalAlignment">  
13.                             <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>  
14.                         </ObjectAnimationUsingKeyFrames>  
15.   
16.                         <!--appbar button-->  
17.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SkipBackAppBarButton" Storyboard.TargetProperty="Style">  
18.                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SkipBackAppBarButtonSnapStyle}"/>  
19.                         </ObjectAnimationUsingKeyFrames>  
20.   
21.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SkipAheadAppBarButton" Storyboard.TargetProperty="Style">  
22.                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SkipAheadAppBarButtonSnapStyle}"/>  
23.                         </ObjectAnimationUsingKeyFrames>  
24.   
25.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlayAppBarButton" Storyboard.TargetProperty="Style">  
26.                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PlayAppBarButtonSnapStyle}"/>  
27.                         </ObjectAnimationUsingKeyFrames>  
28.   
29.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PauseAppBarButton" Storyboard.TargetProperty="Style">  
30.                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PauseAppBarButtonSnapStyle}"/>  
31.                         </ObjectAnimationUsingKeyFrames>  
32.   
33.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StopAppBarButton" Storyboard.TargetProperty="Style">  
34.                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource StopAppBarButtonSnapStyle}"/>  
35.                         </ObjectAnimationUsingKeyFrames>  
36.                                                  
37.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoveAppBarButton"  Storyboard.TargetProperty="Style">  
38.                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LoveAppBarButtonSnapStyle}"/>  
39.                         </ObjectAnimationUsingKeyFrames>  
40.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CalcAppBarButton"  Storyboard.TargetProperty="Style">  
41.                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CalcAppBarButtonSnapStyle}"/>  
42.                         </ObjectAnimationUsingKeyFrames>  
43.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TelAppBarButton"  Storyboard.TargetProperty="Style">  
44.                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TelAppBarButtonSnapStyle}"/>  
45.                         </ObjectAnimationUsingKeyFrames>  
46.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GoodAppBarButton"  Storyboard.TargetProperty="Style">  
47.                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource GoodAppBarButtonSnapStyle}"/>  
48.                         </ObjectAnimationUsingKeyFrames>  
49.                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LaughAppBarButton"  Storyboard.TargetProperty="Style">  
50.                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LaughAppBarButtonSnapStyle}"/>  
51.                         </ObjectAnimationUsingKeyFrames>  
52.                     </Storyboard>  
53.                 </VisualState>  

Snap模式下的BottomAppBar如下图所示：

注意：

1.别忘了在App.xaml中引用AppBarPageStyle.xaml

[html]  view plain copy print ?

1. <ResourceDictionary Source="Common/StandardStyles.xaml"/>  
2. <ResourceDictionary Source="Pages/Home/GlobalPageStyle.xaml"/>  
3. <ResourceDictionary Source="Pages/Home/HomePageStyle.xaml"/>  
4. <ResourceDictionary Source="Pages/01-AppBar/AppBarPageStyle.xaml"/>  

2.AppBar控件的功能(应该是所有控件)需要符合微软制定的规范，不能随便制定。具体内容可参考MSDN。