windows 8.1 themes
TRANSCRIPT
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
http://codocent.com
@jimoneil
http://bit.ly/Win81Themes
http://bit.ly/Win81Themes