Windows 8 AppBarButtonStyles enumerated and visualized

As a result of the WinJS AppBarIcons post yesterday, I’ve received a fair number of requests asking to see how this compares to what’s available for XAML-based projects.

AppBarButtonStylesThe results are in, but they don’t quite stack up.

Download the full image

There are currently 29 options compared to the 150 options in WinJS.  Additionally some of the names and icons conflict or are used in different ways.  I’m hoping this is ironed out before the full Windows 8 release.

Instead of a property, the appearance of the Button is set via a Style where the name of the icon is used as a prefix to the string “AppBarButtonStyle”. The Styles are defined in the “StandardStyles.xaml” resource dictionary which is part of the basic project template.

Sample code:

This works fine and is inline with how XAML-based controls are styled, but after doing so much WinJS work I will say it feel a bit heavy compared to just setting a property.  Custom icons are defined by setting the to “AppBarButtonStyle” and setting the Content property of the Button to your own PNG file.

Overall, I prefer the WinJS choice of names and icon usage over those used in XAML, except for the “find/Search” icon. Since the icon looks like the OS-level Search charm, I believe it should be named “search” and not “find” in WinJS.

10 thoughts on “Windows 8 AppBarButtonStyles enumerated and visualized

  1. You may find it heavy because you already have WinJS defining them for you. If you remove that, then it would be the same effort. Unfortunately XAML doesn’t have a framework package like WinJS, so we chose to put the most commonly used ones in a ResourceDictionary. As you note, there is nothing preventing anyone adding more to their own definition…or frankly removing unused ones to not have the XAML parser load things it doesn’t need to load if they aren’t going to be used.

  2. Pingback: WindowsDevNews.com
  3. That didn’t work for me, but doing this worked:
    <Button HorizontalAlignment="Right" Style="{StaticResource DeleteAppBarButtonStyle}" AutomationProperties.Name="New Name"/>

  4. Thank you thank you Ali Naqvi! I dont know how many posts I’ve hunted through about customizing XAML appbar buttons where the response was the WinJS label property…

Leave a Reply