Getting rid of StandardStyles.xaml on Windows 8.1

Original author: Tim Heuer
  • Transfer
If you have ever created a Windows 8 application using XAML, then you most likely could see a file called StandardStyles.xaml added to your application in the Common folder. Since I saw many developed applications, I had to observe that people quite often attribute this file to system components and do not modify it at all. Sometimes it’s good, but more often it’s bad. Among the applications that I came across were many that do not use styles from this resource dictionary at all, but do nothing to trim the file or delete it altogether, since it is not needed.
This file has been added to Visual Studio Windows 8 project templates to help stylize some areas of the template. Looking for better Windows 8.1 performance, we noted that developers do not delete this file or unused styles from this file. We also noticed that there are some advantages to including this file in the framework, as we implemented some styles / delayed loading patterns in Windows 8.1 itself. For this reason, for almost all applications that we have observed in practice, the styles available in the Windows 8 / VS2012 StandardStyles.xaml file can be removed from the application and replaced with the styles contained in the XAML framework.

Text styles


Most of the file’s functions were to provide some text styles that matched the typographic font table for the Windows design language. About 100 lines of text styles can now be transferred to the new styles provided by the framework. The following is a comparison of what you should replace in your Windows 8.1 application:
StandardStyles.xaml (in VS 2012)names provided by Windows 8.1 XAML
BasicTextStyleBaseTextBlockStyle
BaselineTextStyleunavailable (combined with BaseTextBlockStyle)
HeaderTextStyleHeaderTextBlockStyle
SubheaderTextStyleSubheaderTextBlockStyle
TitleTextStyleTitleTextBlockStyle
SubtitleTextStyleSubtitleTextBlockStyle
BodyTextStyleBodyTextBlockStyle
CaptionTextStyleCaptionTextBlockStyle
BaseRichTextStyleBaseRichTextBlockStyle
BaselineRichTextStyleunavailable (combined with BaseRichTextBlockStyle)
BodyRichTextStyleBodyRichTextBlockStyle
ItemRichTextStyleunavailable (was the same as BodyRichTextBlockStyle)

Replacement is quite simple, because in places where you used {StaticResource SomeTextStyle} you should use {StaticResource FrameworkProvidedStyle} (of course, specifying the correct name correctly). As in other cases when making changes, test your application to make sure that your UI exactly matches your expectations. If you need to continue changing the style, then you can use these styles in order to create your BasedOn of your own.

Button Styles


Another component was a set of button styles like the back button, text block buttons, and the most used AppBarButton styles. The TextButtonStyle style is now a TextBlockButtonStyle and serves as a stylized button for areas such as clickable GridView header sections, etc.
There were also several styles for the back button. After introducing AppBarButton in Windows 8.1, we can offer a better / special style template, provided right away with the right characters for the arrows. Instead of using BackButtonStyle / SnappedBackButtonStyle from StandardStyles.xaml you should use NavigationBackButtonNormalStyle and NavigationBackButtonSmallStyle. The Normal style is the basic style that you should use on the pages and is equal to the standard 41x41 px button. The Small style is a 30x30 px button style that you can use for a narrow state (previously called snapped) or in other cases.
Probably one of the most used objects was the AppBarButton styles. About 1100 lines of style for a set of styles of various appbar button symbols. Now we provide you with standard buttons that are optimized for the UI and currently have 190 different types of icons. As an example, here is what you might have in a Windows 8 application:

And now it can be replaced by:

This reduces the need for the AppBarButtonStyle base style, as well as other icon styles. If you need the ability to write RTL text, then you can add the FlowDirection property. The Label property will be directly mapped to AutomationProperties.Name by default, including for direct access needs.

List / Grid Element Templates / Styles


Grid / Split templates also previously contained element template styles for use on pages with these templates. In search of a place where they are actually used, they were transferred only to the pages that need them. Many people think that their styles / templates should be in App.xaml, but this is not so, and as a rule, this is not a very good solution in terms of speed. If your style is used only on one page, then place it in the resources of this page! This is what was done in the specific styles for the VS 2013 project templates. Some have been removed in accordance with the application size guide.

Using Visual Studio 2013 to edit styles


You can ask yourself how it can be used all this, know all this or even how you can learn all this from memory! Fortunately, Visual Studio 2013 added some great features to the tools in order to add more visibility to these new styles. The resource panel has remained in its place and shows the styles provided by the framework since, for example, in the following screenshot in Blend:

Even if you prefer the editor, there is still good news for you, since IntelliSense for styles has been added to VS !!! If you use StaticResource you will get autocomplete of styles that apply to the style of the element on which you are now. For example, on TextBlock you will see only styles that are applicable to TargetType = TextBlock, as shown in the following screenshot:

This IntelliSence will work just as well with your personal custom styles, and this is a great improvement in tooling performance. This is one of my favorite VS innovations!
If you want to see all the details of these styles, then you can use the wonderful template editing feature in Visual Studio / Blend to inspect them all. If you have a style, then just press F12 (Go to Definition / Go To Definition), while the cursor is on the name of the style. This will take you to defining a style in the generic.xaml framework:

This great productivity-enhancing feature is available for all XAML styles, again including your own. These styles can also be inspected manually by viewing the generic.xaml file that the Windows SDK provides us (located in% programfiles% \ Windows Kits \ 8.1 \ Include \ WinRT \ XAML \ Design).

Summary
One of the main goals was to improve the overall performance of Windows 8.1 for all users. Optimizing the movement of all the most used styles inside the framework gave developers new advantages for consistency and productivity as a community of users using common templates, as well as reducing the load / parsing time for each application individually necessary to provide these styles.

Hope this helps you!

Also popular now: