Visually Located | Easily create light themed styles for your Win8 Settings Flyout

One of the things I love about Windows Store apps is their ability to integrate with the system. One of these integration points is the Settings Charm. I’m not going to show you how to create a settings flyout. There are already lots of examples out there that do this. There are even some helpers like the SettingsFlyout available in Callisto and the helper created by Jerry Nixon. Recently Tim Heuer made a change to the SettingsFlyout to set the background to white. This change allows your app to follow the guidelines. He also added a property that allows you to change what you want the background to be if you are not a fan of white.

This change to the background works great if your app has a light requested theme. If you are using the default dark theme then the new background on the flyout becomes a nightmare. It’s a nightmare because now you have to style all of the controls you use for your settings to work properly with a light theme. You could easily start changing the brushes of various properties, but this doesn’t look very polished. You could restyle the controls and start to guess and what colors to use for this or that, but you’ll forget something (at least I did, and it was a lot).

There has to be an easy way to get light themed styles at runtime, right? I couldn’t find one, but I did find a way to easily create them. The resources and styles used by controls within the app are generally not found within the app itself. The app requests a theme from the system and that theme has all of resources and styles. This allows you to create custom controls and use those brushes and have the control be styled properly for both light and dark themed apps. These resources are not found within your app, but they are on your machine.

The styles and resources for WinRT are found at C:\Program Files (x86)\Windows Kits\8.0\Include\WinRT\Xaml\Design. This folder has two files in it. The themeresource.xaml file has all of the brushes, and other resources like font size and opacity. The generic.xaml file has all of these resources as well as all of the styles for each control. We can use these files to build our light themed styles.

To start with, open the project you need the light styles in, and add a new resource dictionary to store all of our light styles. In the Solution Explorer window, right click the Common folder and select Add –> New Item…

In the Add New Item dialog, select Resource Dictionary and name it LightStandardStyles.xaml

We then need to add this xaml to our App.xaml. Open the App.xaml and copy the line that adds the StandardStyles.xaml, paste it directly under that line and change the name to LightStandardStyles.

     <ResourceDictionary Source="Common/StandardStyles.xaml"/>

    <ResourceDictionary Source="Common/LightStandardStyles.xaml"/>

Let’s say you need to have a light themed button. Open LightStandardStyles.xaml and also open C:\Program Files (x86)\Windows Kits\8.0\Include\WinRT\Xaml\Design\generic.xaml. Search for TargetType="Button" in the file. Copy the style and paste the style into LightStandardStyles. Give the style the key LightButtonStyle. Next open themeresource.xaml and collapse the “Default” and “HighContrast” ResourceDictionary. Now it’s as simple as searching for the brushes used within the button style and copy/paste them from the themeresource file and paste them into LightStandardStyles.

