×

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!

If you’ve created a Windows 8 app using XAML then you’ve likely seen a file in the project called StandardStyles.xaml in the Common folder and merged in with your application.  As I’ve seen apps developed I’ve seen people pretty much treat this as a system component and not change it at all.  Sometimes that’s good, but mostly it has been bad.  There are a lot of apps that I’ve seen that don’t use a lot of the styles in that dictionary, but don’t do anything to trim the file or even remove it if not needed.

The file was included in Windows 8 Visual Studio project templates to help style some areas of the template.  In looking at performance in Windows 8.1 we saw that people were not removing this file or unused styles in this file.  We also saw that there was benefit to including some of these styles in the framework because of some styles/template deferred loading we implemented in Windows 8.1.  As such for almost all apps we’ve seen in practice, the styles provided in Windows 8/VS2012’s StandardStyles.xaml file can be removed from your application and replaced with styles in the XAML framework.

Text Styles

A big portion of the file is providing some text styles that map to the typographic ramp for the Windows design language.  Roughly 100 lines of text styling can now be migrated to new framework-provided text styles.  Here’s a mapping of what you should examine replacing with in your Windows 8.1 app:

StandardStyles.xaml (in VS 2012) Windows 8.1 XAML Framework-provided name
BasicTextStyle BaseTextBlockStyle
BaselineTextStyle n/a (merged with BaseTextBlockStyle)
HeaderTextStyle HeaderTextBlockStyle
SubheaderTextStyle SubheaderTextBlockStyle
TitleTextStyle TitleTextBlockStyle
SubtitleTextStyle SubtitleTextBlockStyle
BodyTextStyle BodyTextBlockStyle
CaptionTextStyle CaptionTextBlockStyle
BaseRichTextStyle BaseRichTextBlockStyle
BaselineRichTextStyle n/a (merged with BaseRichTextBlockStyle)
BodyRichTextStyle BodyRichTextBlockStyle
ItemRichTextStyle n/a (was same as BodyRichTextBlockStyle)

 

The replacement is pretty simple as wherever you were using {StaticResource SomeTextStyle} you would now change to {StaticResource FrameworkProvidedStyle} (obviously using the correct names).  As with anything, when making these changes test your app to ensure your UI fidelity remains as you expect.  Should you need to continue to style some of the above, you could use these as your BasedOn starting point.

Button Styles

Another area was a series of Button styles around Back button, TextBlock buttons and the most used AppBarButton styles.  TextButtonStyle is now TextBlockButtonStyle and serves as a styled Button for areas like GridView clickable section headers, etc. 

There were also a few Back button styles.  With the introduction of AppBarButton in Windows 8.1, we can provide a better/specific template style provided in the framework with the right glyphs for the arrows.  Instead of using the BackButtonStyle/SnappedBackButtonStyle in StandardStyles.xaml you should use NavigationBackButtonNormalStyle and NavigationBackButtonSmallStyle.  The normal style is the main one that you would use on pages and is the 41x41px standard back button.  The small style is the 30x30px smaller button that you might use for a narrow (formerly snapped) view or other areas.

Perhaps one of the most used areas were the AppBarButton styles.  There is roughly 1100 lines of styling for a series of button styles for the various popular glyphs of AppBar button styles.  We are now providing a typed button that is optimized for that UI and we now have included 190 icon types as a part of the base.  As an example this is what you might have had in your Windows 8 app:

<Button Style="{StaticResource PlayAppBarButtonStyle}" />

And can now be replaced with:

<AppBarButton Icon="Play" Label="Play" />

This reduces the need for the base AppBarButtonStyle as well as the others that were glyph-specific.  If you need them to be RTL specific, just add the FlowDirection property as you need it for your app.  The Label property will map directly through to the AutomationProperties.Name value by default as well for the accessibility needs.

List/Grid Item Templates/Styles

In the Grid/Split templates there were also style item templates for the use in the pages within these templates.  In looking where they were actually used, these were moved to only the pages that need them.  Many people think that your styles/templates must be in App.xaml, but this is not true and most of the time not a good performance decision.  If your style is only used in one page, put it in the resources of that page!  That is what was done with these specific styles for the VS 2013 project templates.  Some were removed in accordance with new guidance around app sizes as well.

Using Visual Studio 2013 for Styling

You may ask yourself now how you would use this or know about them or even remember them!  Luckily Visual Studio 2013 added some great new features in the tools to bring more visibility to these styles.  The resource pane is still there and would show the framework-provided styles as seen here in Blend:

System Resource style selection image

If you are an editor-only person, there is still great news as VS added Style IntelliSense!!!  As you use StaticResource you will get auto-completion on the styles that apply to that style you are on.  For example on TextBlock you will only see Styles that apply to TargetType=TextBlock as seen here:

