Geeks With Blogs

News
Michael Crump Microsoft MVP, INETA Community Champion and XAML Advocate.

 

Introduction

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

image

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.

 image

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. 

image

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

image

Note: Black screenshot added for laughs. Smile

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

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.

image

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. 

image

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

<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

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 Application using XAML/C#. If you are interested in more articles like these then please look through my last few post on my blog. Also, don’t forget to come back for more articles on a wide range of XAML technologies.

mike_new_avatar Michael Crump is a Silverlight MVP and MCPD that works for Telerik as a XAML Evangelist. He 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.

You can follow Michael on Twitter or keep up with his blog by visiting michaelcrump.net or subscribing to his RSS Feed.
Posted on Wednesday, October 12, 2011 6:38 AM | Back to top

Copyright © mbcrump | Powered by: GeeksWithBlogs.net | Join free