After doing this, the file should look like this.

    <ResourceDictionary

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

        <SolidColorBrush x:Key="ButtonBackgroundThemeBrush" Color="#B3B6B6B6" />

        <SolidColorBrush x:Key="ButtonBorderThemeBrush" Color="#33000000" />

        <SolidColorBrush x:Key="ButtonDisabledBackgroundThemeBrush" Color="#66CACACA" />

        <SolidColorBrush x:Key="ButtonDisabledBorderThemeBrush" Color="#1A000000" />

        <SolidColorBrush x:Key="ButtonDisabledForegroundThemeBrush" Color="#66000000" />

        <SolidColorBrush x:Key="ButtonForegroundThemeBrush" Color="#FF000000" />

        <SolidColorBrush x:Key="ButtonPointerOverBackgroundThemeBrush" Color="#D1CDCDCD" />

        <SolidColorBrush x:Key="ButtonPointerOverForegroundThemeBrush" Color="#FF000000" />

        <SolidColorBrush x:Key="ButtonPressedBackgroundThemeBrush" Color="#FF000000" />

        <SolidColorBrush x:Key="ButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" />

        <SolidColorBrush x:Key="FocusVisualBlackStrokeThemeBrush" Color="Black" />

        <SolidColorBrush x:Key="FocusVisualWhiteStrokeThemeBrush" Color="White" />

        <Style x:Key="LightButtonStyle" TargetType="Button">

            <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}" />

            <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/>

            <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}" />

            <Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}" />

            <Setter Property="Padding" Value="12,4,12,4" />

            <Setter Property="HorizontalAlignment" Value="Left" />

            <Setter Property="VerticalAlignment" Value="Center" />

            <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />

            <Setter Property="FontWeight" Value="SemiBold" />

            <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Grid>

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Normal" />

                                    <VisualState x:Name="PointerOver">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"

                                                                           Storyboard.TargetProperty="Background">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"

                                                                           Storyboard.TargetProperty="Foreground">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Pressed">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"

                                                                           Storyboard.TargetProperty="Background">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"

                                                                           Storyboard.TargetProperty="Foreground">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"

                                                                           Storyboard.TargetProperty="Background">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"

                                                                           Storyboard.TargetProperty="BorderBrush">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"

                                                                           Storyboard.TargetProperty="Foreground">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="FocusStates">

                                    <VisualState x:Name="Focused">

                                        <Storyboard>

                                            <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"

                                                             Storyboard.TargetProperty="Opacity"

                                                             To="1"

                                                             Duration="0" />

                                            <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"

                                                             Storyboard.TargetProperty="Opacity"

                                                             To="1"

                                                             Duration="0" />

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Unfocused" />

                                    <VisualState x:Name="PointerFocused" />

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <Border x:Name="Border"

                                    Background="{TemplateBinding Background}"

                                    BorderBrush="{TemplateBinding BorderBrush}"

                                    BorderThickness="{TemplateBinding BorderThickness}"

                                    Margin="3">

                                <ContentPresenter x:Name="ContentPresenter"

                                                  Content="{TemplateBinding Content}"

                                                  ContentTransitions="{TemplateBinding ContentTransitions}"

                                                  ContentTemplate="{TemplateBinding ContentTemplate}"

                                                  Margin="{TemplateBinding Padding}"

                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                            </Border>

                            <Rectangle x:Name="FocusVisualWhite"

                                       IsHitTestVisible="False"

                                       Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"

                                       StrokeEndLineCap="Square"

                                       StrokeDashArray="1,1"

                                       Opacity="0"

                                       StrokeDashOffset="1.5" />

                            <Rectangle x:Name="FocusVisualBlack"

                                       IsHitTestVisible="False"

                                       Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"

                                       StrokeEndLineCap="Square"

                                       StrokeDashArray="1,1"

                                       Opacity="0"

                                       StrokeDashOffset="0.5" />

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </ResourceDictionary>

