Windows 8 Metro Development (03): bottomappbar of AppBar Control

The Jos? Mourinho column is http://blog.csdn.net/zyc13701469860.

BottomappbarBefore introducing the bottomappbar, you should first upload the image. This time we focus on the AppBar at the bottom.
The AppBar is divided into two parts. On the left side is the reference system AppBar button, and on the right side is the custom AppBar button. In fact, the writing method is the same.
Next let's take a look at the layout File

<Page.BottomAppBar>        <!-- ApplicationBar -->        <AppBar x:Name="BottomAppbar">            <Grid>                <Grid.RowDefinitions>                    <RowDefinition Height="Auto"/>                    <RowDefinition Height="Auto"/>                </Grid.RowDefinitions>                <StackPanel x:Name="systemAppBarPanel" Orientation="Horizontal">                    <Button x:Name="SkipBackAppBarButton" Style="{StaticResource SkipBackAppBarButtonStyle}" Click="OnSkipBackAppBarButtonCilcked" />                    <Button x:Name="SkipAheadAppBarButton" Style="{StaticResource SkipAheadAppBarButtonStyle}" Click="OnSkipAheadAppBarButtonCilcked"/>                    <Line Width="5" Stroke="White" Stretch="Fill" Y2="{Binding ActualHeight, ElementName=systemAppBarPanel, Mode=OneWay}"/>                    <Button x:Name="PlayAppBarButton" Style="{StaticResource PlayAppBarButtonStyle}" Click="OnPlayAppBarButtonCilcked"/>                    <Button x:Name="PauseAppBarButton" Style="{StaticResource PauseAppBarButtonStyle}" Click="OnPauseAppBarButtonCilcked"/>                    <Button x:Name="StopAppBarButton" Style="{StaticResource StopAppBarButtonStyle}" Click="OnStopAppBarButtonCilcked"/>                </StackPanel>                <StackPanel x:Name="customAppBarPanel" Orientation="Horizontal" HorizontalAlignment="Right">                    <Button x:Name="LoveAppBarButton" Style="{StaticResource LoveAppBarButtonStyle}" Click="OnLoveAppBarButtonCilcked"/>                    <Button x:Name="CalcAppBarButton"  Style="{StaticResource CalcAppBarButtonStyle}" Click="OnCalcAppBarButtonCilcked"/>                    <Button x:Name="TelAppBarButton"  Style="{StaticResource TelAppBarButtonStyle}" Click="OnTelAppBarButtonCilcked"/>                    <Button x:Name="GoodAppBarButton"  Style="{StaticResource GoodAppBarButtonStyle}" Click="OnGoodAppBarButtonCilcked"/>                    <Button x:Name="LaughAppBarButton"  Style="{StaticResource LaughAppBarButtonStyle}" Click="OnLaughAppBarButtonCilcked"/>                </StackPanel>            </Grid>        </AppBar>    </Page.BottomAppBar>

The style of each button is different. What are these styles? Let's take a look at the system style. Take skipbackappbarbuttonstyle as an example:

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

Skipbackappbarbutton Is An appbar button in the basic style of appbarbuttonstyle. Here we only need to pay attention to the last two setters. <setter property = "automationproperties. name "value =" skip back "/> is used to display the string <setter property =" content "value =" & # xe100; "/>
It is used to display the string in the circle in the middle of the button and emphasize again that this is not an "image ". You may know how to define the Custom button. Paste the code.

<Style X: Key = "loveappbarbuttonstyle" targettype = "buttonbase" basedon = "{staticresource appbarbuttonstyle}"> <setter property = "automationproperties. automationid "value =" loveappbarbutton "/> <setter property =" automationproperties. name "value =" "/> <setter property =" content "value =" "/> </style>

The event of each button is simple, that is, a corresponding dialog box is displayed, Which is omitted here.
Snap mode ProcessingLike topappbar, bottomappbar requires UI conversion in snap mode.
The snap mode will be detailed later. The concept is omitted here.
If you do not do this, when you drag the program to the sidebar, you will find that there are only three buttons on the bottomappbar! The text on the button is not displayed completely. Therefore, we need to adjust the deployment of the bottomappbar. When the program is dragged to the sidebar, the buttons on the left and right sides are displayed in two rows, narrowing down the button size and hiding the text below the button. However, the system does not define the style of this button. We need to implement it ourselves: Create an appbarpagestyle file. XAML, in standardstyles. in XAML, find appbarbuttonstyle and copy it to appbarpagestyle. in XAML and renamed
Appbarbuttonsnapstyle: Modify the attributes of the template.

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

Then define the corresponding snap AppBar button

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

When you enter the snap mode on the appbarpage page, if you register a status listener in The XAML, the program will change the UI layout according To The XAML code.

<VisualState x:Name="Snapped">                    <Storyboard>                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>                        </ObjectAnimationUsingKeyFrames>                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>                        </ObjectAnimationUsingKeyFrames>                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="customAppBarPanel"  Storyboard.TargetProperty="(Grid.Row)">                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>                        </ObjectAnimationUsingKeyFrames>                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="customAppBarPanel"  Storyboard.TargetProperty="HorizontalAlignment">                            <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>                        </ObjectAnimationUsingKeyFrames>                        <!--appbar button-->                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SkipBackAppBarButton" Storyboard.TargetProperty="Style">                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SkipBackAppBarButtonSnapStyle}"/>                        </ObjectAnimationUsingKeyFrames>                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SkipAheadAppBarButton" Storyboard.TargetProperty="Style">                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SkipAheadAppBarButtonSnapStyle}"/>                        </ObjectAnimationUsingKeyFrames>                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlayAppBarButton" Storyboard.TargetProperty="Style">                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PlayAppBarButtonSnapStyle}"/>                        </ObjectAnimationUsingKeyFrames>                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PauseAppBarButton" Storyboard.TargetProperty="Style">                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PauseAppBarButtonSnapStyle}"/>                        </ObjectAnimationUsingKeyFrames>                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StopAppBarButton" Storyboard.TargetProperty="Style">                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource StopAppBarButtonSnapStyle}"/>                        </ObjectAnimationUsingKeyFrames>                                                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoveAppBarButton"  Storyboard.TargetProperty="Style">                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LoveAppBarButtonSnapStyle}"/>                        </ObjectAnimationUsingKeyFrames>                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CalcAppBarButton"  Storyboard.TargetProperty="Style">                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CalcAppBarButtonSnapStyle}"/>                        </ObjectAnimationUsingKeyFrames>                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TelAppBarButton"  Storyboard.TargetProperty="Style">                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TelAppBarButtonSnapStyle}"/>                        </ObjectAnimationUsingKeyFrames>                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GoodAppBarButton"  Storyboard.TargetProperty="Style">                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource GoodAppBarButtonSnapStyle}"/>                        </ObjectAnimationUsingKeyFrames>                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LaughAppBarButton"  Storyboard.TargetProperty="Style">                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LaughAppBarButtonSnapStyle}"/>                        </ObjectAnimationUsingKeyFrames>                    </Storyboard>                </VisualState>

Shows the bottomappbar in snap mode:
Note: 1. Do not forget to reference appbarpagestyle. XAML in APP. XAML.

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

2. The functions of the AppBar control (which should be all controls) must comply with Microsoft's specifications and cannot be customized at will. For details, refer to msdn.

Http://blog.csdn.net/zyc13701469860/article/details/8194090