Question

Looking at the various open source themes available for WPF, I’m a bit surprised to see that colours aren’t mapped to system colours. So if you change your overall system configuration, these themes won’t change to suit.

Are there any themes that properly use the system colours, and if so, how do I write a button style that will leverage those colours?

To give an example, here’s the style of a button:

    <Style x:Key="specialButton" TargetType="Button">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource NormalBrush}"/>
        <Setter Property="Margin" Value="2"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border"
                    BorderThickness="1"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{StaticResource NormalBorderBrush}"
                    Padding="1,1">
                        <ContentPresenter Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource DarkBrush}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="border" Property="Background" Value="{StaticResource PressedBrush}"/>
                            <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource PressedBorderBrush}"/>
                        </Trigger>
                        <Trigger Property="IsDefaulted" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource DefaultedBorderBrush}"/>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource DefaultedBorderBrush}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}"/>
                            <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}"/>
                            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The question is, how to specify the named static resources so that they hook into the system colours? For example, the background might look like this:

    <LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="{DynamicResource {x:Static SystemColors.ControlLightLightColorKey}}" Offset="0.0"/>
                <GradientStop Color="{DynamicResource {x:Static SystemColors.ControlLightColorKey}}" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>

However this looks nothing like a standard button. If I use XAMLPAD to examine a button, I can see the following:

     <LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF3F3F3" Offset="0.0"/>
                <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                <GradientStop Color="#FFCDCDCD" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>

The colours used appear to be constants, and not based on System Colours.

Answer 1

I don’t know about third-party themes, but the system colours are available in Xaml through the SystemColors class. This class exposes the keys of resources that can be used in your xaml in one of two ways:

<Border Background="{x:Static SystemColors.ControlDarkBrushKey}" />

or:

<Border Background="{StaticResource {x:Static SystemColors.ControlDarkBrushKey}}" />

Either of the above should give you a border with a background the same as the system’s ControlDarkBrush colour. The documentation link I gave supplies the full list of available resources.

It’s worth noting that SystemColors provides you with both a Brush for each colour available, and the colour itself – so if you want to create your own brush that fades from one system colour to another, you can create this easily.