Windows 8.1 Themes

Windows 8.1 ThemesJ IM O’NEIL

BLUEMETAL ARCHITECTS

HT TP://CODOCENT.COM

http://bit.ly/Win81Themes

http://bit.ly/Win81Themes

AgendaRequestedTheme

Resources

Theme Dictionaries

Styles

Theme Generation

RequestedTheme (redux)

Dynamicizing Static Resources

Requested ThemeApplication.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 detectchange to high contrast though.

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

ThemeResource DictionariesShipped in SDK for convenience, but files not used at runtime

◦ C:\Program Files (x86)\Windows Kits\8.1\Include\winrt\xaml\design

Default (aka Dark)LightHighContrast

<?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

Theme Dictionary OrganizationDefine distinct XAML files to store resource values by theme

StylesControls 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

Theme-dependent brushesOver 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

Theming and StylesImplicit 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

Theme GenerationChallenge: 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

RequestedTheme reduxChallenge: 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

Dynamicizing Static ResourcesResources are programmatically accessible in the Application.Current.Resourcesdictionary

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

Thank you.

Jim O’Neil

BlueMetal Architects

[email protected]

http://codocent.com

@jimoneil

http://bit.ly/Win81Themes

http://bit.ly/Win81Themes