Next it’s as simple as prefixing each of these resources with ‘Light’. Doing this results in the following file

    <ResourceDictionary

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

        <SolidColorBrush x:Key="LightButtonBackgroundThemeBrush" Color="#B3B6B6B6" />

        <SolidColorBrush x:Key="LightButtonBorderThemeBrush" Color="#33000000" />

        <SolidColorBrush x:Key="LightButtonDisabledBackgroundThemeBrush" Color="#66CACACA" />

        <SolidColorBrush x:Key="LightButtonDisabledBorderThemeBrush" Color="#1A000000" />

        <SolidColorBrush x:Key="LightButtonDisabledForegroundThemeBrush" Color="#66000000" />

        <SolidColorBrush x:Key="LightButtonForegroundThemeBrush" Color="#FF000000" />

        <SolidColorBrush x:Key="LightButtonPointerOverBackgroundThemeBrush" Color="#D1CDCDCD" />

        <SolidColorBrush x:Key="LightButtonPointerOverForegroundThemeBrush" Color="#FF000000" />

        <SolidColorBrush x:Key="LightButtonPressedBackgroundThemeBrush" Color="#FF000000" />

        <SolidColorBrush x:Key="LightButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" />

        <SolidColorBrush x:Key="LightFocusVisualBlackStrokeThemeBrush" Color="Black" />

        <SolidColorBrush x:Key="LightFocusVisualWhiteStrokeThemeBrush" Color="White" />

        <Style x:Key="LightButtonStyle" TargetType="Button">

            <Setter Property="Background" Value="{StaticResource LightButtonBackgroundThemeBrush}" />

            <Setter Property="Foreground" Value="{StaticResource LightButtonForegroundThemeBrush}"/>

            <Setter Property="BorderBrush" Value="{StaticResource LightButtonBorderThemeBrush}" />

            <Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}" />

            <Setter Property="Padding" Value="12,4,12,4" />

            <Setter Property="HorizontalAlignment" Value="Left" />

            <Setter Property="VerticalAlignment" Value="Center" />

            <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />

            <Setter Property="FontWeight" Value="SemiBold" />

            <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Grid>

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Normal" />

                                    <VisualState x:Name="PointerOver">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"

                                                                           Storyboard.TargetProperty="Background">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LightButtonPointerOverBackgroundThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"

                                                                           Storyboard.TargetProperty="Foreground">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LightButtonPointerOverForegroundThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Pressed">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"

                                                                           Storyboard.TargetProperty="Background">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LightButtonPressedBackgroundThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"

                                                                           Storyboard.TargetProperty="Foreground">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LightButtonPressedForegroundThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"

                                                                           Storyboard.TargetProperty="Background">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LightButtonDisabledBackgroundThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"

                                                                           Storyboard.TargetProperty="BorderBrush">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LightButtonDisabledBorderThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"

                                                                           Storyboard.TargetProperty="Foreground">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LightButtonDisabledForegroundThemeBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="FocusStates">

                                    <VisualState x:Name="Focused">

                                        <Storyboard>

                                            <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"

                                                             Storyboard.TargetProperty="Opacity"

                                                             To="1"

                                                             Duration="0" />

                                            <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"

                                                             Storyboard.TargetProperty="Opacity"

                                                             To="1"

                                                             Duration="0" />

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Unfocused" />

                                    <VisualState x:Name="PointerFocused" />

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <Border x:Name="Border"

                                    Background="{TemplateBinding Background}"

                                    BorderBrush="{TemplateBinding BorderBrush}"

                                    BorderThickness="{TemplateBinding BorderThickness}"

                                    Margin="3">

                                <ContentPresenter x:Name="ContentPresenter"

                                                  Content="{TemplateBinding Content}"

                                                  ContentTransitions="{TemplateBinding ContentTransitions}"

                                                  ContentTemplate="{TemplateBinding ContentTemplate}"

                                                  Margin="{TemplateBinding Padding}"

                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                            </Border>

                            <Rectangle x:Name="FocusVisualWhite"

                                       IsHitTestVisible="False"

                                       Stroke="{StaticResource LightFocusVisualWhiteStrokeThemeBrush}"

                                       StrokeEndLineCap="Square"

                                       StrokeDashArray="1,1"

                                       Opacity="0"

                                       StrokeDashOffset="1.5" />

                            <Rectangle x:Name="FocusVisualBlack"

                                       IsHitTestVisible="False"

                                       Stroke="{StaticResource LightFocusVisualBlackStrokeThemeBrush}"

                                       StrokeEndLineCap="Square"

                                       StrokeDashArray="1,1"

                                       Opacity="0"

                                       StrokeDashOffset="0.5" />

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </ResourceDictionary>

With this you can create a light style pretty quickly. But today, and today only, you can download the light styles that I created. This resource file has light themed styles for the ToggleSwitch, TextBox, ComboBox, Button (including a LightAppBarButtonStyle) and all of the standard TextBlock styles.

Related posts