We are all familiar with the Application Bars in Windows Phone 7…
It can be achieved with a few lines of code as shown below:
<phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar> <shell:ApplicationBarIconButton IconUri="/icons/download.png" IsEnabled="True" /> <shell:ApplicationBarIconButton IconUri="/icons/settings.png" IsEnabled="True" /> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem x:Name="mnuReturnToHome" Text="return to home" Click="mnuReturnToHome_Click" /> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar>
We want to do the same thing with our new XAML Metro Applications. The good news is that it is just as easy as the Windows Phone 7 with a few other cool features.
Let’s get started…
Fire open Visual Studio 11 and select File->New Project. Then select Visual C# –> Windows Metro Style –> Application and give it a name and hit OK.
Once the MainPage.xaml loads then replace the Grid with the following code snippet:
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C"> <ApplicationBar VerticalAlignment="Bottom"> <StackPanel Orientation="Horizontal"> <Button Content="Exit" x:Name="btnExit" /> </StackPanel> </ApplicationBar> </Grid>Now you should be able to run the project with a simple Ctrl+F5 or from the Debug menu.
But you will quickly notice that all you have is a black screen.
Note: Black screenshot added for laughs.
App bars are transient by default which means they start out hidden and only appear in response to a gesture or in this case a right mouse click. If you right click on the application (if using an emulator or a non-tablet device) you will see the application bar appear.
You can also press CTRL+ALT+A if you are a keyboard kind of guy/gal.
I want my app bar always visible!
You can make the app bars display at all times by setting the IsPersistent property to True.
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C"> <ApplicationBar VerticalAlignment="Bottom" IsPersistant="True"> <StackPanel Orientation="Horizontal"> <Button Content="Exit" x:Name="btnExit" /> </StackPanel> </ApplicationBar> </Grid>
How do you change the way app bars are dismissed?
You can change the way that app bars are dismissed by setting the DismissMode property.
From the documentation:
- 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.
In the sample code below you will see that we set two properties. The DismissMode and Delay. (We set this example to hide the application bar after 5 seconds).
<ApplicationBar Background="White" VerticalAlignment="Bottom" DismissMode="TimeDelay" Delay="5000"> <StackPanel> <Button Content="Bottom" Background="Black" /> </StackPanel> </ApplicationBar>
Is my app bar limited to the bottom?
No You may change the VerticalAlignment to any of the following values. The only one that I found beneficial was the Top or Bottom.
As you can see several options exist.
Can I have both a Top Application Bar and a Bottom Application Bar?
Sure just add in the code similar to the following:
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C"> <!--Top App Bar--> <ApplicationBar Background="White" VerticalAlignment="Top" DismissMode="TimeDelay" Delay="5000