For Microsoft Kool-Aid Drinkers, Non-paid MS Evangelists written by a Senior Consultant, Passionate about Tech

Metro Studio, Part 4 – Application Bars!


Okay, we have finally made it to our final post on using the awesome tool, Metro Studio, by Syncfusion to create great assets for your Windows Phone Application.  Hopefully you got something out of the last three posts:

Metro Studio, Part 1 – Splash Screen

Metro Studio, Part 2 – Icons and Tiles

Metro Studio, Part 3 – Background

Todays focus is going to be on creating a quick application bar using the plethora of icons available in Metro Studio.  It is amazing how quickly we can create a great looking application bar for our application.  So, let’s get to it.

Before we get started, I have a little bad news.  My system crashed the other day and I lost the Metro Studio project that we were using for the previous posts.  I did, however,  have the Visual Studio project backed up, so we are good there.  I won’t be going back to create everything the way it was before, so, hopefully you are smarter than me and back up your work.  Okay, what do we do next?

First, let’s decide what should we do to demonstrate?  How about we add an application bar that will allow us to quickly navigate to the web versions of Facebook, Twitter and LinkedIn.  Let’s also add a button to go to a page within our application.  Okay, now we can get started and open up Metro Studio and create our icons.

Open up Metro Studio.  To search for the icons we need for your social media sites, type in Social in the search box and hit enter.  From here, you will see icons for Facebook, Twitter and LinkedIn.  Since I am the bonehead that lost my previous project, I am going to select these icons and create a new one called Social Media App Bar, but you should be able to use your current Splash Screen project if you would like.  Simply drag and drop them onto your SplashScreen project.  Let’s also type in Test in the search box and hit enterDrag and drop the Instrument-Test-Tube icon into our project.  The project will look similar to this (except mine says Social Media).  Once they are all in the project, let’s select the edit icon that shows up when we hover over the project.

SocialMediaProject  EditProject

Rename the icons to Facebook, Twitter, LinkedIn and TestSelect all the icons, set Size to 48px, Padding to 14px, select the hollow circle Background Shape and set the Background Color and Icon Color to white (#FFFFFFFF).


Now, let’s select Export and select your projects Asset directory.  I created a Menu folder in my Assets folder.


You will need to include them in your project and make sure you set the properties on them.  You should set the Build Action to Content and Copy to Output Directory to Copy if newer.


We want to quickly add a test page that we can navigate to, so, right click on the project and add a New Item


Select Windows Phone Portrait Page, rename the page to Test.xaml and select Add.


You should now see it in your editor and in your solution.  Quickly change the title of the page so it is obvious when we navigate there to Test Page.  I assume you know how to do this…


Okay, now let’s start slinging some code around.  First up, let’s add some markup (XAML).  Open up the main page, MainPage.xaml.  From here we will add the application bar element to the bottom of the page.  It should look something like the following:

   1: <phone:PhoneApplicationPage.ApplicationBar>
   2:     <shell:ApplicationBar IsVisible="True">
   3:     </shell:ApplicationBar>
   4: </phone:PhoneApplicationPage.ApplicationBar>

Now we need to create our ApplicationBarIconButtons for our new icons and add Click events for each.  Once we do this, it should look something like this:

1: <phone:PhoneApplicationPage.ApplicationBar>

   2:     <shell:ApplicationBar IsVisible="True">
   3:         <shell:ApplicationBarIconButton IconUri="/Assets/Menu/Facebook.png" Click="Facebook" Text="Facebook"/>
   4:         <shell:ApplicationBarIconButton IconUri="/Assets/Menu/Twitter.png" Click="Twitter" Text="Twitter"/>
   5:         <shell:ApplicationBarIconButton IconUri="/Assets/Menu/LinkedIn.png" Click="LinkedIn"  Text="LinkedIn"/>
   6:         <shell:ApplicationBarIconButton IconUri="/Assets/Menu/Test.png" Click="Test" Text="Test"/>
   7:     </shell:ApplicationBar>
   8: </phone:PhoneApplicationPage.ApplicationBar>

Open up MainPage.xaml.cs, in hopes that you know how to add the handlers for the events, (hint: right click on the Click in the ApplicationBarIconButton and select Navigate to  Event Handler), all we have left to do is add the code to navigate to the websites and our new Test page.  This is what the code should look like:

   1: private void Facebook(object sender, EventArgs e)
   2: {
   3:     var task = new WebBrowserTask
   4:     {
   5:         Uri = new Uri("")
   6:     };
   7:     task.Show();
   8: }
  10: private void Twitter(object sender, EventArgs e)
  11: {
  12:     var task = new WebBrowserTask
  13:     {
  14:         Uri = new Uri("")
  15:     };
  16:     task.Show();
  17: }
  19: private void LinkedIn(object sender, EventArgs e)
  20: {
  21:     var task = new WebBrowserTask
  22:     {
  23:         Uri = new Uri("")
  24:     };
  25:     task.Show();
  26: }
  28: private void Test(object sender, EventArgs e)
  29: {
  30:     NavigationService.Navigate(new Uri("/Test.xaml", UriKind.Relative));
  31: }

You will notice that for each icon in the application bar, we have a Click event handler that is represented above.  We use the WebBrowserTask to call up the browser and navigate to the external websites and use the Navigate() call in the NavigationService to navigate to our internal Test Page.

Now, run the application and you should see something like below.  Try using our new application bar!  It should work, unless I messed up or you copied my code wrong.  lol


So, you can see that it is really easy to create application bar icons using Metro Studio by Syncfusion.

NOTE:  you can always create the application bar from code and assign the icons to the ApplicationBarIconButton items, however, I decided to just simply put it in the simple XAML in our page.  You could also grab the XAML buttons as resources from Metro Studio by selecting your icons, hitting the XAML button on the bottom of the editor screen, selecting the XAML that is presented, copy and paste it into your application as a resource dictionary into the appropriate place.  The resource defines each icon as a Viewbox that you can use in your code.  We won’t do that this time around, but I did want to mention it if you are a resources guru.



Well, this finalizes my series on using Metro Studio by Syncfusion.  I really hope that you enjoyed the series.  If you have any questions or concerns, feel free to contact me or my friends at Syncfusion.  I would feel blessed if you shared these posts with your friends and/or colleagues.

I hope to start reviewing their Essential Studio for WinRT XAML and Windows Phone products soon, so keep your eyes peeled.  There will also be a raffle for Essential Studio for WinRT XAML soon.

Don’t forget to follow me on Twitter, @edyg023


No comments yet.

Leave a Reply

You must be logged in to post a comment.