×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

An old colleague of mine and now HTML extraordinaire, Adam Kinney, just recently posted on his spelunking of some styling in both WinJS and XAML runtimes with regard to icons/buttons to use in a Metro style app and the AppBar.

Adam has two posts:

Basically what these do is define a set of styles, both in CSS and XAML, that map back to unicode values in the Segoe UI Symbol font.  This contains a set of glyphs that are well-suited for use within an AppBar.  As an example in WinJS you would use:

   1: <button data-win-control="WinJS.UI.AppBarCommand" 
   2:         data-win-options="{icon:'back', label:'Back'}"><button>

And in XAML you would use:

   1: <Button Style="{StaticResource PreviousAppBarButtonStyle}" />

One thing that Adam points out is that WinJS includes definitions for a LOT of styles while the included StandardStyles.xaml file (provided for you when you create a new project in Visual Studio) defines a much smaller subset.  When determining what styles to include in the XAML set, we opted for choosing the most common rather than to bloat the ResourceDictionary with things you may not use.

NOTE: Even within the provided one, you should always make it a best practice to REMOVE styles/templates that you aren’t using so the parser doesn’t have to worry about them.

Adam also notes that he likes the style of defining the WinJS ones a bit better as he mentions the XAML syntax feels heavy.  I commented on his blog that WinJS is doing a lot of work for him here that has already defined the style.  If WinJS didn’t exist, surely it would be ‘heavy’ in defining them.  I’m still not sure why the XAML one feels heavy (once you just assume that a definition has been made for you in the ResourceDictionary provided – especially when I look above, they basically both look the same…but I digress.

One thing that I wanted to point out was how the tools, Visual Studio and Blend, help make it way easy to choose and quickly visualize these styles on the design surface.  For HTML/JS apps you need to use Blend for this as VS doesn’t support this feature at this time.  When in Blend in your HTML/JS app you can open up the control palette and see a helper for AppBar Command Button:

Blend and AppBar Command Button

And this produces a generic button definition much like above:

   1: <button data-win-control="WinJS.UI.AppBarCommand" 
   2:         data-win-options="{label:'Button', type:'button'}"></button>

What you can’t do from now (that I could see) is quickly pick from a set of those data-win-options to choose which one you want…so you still have to know what the definition is that you want for the icon/label.  Let’s contrast that with the XAML experience with strongly-defined styles.  In VS or Blend I can use the resource picker to pick from a set of styles that apply to my control type, in this case button:

Blend for XAML AppBar Resources

I can quickly change and see the option on the design surface.  Now again, if you don’t need all these styles, then please delete what you aren’t using from your ResourceDictionary.

It is great that we have design-time implementations of these styles and of course I’m partial to the XAML one as more familiar to me.  Adam pointed out the discrepancy of not having all the styles defined.  As I note, you shouldn’t have defined what you don’t need, but in the spirit of adding value, here’s an updated StandardStyles.zip with all the 150 icons defined.

Hope this helps!


This work is licensed under a Creative Commons Attribution By license.


5/7/2012 8:11 PM | # re: XAML AppBar Button Styles for Windows 8
What about custom icons? Would these be in SVG or PNG? Are there any resources available that give guidelines on how to create and implement?
5/8/2012 2:06 PM | # re: XAML AppBar Button Styles for Windows 8
@Isultani - you can use custom icons too -- either Path data, PNG files, whatever...you would have to set the content to whatever you want. I recommend looking at thenounproject.com for a good source of metro-ish icons
6/5/2012 8:27 PM | # re: XAML AppBar Button Styles for Windows 8
Updated Standard Styles do not work with Release Preview Windows 8. :(
6/5/2012 8:43 PM | # re: XAML AppBar Button Styles for Windows 8
@Galadrius - yes see http://aka.ms/rpdevdoc and change the brush names where there were breaking changes.
6/10/2012 11:27 PM | # re: XAML AppBar Button Styles for Windows 8
Hi Tim,

I am just starting with the UI of a Metro Style App. The default Button styles has a whitish grey button.... for which I am able to change the styles. But, I need to get rid of the default Mouse Over, click event styles too and add my own style..... I tried to do that in the ResourceDictionary using - Style.Triggers

something like -

<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Foreground" Value="#FFFFFFFF" />
<Setter Property="Background" Value="#FF4214b5" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="12" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF4214b5"/>
<Setter Property="Foreground" Value="#FFffffff"/>
</Trigger>
</Style.Triggers>
</Style>

But the Style.Triggers says error.........

Kindly help me........... Thanks in Advance........

Thanks & Regards,

Thendral
6/11/2012 12:59 PM | # re: XAML AppBar Button Styles for Windows 8
@Theandral - you need to re-template the control and it will give you the full definition. These are in the VisualState definitions of the control which you will see when you re-template.
7/12/2012 8:00 PM | # re: XAML AppBar Button Styles for Windows 8
Hi lsultani,

There's a lot of conflicting specs floating around the web regarding Metro app bar icons, including Windows 8 Metro Icon Sets for purchase that tout the 'correct size specs' but seem to be just Windows Phone 7 compatible, not Windows 8.

Based on the latest UI graphical templates and general guidelines provided by Microsoft for Windows 8, the latest size and format specs for designing custom app bar icons are as follows:

a) Developers can use 40x40 pixel metro styled pngs, jpgs, or svg vector files for icons on the ‘App Bar’.

b) Due to the default automatic scaling sizes of Windows 8 layout on different screen resolutions, pngs/jpgs are recommended to be supplied in 40x40 (100%), 56x56 (140%) and 72x72 (180%) to ensure sharp icons.

Sources below:

http://msdn.microsoft.com/en-us/windows/apps/br229516.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/hh780612.aspx#minimum_screen_resolutions
8/4/2012 8:31 PM | # re: XAML AppBar Button Styles for Windows 8
Many thanks Tim, really useful!
8/8/2012 5:59 AM | # re: XAML AppBar Button Styles for Windows 8
Hi Tim,

You were a little too terse for me in your answer to "Isultani". Could you please elaborate on just how you would a custom SVG as a glyph in an AppBar button. I have been looking at doing this without success. I have read all the above links plus some but as soon as I use the predefined styles with base AppBarButtonStyle my panel based SVG does not show. Normally Blend would show a translation problem by "ghosting" the content in another position. However the current Blend 2012 RC does not seem to support this old functionality.

Regards,
Graham
8/13/2012 1:15 PM | # re: XAML AppBar Button Styles for Windows 8
I've re-written the Style to use the new Brush names in the Windows 8 RP. I've posted the re-written Style XAML here:
nonsenseinbasic.blogspot.com/...
1/17/2013 5:57 PM | # re: XAML AppBar Button Styles for Windows 8
Hi Tim,
Hope you can help me on this.
I saw this shopping cart glyph on the Video and Music App in Windows 8 but I can't find it on the Segoe UI Symbol list. Can you help me out on how I can use the same shopping cart glyph if it is indeed a glyph.

Many Thanks!

-Michael

 
Please add 4 and 7 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.