Introduction
In this article we will learn how to use the application bar in a Windows 8. Here we show the application bar displaying on the right-click on page. In the Metro Style Applications we run code and we get output as shown below. The Application Bar is transient by default which means it starts out hidden and disappears. With the dismiss mode we can choose alternative modes. We explain the three different points with different functionality. But in the MainPage.xaml we have to make some changes in this Metro Application.
So, we use the following steps to make this application.
Step 1 : First of all you will create a new Metro Style Application; let us see the description with images of how you will create it.
- Open Visual Studio 2011
- File -> New -> Project
- Choose Template -> Visual C# -> Windows Metro Style -> Application
- Rename this Application
![homepage.jpg]()
Step 2 : In the Solution Explorer there are two files that we will primarily work with; MainPage.xaml and MainPage.xaml.cs files. In the images folder add any image to the application but in this application we don't have to add an image.
![solutionexplorer.gif]()
Step 3 : The MainPage.xaml file is as in the following code.
Code : Let us see the code which is given below:
<UserControl.Resources>
<Style x:Key="RateButtonStyle" TargetType="Button">
< Setter Property="Background" Value="Transparent"/>
< Setter Property="Foreground" Value="White"/>
< Setter Property="BorderBrush" Value="Transparent"/>
< Setter Property="FontFamily" Value="Segoe UI"/>
< Setter Property="FontSize" Value="9"/>
< Setter Property="Template">
< Setter.Value>
< ControlTemplate TargetType="Button">
< Grid>
< VisualStateManager.VisualStateGroups>
< VisualStateGroup x:Name="CommonStates">
< VisualState x:Name="Normal"/>
< VisualState x:Name="MouseOver"/>
< VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonEllipse" /> <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Glyph" />
</ Storyboard>
</ VisualState>
</ VisualStateGroup>
</ VisualStateManager.VisualStateGroups>
< StackPanel Orientation="Vertical">
< Grid Margin="0,14,0,5" >
<Ellipse x:Name="ButtonEllipse" Height="40" Width="40" Fill="Transparent" HorizontalAlignment="Center" Stroke="White" StrokeThickness="2" VerticalAlignment="Center"/>
< TextBlock x:Name="Glyph" Text="©" FontFamily="Symbol" FontSize="30" HorizontalAlignment="Center" VerticalAlignment ="Center"/>
</ Grid>
< TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" FontFamily ="Segoe UI" FontSize="12"/>
</ StackPanel>
</ Grid>
</ ControlTemplate>
</ Setter.Value>
</ Setter>
</ Style>
<Style x:Key="ForwardButtonStyle" TargetType="Button">
< Setter Property="Background" Value="Transparent"/>
< Setter Property="Foreground" Value="RosyBrown"/>
< Setter Property="BorderBrush" Value="Transparent"/>
< Setter Property="FontFamily" Value="Segoe UI"/>
< Setter Property="FontSize" Value="9"/>
< Setter Property="Template">
< Setter.Value>
< ControlTemplate TargetType="Button">
< Grid>
< VisualStateManager.VisualStateGroups>
< VisualStateGroup x:Name="CommonStates">
< VisualState x:Name="Normal"/>
< VisualState x:Name="MouseOver"/>
< VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
Storyboard.TargetName="ButtonEllipse" />
<ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="Glyph" />
</ Storyboard>
</ VisualState>
</ VisualStateGroup>
</ VisualStateManager.VisualStateGroups>
< StackPanel Orientation="Vertical">
<Grid Margin="0,14,0,5" >
< Ellipse x:Name="ButtonEllipse" Height="40" Width="40" Fill="Transparent" HorizontalAlignment="Center"
Stroke ="White" StrokeThickness="2" VerticalAlignment="Center"/>
<TextBlock x:Name="Glyph" Text="Ú" FontFamily="Wingdings 3" FontSize="30" HorizontalAlignment="Center"
VerticalAlignment ="Center"/>
</ Grid>
< TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" FontFamily="Segoe UI" FontSize="12"/>
</ StackPanel>
</ Grid>
</ ControlTemplate>
</ Setter.Value>
</ Setter>
</ Style>
<Style x:Key="RefreshButtonStyle" TargetType="Button">
< Setter Property="Background" Value="Transparent"/>
< Setter Property="Foreground" Value="red"/>
< Setter Property="BorderBrush" Value="Transparent"/>
< Setter Property="FontFamily" Value="Segoe UI"/>
< Setter Property="FontSize" Value="9"/>
< Setter Property="Template">
< Setter.Value>
< ControlTemplate TargetType="Button">
< Grid>
< VisualStateManager.VisualStateGroups>
< VisualStateGroup x:Name="CommonStates">
< VisualState x:Name="Normal"/>
< VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
< Storyboard>
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"Storyboard.TargetName="ButtonEllipse" />
<ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground)(SolidColorBrush.Color)"Storyboard.TargetName="Glyph" />
</ Storyboard>
</ VisualState>
</ VisualStateGroup>
</ VisualStateManager.VisualStateGroups>
< StackPanel Orientation="Vertical">
< Grid Margin="0,14,0,5" >
<Ellipse x:Name="ButtonEllipse" Height="40" Width="40" Fill="Transparent" HorizontalAlignment="Center" Stroke="White" StrokeThickness="2" VerticalAlignment="Center"/>
<TextBlock x:Name="Glyph" Text="P" FontFamily="Wingdings 3" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</ Grid>
<TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" FontFamily ="Segoe UI" FontSize="12"/>
</ StackPanel>
</ Grid>
</ ControlTemplate>
</ Setter.Value>
</ Setter>
</ Style>
<Style x:Key="MoreButtonStyle" TargetType="Button">
< Setter Property="Background" Value="Transparent"/>
< Setter Property="Foreground" Value="Pink"/>
< Setter Property="BorderBrush" Value="Transparent"/>
< Setter Property="FontFamily" Value="Segoe UI"/>
< Setter Property="FontSize" Value="9"/>
< Setter Property="Template">
< Setter.Value>
< ControlTemplate TargetType="Button">
< Grid>
< VisualStateManager.VisualStateGroups>
< VisualStateGroup x:Name="CommonStates">
< VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
< VisualState x:Name="Pressed">
< Storyboard>
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"Storyboard.TargetName="ButtonEllipse" />
<ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"Storyboard.TargetName="Glyph" />
</ Storyboard>
</ VisualState>
</ VisualStateGroup>
</ VisualStateManager.VisualStateGroups>
< StackPanel Orientation="Vertical">
< Grid Margin="0,14,0,5" >
<Ellipse x:Name="ButtonEllipse" Height="40" Width="40" Fill="Transparent" HorizontalAlignment="Center"
Stroke ="White" StrokeThickness="2" VerticalAlignment="Center"/>
< TextBlock x:Name="Glyph" Text="¼" FontFamily="Symbol" FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,-20,0,0"/>
</ Grid>
<TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" FontFamily ="Segoe UI" FontSize="12"/>
</StackPanel>
</ Grid>
</ ControlTemplate>
</ Setter.Value>
</ Setter>
</ Style>
<Style x:Key="BackButtonStyle" TargetType="Button">
< Setter Property="Background" Value="Transparent"/>
< Setter Property="Foreground" Value="red"/>
< Setter Property="BorderBrush" Value="Transparent"/>
< Setter Property="FontFamily" Value="Segoe UI"/>
< Setter Property="FontSize" Value="9"/>
< Setter Property="Template">
< Setter.Value>
< ControlTemplate TargetType="Button">
< Grid>
< VisualStateManager.VisualStateGroups>
< VisualStateGroup x:Name="CommonStates">
< VisualState x:Name="Normal"/>
< VisualState x:Name="MouseOver"/>
< VisualState x:Name="Pressed">
<Storyboard>
< ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
Storyboard.TargetName="ButtonEllipse" />
<ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="Glyph" />
</ Storyboard>
</ VisualState>
</ VisualStateGroup>
</ VisualStateManager.VisualStateGroups>
< StackPanel Orientation="Vertical">
<Grid Margin="0,14,0,5" >
< Ellipse x:Name="ButtonEllipse" Height="40" Width="40" Fill="Transparent" HorizontalAlignment="Center" Stroke="White" StrokeThickness="2" VerticalAlignment="Center"/>
<TextBlock x:Name="Glyph" Text="Ù" FontFamily="Wingdings 3" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center" />
</ Grid>
< TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" FontFamily ="Segoe UI" FontSize="12"/>
</ StackPanel>
</ Grid>
</ ControlTemplate>
</ Setter.Value>
</ Setter>
</ Style>
< Style x:Key="AppBarStyle" TargetType="ApplicationBar">
< Setter Property="Background" Value="black"/>
< Setter Property="Padding" Value="40,0,40,0"/>
</ Style>
</ UserControl.Resources>
< Grid x:Name="LayoutRoot" Background="White">
<!-- Content -->
< ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Row="1" ZoomMode="Disabled">
< StackPanel x:Name="ContentPanel">
< StackPanel x:Name="InputPanel" Orientation="Horizontal" HorizontalAlignment="Left">
< StackPanel>
< TextBlock Text="Input" Style="{StaticResource H2Style}"/>
< TextBlock Text="Select Section:" Style="{StaticResource H3Style}"/>
< ListBox x:Name="SectionList" Margin="0,0,20,0" HorizontalAlignment="Left">
< ListBox.ItemTemplate>
< DataTemplate>
< TextBlock Text="{Binding Name}"/>
</ DataTemplate>
</ ListBox.ItemTemplate>
< ListBoxItem x:Name="Section1" Foreground="DeepSkyBlue">
< TextBlock Style="{StaticResource ListBoxTextStyle}" Text="1) Transient app bars" />
</ ListBoxItem>
< ListBoxItem x:Name="Section2" Foreground="DeepPink">
< TextBlock Style="{StaticResource ListBoxTextStyle}" Text="2) Persistent app bars" />
</ ListBoxItem>
< ListBoxItem x:Name="Section3" Foreground="Firebrick">
< TextBlock Style="{StaticResource ListBoxTextStyle}" Text="3) Alternate dismissal modes" />
</ ListBoxItem>
</ ListBox>
</ StackPanel>
< StackPanel Margin="0,31,0,0" >
< TextBlock Text="Description:" Style="{StaticResource H3Style}"/>
< StackPanel x:Name="Description" MaxWidth="700">
<!-- Section 1 -->
< StackPanel x:Name="Section1Input">
< TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap">
App bars are transient by default, which means they start out hidden, and appear
or disappear only in response to a user gesture. To show and hide the transient app bars
swipe up from the bottom or down from the top of the app window, press CTRL+ALT+A, or right-click the window.
</ TextBlock>
< TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0">
</ TextBlock>
</ StackPanel>
<!-- Section 2 -->
< StackPanel x:Name="Section2Input" Visibility="Collapsed">
< TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap">
You can make app bars display at all times by setting the IsPersistent property to true.
Persistent app bars are useful when you have multiple commands that are necessary
for a user to complete an experience.
</ TextBlock>
< TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0">
Usage: <ApplicationBar IsPersistent="True" />
</ TextBlock>
</ StackPanel>
<!-- Section 3 -->
<StackPanel x:Name="Section3Input" Visibility="Collapsed">
< TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap">
You can change the way that app bars are dismissed by setting the DismissMode property.
The default value is EdgeSwipe, which requires an edge swipe gesture, right-click, or CTRL+ALT+A.
LightDismiss causes the app bar to disappear when the user interacts main part of the app, and
TimeDelay causes the app bar to disappear after a specified delay (5 seconds for the demonstration below).
</ TextBlock>
<TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0">
</ TextBlock>
< StackPanel Orientation="Horizontal" Margin="0,10,0,0">
< TextBlock Text="Dismiss Mode:" Style="{StaticResource DescriptionTextStyle}" VerticalAlignment="Center"/>
< RadioButton x:Name="EdgeSwipeButton" Margin="5" GroupName="Dismiss Mode"
Content ="Edge Swipe" Checked="EdgeSwipeButtonCheck" IsChecked="True"/>
< RadioButton x:Name="LightDismissButton" Margin="5" GroupName="Dismiss Mode"
Content ="Light Dismiss" Checked="LightDismissButtonCheck"/>
< RadioButton x:Name="TimeDelayButton" Margin="5" GroupName="Dismiss Mode"
Content ="Time Delay" Checked="TimeDelayButtonCheck"/>
</ StackPanel>
</ StackPanel>
</ StackPanel>
</ StackPanel>
</ StackPanel>
</ StackPanel>
</ ScrollViewer>
<!-- SectionOutput1 -->
< ApplicationBar x:Name="TopAppBar" Height="88" VerticalAlignment="Top" />
< ApplicationBar x:Name="BottomAppBar" Height="88" VerticalAlignment="Bottom" Style="{StaticResource AppBarStyle}">
< Grid>
< Grid.ColumnDefinitions>
< ColumnDefinition Width="*"/>
< ColumnDefinition Width="Auto"/>
</ Grid.ColumnDefinitions>
< Button Grid.Column="0" Content="Back" Style="{StaticResource BackButtonStyle}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
< StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top">
< Button Content="Refresh" Style="{StaticResource RefreshButtonStyle}" />
< Button Content="Refresh" Style="{StaticResource RateButtonStyle}" />
< Button Content="More" Style="{StaticResource MoreButtonStyle}" />
<Button Content="Forward" Style="{StaticResource ForwardButtonStyle}" />
</ StackPanel>
</ Grid>
</ ApplicationBar>
</ Grid>
</ UserControl>
Step 4 : After running this code we get the following output. Here we have to explain the three different points with different functionality:
![output1.gif]()
The Application Bar is transient by default which means that they start hidden and disappear. But when we right-click on the page then the Application bar is shown in this figure as below:
![output1.1.gif]()
At this point on the right-click we have shown the application bar which looks as below:
![output2.jpg]()
In the dismiss mode we choose the alternative modes:
![output3.jpg]()