Click here to Skip to main content
15,867,141 members
Articles / Desktop Programming / XAML

Adding an Application Bar to your XAML Metro applications

Rate me:
Please Sign up or sign in to vote.
4.63/5 (5 votes)
1 Nov 2011CPOL3 min read 20.9K   8  
A look at how to add an Application Bar to your XAML Metro applications.

Introduction

We are all familiar with the Application Bars in Windows Phone 7…

Image 1

It can be achieved with a few lines of code as shown below:

XML
<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 in 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.

Image 2

Once MainPage.xaml loads, replace the Grid with the following code snippet:

XML
<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.

Image 3

But you will quickly notice that all you have is a black screen.

Image 4

Note: Black screenshot added for laughs. Image 5

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.

Image 6

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.

XML
<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.

Image 7

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 with the 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: DismissMode and Delay. (We set this example to hide the application bar after 5 seconds.)

XML
<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 Top or Bottom.

Image 8

As you can see, several options exist.

Can I have both a Top Application Bar and a Bottom Application Bar?

Sure, just add in code similar to the following:

XML
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
    <!--Top App Bar-->
    <ApplicationBar Background="White" VerticalAlignment="Top" 
              DismissMode="TimeDelay" Delay="5000">
        <StackPanel>
            <Button Content="Top" Background="Black" />
        </StackPanel>
    </ApplicationBar>
 
    <!--Bottom App Bar-->
    <ApplicationBar Background="White" VerticalAlignment="Bottom" 
            DismissMode="TimeDelay" Delay="5000">
    <StackPanel>
          <Button Content="Bottom" Background="Black" />
    </StackPanel>
    </ApplicationBar>
</Grid>

What about adding an image to my button?

I did it the following way:

XML
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
    <ApplicationBar VerticalAlignment="Bottom" DismissMode="TimeDelay" >
        <StackPanel Orientation="Horizontal">
            <Button Content="Exit" x:Name="btnExit" />
            <Button >
                <Button.Content>
                    <Image Height="20" Width="20" 
                       Source="c:\users\mbcrump\documents\visual studio 11\
                         Projects\ApplicationBarSample\
                         ApplicationBarSample\Images\SmallLogo.png"/>
                </Button.Content>
            </Button>
        </StackPanel>
    </ApplicationBar>
</Grid>

I am pretty sure there are probably other more elegant ways, but I did it simply using my existing XAML knowledge and the image supplied by the project template. I wanted to see how much of the “use your existing skills” was true.

Image 9

Conclusion

It was pretty easy to get up to speed with the new Application Bar in XAML Metro applications. I am investing a lot of free time learning how to develop Metro applications using XAML/C#. If you are interested in more articles like these, then please look through the last few posts on my blog. Also, don’t forget to come back for more articles on a wide range of XAML technologies.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Telerik
United States United States
Michael Crump is a Silverlight MVP and MCPD that has been involved with computers in one way or another for as long as he can remember, but started professionally in 2002. After spending years working as a systems administrator/tech support analyst, Michael branched out and started developing internal utilities that automated repetitive tasks and freed up full-time employees. From there, he was offered a job working at McKesson corporation and has been working with some form of .NET and VB/C# since 2003.

He has worked at Fortune 500 companies where he gained experience in embedded systems design and software development to systems administration and database programming, and everything in between.

His primary focus right now is developing healthcare software solutions using Microsoft .NET technologies. He prefers building infrastructure components, reusable shared libraries and helping companies define, develop and automate process standards and guidelines.

You can read his blog at: MichaelCrump.net or follow him on Twitter at @mbcrump.

Comments and Discussions

 
-- There are no messages in this forum --