This document discusses Windows 8.1 themes. It covers the RequestedTheme property, static and dynamic resources, theme dictionaries, styles, theme-dependent brushes, theme generation using HAMMER.Pants, handling elements that should appear the same regardless of theme, and dynamicizing static resources. The document provides links to additional resources on these topics.

1. Windows 8.1 Themes
JIM O’NEIL
BLUEMETAL ARCHITECTS
HTTP://CODOCENT.COM
http://bit.ly/Win81Themes
http://bit.ly/Win81Themes

2. Agenda
RequestedTheme
Resources
Theme Dictionaries
Styles
Theme Generation
RequestedTheme (redux)
Dynamicizing Static Resources

3. Requested Theme
Application.Current.RequestedTheme
◦ Values
◦ Light
◦ Dark (default)
◦ High-contrast (Alt+Left Shift+PrntScn) setting overrides
◦ Can be set only at startup
◦ App.xaml
◦ In constructor code for the application
http://bit.ly/AppRequestedTheme
Yes, even in 8.1. 8.1 can detect
change to high contrast though.

4. Resources
Static Dynamic Theme
All XAML platforms WPF Windows 8.1 (Phone and Modern
App)
Assigned during loading Evaluated at runtime Static + reaction to theme
changes
{StaticResource MyBrush} {DynamicResource MyBrush} {ThemeResource MyBrush}
No forward references Forward references supported No forward references
http://bit.ly/ThemeResources
Reusable XAML elements
◦ Brushes
◦ Styles
◦ Converters

5. ThemeResource Dictionaries
Shipped in SDK for convenience, but files not used at runtime
◦ C:Program Files (x86)Windows Kits8.1Includewinrtxamldesign
Default (aka Dark)
Light
HighContrast
<?xml version="1.0" encoding="utf-8"?>
<ResourceDictionary
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Name="BlockFill"
Color="Red">
…
http://bit.ly/ResourceDictionary

6. Theme Dictionary Organization
Define distinct XAML files to store resource values by theme

7. Styles
Controls in XAML-based technologies are “lookless”
Styles get applied implicitly or explicitly
Each built-in control has an implicit style (stored, but not loaded from, generic.xaml)
http://bit.ly/AddingControls
Explicit Style

8. Theme-dependent brushes
Over 350 named brushes with dark, light, and system color (high contrast) mappings
Used in control style and template definitions
Each ends in “ThemeBrush”
http://bit.ly/ThemeResources

9. Theming and Styles
Implicit styles and templates for controls can be found:
◦ In generic.xaml in the SDK folder
◦ At the Windows Dev Center: http://bit.ly/AddingControls
Dev Center documentation includes cut-and-pasteable
◦ Dark theme brush definitions
◦ Light theme brush definitions
◦ Shared resources
◦ Default style definition
http://bit.ly/AddingControls

10. Theme Generation
Challenge: Each control has a palette of theme color resources for various states (selected,
pointer over, disabled, etc.) How do you create a consistent set of brush defintions around a
base theme color?
HAMMER.Pants… Hyper-Awesome, Malicious, Markup Enabled Reality.
An open source project/utility that generates a modified generic.xaml replacing all the
colored brushes with ones generated from an input base color.
http://bit.ly/HAMMERPants

11. RequestedTheme redux
Challenge: How do you handle elements that should appear the same regardless of application
theme – for example, controls on flyouts which are usually light-themed?
Option 1: Create an explicit “always light” theme
Option 2: Leverage FrameworkElement.ThemeResource
http://bit.ly/RequestedTheme

12. Dynamicizing Static Resources
Resources are programmatically accessible in the Application.Current.Resources
dictionary
There are some nuances:
◦ Modifying the color property of a brush will apply that change automatically
◦ Assigning a new brush instance will not be acknowledged until another element loads that resource
(e.g., navigate to a new page)
◦ Refreshing cached page class instances (NavigationCacheMode.Enabled) requires additional work

13. Thank you.
Jim O’Neil
BlueMetal Architects
jim.oneil@outlook.com
http://codocent.com
@jimoneil
http://bit.ly/Win81Themes
http://bit.ly/Win81Themes