Windows 8: Creating Great App Bar Buttons

With chrome pushed out of Windows 8 Store applications, most of the navigation has been moved into the AppBar.  A good AppBar has buttons that are easy to reach and easy to recognize.

You can create your own images for the app bar, but it is rarely necessary. Instead, you can take advantage of the 150+ variations of AppBarButtonStyle in the StandardStyles.xaml file.  These are commented out by default, so just uncomment the ones you want, and they are as easy to use as,

<Button x:Name="DeleteEvent"

        Style="{StaticResource DeleteAppBarButtonStyle}"

        Click="DeleteEvent_Click_1" />

 

This places the button and its text right into your appbar.  Of course, there are times that you need an icon that is not available in the StandardStyles.xaml.  Before you create your own, however, open the Character Map application that comes with Windows 8, and set the drop down to Segoe UI Symbol,

CharacterMap

Notice that when you select one of the images, the hex code (E1D6) is displayed.  We can use that to place the image into our appbar,

<Button x:Name=”Record”
        Style=”{StaticResource AppBarButtonStyle}”
        AutomationProperties.Name=”Record”
        Click=”Record_Click”>&#xE1D6;</Button>

Here we’ve placed the hex value of the symbol we want between the open and close tags.  We’ve also placed the caption for the button in the AutomationProperties.Name field, which is used by the styles to create the text value for the TextBlock below the icon.

AppBarAs you can see, the images are placed in a circle,  the text is placed below and you end up with a very professional looking AppBar. 

Share

About Jesse Liberty

Jesse Liberty is a Master Consultant for Falafel Software, and has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Technical Evangelist for Telerik and for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS.
This entry was posted in Mini-Tutorial, Windows 8 and tagged . Bookmark the permalink.

5 Responses to Windows 8: Creating Great App Bar Buttons

  1. test website says:

    Awesome blog! Do you have any hints for aspiring writers? I’m hoping to start my own blog soon but I’m a little lost on everything. Would you suggest starting with a free platform like WordPress or go for a paid option? There are so many choices out there that I’m totally confused .. Any tips? Kudos!

  2. Pingback: Windows Store Developer Links – 2013-02-07 | Dan Rigby

  3. Pingback: Windowsストアアプリ入門 vol88:アプリケーションバーのアイコンの確認について | 眠るシーラカンスと水底のプログラマー

  4. Terrance says:

    Hey, not that I have an affiliation with these guys or anything but they have a free application that does search the character map and generate xaml from the result as an alternate way of using an image without using an image.

    Metro Studio.

  5. Naga Harish says:

    Hi,

    This is really good idea. No need to place images..

    I will try to check this in Win Phone also. If it works I will write a post and giving Cr to your site :)

    Thanks for Sharing :)

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>