VS Style IntelliSense image

This IntelliSense will work with your own custom styles as well and is a great productivity enhancement to the tools.  This one of my favorite new features of VS!

If you want to see the details of these styles you can use the great template-editing features in Visual Studio/Blend to inspect them as well.  Once you have the style you can now also F12 (Go to definition) on the Style itself!!!!  This will take you to the definition of the style in the framework’s generic.xaml:

Style Go to definition example

This is an amazing productivity feature that is available for all Styles in XAML, again including your own!  These styles can be manually inspected by looking at the generic.xaml that ships in the Windows SDK (location %programfiles%\Windows Kits\8.1\Include\WinRT\XAML\Design).

Summary

One of our main goals was continue to improve overall app performance for Windows 8.1 for all users.  This optimization of bringing most commonly used styles into the framework benefits developers for consistency and productivity as well as all users for shared use of these templates and reduced load/parse time for each individual app needing to provide some of these core styles.

Hope this helps!


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


Gravatar
10/29/2013 9:28 AM | # re: Getting rid of StandardStyles.xaml in Windows 8.1
Hey Tim, how do you access the AppBarButton icons if we want to use them in a standard <Button> ? Button does not have an Icon property and if I understand this correctly, the icons are no longer accessible as StaticResources?
Thanks,
Bob
10/29/2013 10:29 AM | # re: Getting rid of StandardStyles.xaml in Windows 8.1
@Bob -- good question. The "icons" in the styles are actually just glyphs from the Segoe UI Symbol font. So to be used anywhere else in your app you can just use a TextBlock with the FontFamily=Segoe UI Symbol and the Unicode glyph code that you want to use. I like to use Character Map on Windows (included in the system) to help me find the Unicode value easily.
10/30/2013 1:22 AM | # re: Getting rid of StandardStyles.xaml in Windows 8.1
Hi Tim.
Editing 8.1 Template of backButton (Style "NavigationBackButtonNormalStyle") in Blend doesn't work correctly.
After Edit Template -> Edit a Copy, the backButton loses its content Glyph. Now if i want to edit the backButton i have to copy the Style from Windows Kits\8.1\Include\WinRT\XAML\Design and then edit.
10/30/2013 8:08 AM | # re: Getting rid of StandardStyles.xaml in Windows 8.1
Hi Tim,

great and informative article, I like it. As usual, perfect written! :-)

@Bob: As an alternative to Tims answer you can also use SymbolIcon and other Icon-classes directly in a normal button, as all Icon-classes inherit from IconElement that itself inherits from FrameworkElement. So e.g. in my last app I've created a Save-Button implemented like this:

<Button Command="{Binding SaveCommand}" Height="50" Margin="10 10 10 0">
<StackPanel Orientation="Horizontal">
<SymbolIcon Symbol="Save"/>
<TextBlock FontSize="14.66" Text="Save" VerticalAlignment="Center"/>
</StackPanel>
</Button>
9/11/2014 2:35 PM | # re: Getting rid of StandardStyles.xaml in Windows 8.1
Tim -
I'm converting my Win 8.0 app to 8.1. The original app uses some non-standard app bar button icons from elsewhere in the Segoe UI Symbol font. For instance, it use the Unicode WHITE HEAVY CHECK MARK character as the symbol associated with a "Checklist" page. This was accomplished by adding custom elements to StandardStyles.xaml.

So I've changed the app bar code to CommandBar with AppBarButton(s):

<Page.TopAppBar>
<CommandBar>
<AppBarButton Label="Checklist" Icon="✅" Click="Checklist_Click"/>
...
</CommandBar>
</Page.TopAppBar>
But at runtime this and other non-standard glyphs throw an XamlParseException:
WinRT information: Failed to create a 'Windows.UI.Xaml.Controls.IconElement' from the text '✅'.

Doesn't matter whether I specify it as "&#x2705;" or ✅, same results. Any suggestions, e.g., how to create a custom IconElement? I hope I don't have to go to bitmaps. Thanks.
9/11/2014 3:11 PM | # re: Getting rid of StandardStyles.xaml in Windows 8.1
@Glenn - do this:
<AppBarButton Label="Checklist">
<AppBarButton.Icon>
<FontIcon FontFamily="Segoe UI Symbol" Glyph="&#x2705;" />
</AppBarButton.Icon>
</AppBarButton>
9/12/2014 9:29 AM | # re: Getting rid of StandardStyles.xaml in Windows 8.1
Tim -
Thanks, works like a charm... with Glyph="✅" form too.
Glenn

 
Please add 4 and 8 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.