Windows 8 Application bar

In Windows 8, right-click or operate the touch screen. A menu is displayed at the bottom of the screen. This is the application bar.

The application bar is similar to the menu bar in Windows Phone:

 1 <Page.BottomAppBar> 2     <AppBar x:Name="BottomAppBar"> 3         <Grid> 4             <Grid.ColumnDefinitions> 5                 <ColumnDefinition Width="50*"/> 6                 <ColumnDefinition Width="50*"/> 7             </Grid.ColumnDefinitions> 8             <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left"> 9                 <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Click="Edit_Button_Click"/>10                 <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}"/>11                 <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}"/>12             </StackPanel>13             <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">14                 <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}"/>15             </StackPanel>16         </Grid>17     </AppBar>18 </Page.BottomAppBar>

The AppBar label is a control area that allows you to set any layout. In the previous example, we set the layout that is common in Win8 applications. There are several buttons on the left and several buttons on the right.

The button is directly represented by the button control, and the event or name is added by itself. The style is generally the style that comes with the system, and the style file is in the common/standardstyles. XAML path of the project file.

By default, all the configurations of these styles are annotated. If you need button Styles, you need to manually uncomment them, as shown below:

<Style x:Key="RefreshAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">        <Setter Property="AutomationProperties.AutomationId" Value="RefreshAppBarButton"/>        <Setter Property="AutomationProperties.Name" Value="Refresh"/>        <Setter Property="Content" Value="&#xE117;"/>    </Style>

In this way, you can change the button style by setting the button attribute style = "{staticresource refreshappbarbuttonstyle }".