XAML Example

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

    <!-- Define Style Colors -->
    <Color x:Key="GlobalAccent-Color">#FF333333</Color>
    <Color x:Key="PrimaryForeground-Color">#FF333333</Color>
    <Color x:Key="PrimaryForegroundInactive-Color">#FF666666</Color>
    <Color x:Key="PrimaryForegroundActive-Color">#FF000000</Color>
    <Color x:Key="SecondaryForeground-Color">#FFCCCCCC</Color>
    <Color x:Key="SecondaryForegroundActive-Color">#FFFFFFFF</Color>
    <Color x:Key="NavBackground-Color">#FF666666</Color>
    <Color x:Key="NavForegroundNonActive-Color">#FFCCCCCC</Color>
    <Color x:Key="NavForegroundActive-Color">#FFFFFFFF</Color>
    <Color x:Key="Background-Color">#FFEEEEEE</Color>
    <SolidColorBrush x:Key="GlobalAccent" Color="{StaticResource GlobalAccent-Color}" />
    <SolidColorBrush x:Key="PrimaryForeground" Color="{StaticResource PrimaryForeground-Color}" />
    <SolidColorBrush x:Key="PrimaryForegroundInactive" Color="{StaticResource PrimaryForegroundInactive-Color}" />
    <SolidColorBrush x:Key="PrimaryForegroundActive" Color="{StaticResource PrimaryForegroundActive-Color}" />
    <SolidColorBrush x:Key="SecondaryForeground" Color="{StaticResource SecondaryForeground-Color}" />
    <SolidColorBrush x:Key="SecondaryForegroundActive" Color="{StaticResource SecondaryForegroundActive-Color}" />
    <SolidColorBrush x:Key="NavBackground" Color="{StaticResource NavBackground-Color}" />
    <SolidColorBrush x:Key="NavForegroundNonActive" Color="{StaticResource NavForegroundNonActive-Color}" />
    <SolidColorBrush x:Key="NavForegroundActive" Color="{StaticResource NavForegroundActive-Color}" />
    <SolidColorBrush x:Key="Background" Color="{StaticResource Background-Color}" />

    <!-- Global fields -->
    <Duration x:Key="HoverDuration">0:0:0.1</Duration>

    <!-- Header Button Style -->
    <Style x:Key="HeaderWindowAction" TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="{StaticResource GlobalAccent}" />
        <Setter Property="OpacityMask" Value="{StaticResource SecondaryForeground}" />
        <Setter Property="Cursor" Value="Hand" />
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="OpacityMask.Color">
                        <ColorAnimation From="{StaticResource SecondaryForeground-Color}" To="{StaticResource SecondaryForegroundActive-Color}" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="OpacityMask.Color">
                        <ColorAnimation From="{StaticResource SecondaryForegroundActive-Color}" To="{StaticResource SecondaryForeground-Color}" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
    <Style x:Key="HeaderAction" TargetType="{x:Type Label}" BasedOn="{StaticResource SimpleLabel}">
        <Setter Property="Background" Value="{StaticResource GlobalAccent}" />
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="FontSize" Value="7.5pt" />
        <Setter Property="Foreground" Value="{StaticResource SecondaryForeground}" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="BorderBrush" Value="{StaticResource SecondaryForeground}" />
        <Setter Property="BorderThickness" Value="1, 0, 0, 0" />
        <Setter Property="Margin" Value="0, 0, 5, 0" />
        <Setter Property="Padding" Value="5, 1, 0, 1" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Foreground.Color">
                        <ColorAnimation From="{StaticResource SecondaryForeground-Color}" To="{StaticResource SecondaryForegroundActive-Color}" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Foreground.Color">
                        <ColorAnimation From="{StaticResource SecondaryForegroundActive-Color}" To="{StaticResource SecondaryForeground-Color}" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>

    <!-- Navigation Styles -->
    <Style x:Key="NavigationItem" TargetType="{x:Type Label}">
        <Setter Property="Padding" Value="0" />
        <Setter Property="Margin" Value="0, -7, 20, 0" />
        <Setter Property="FontSize" Value="30px" />
        <Setter Property="Foreground" Value="{StaticResource NavForegroundNonActive}" />
        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="FontWeight" Value="300" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Foreground.Color">
                        <ColorAnimation From="{StaticResource NavForegroundNonActive-Color}" To="{StaticResource NavForegroundActive-Color}" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Foreground.Color">
                        <ColorAnimation From="{StaticResource NavForegroundActive-Color}" To="{StaticResource NavForegroundNonActive-Color}" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
    <Style x:Key="NavigationItemActive" TargetType="{x:Type Label}">
        <Setter Property="Padding" Value="0" />
        <Setter Property="Margin" Value="0, -7, 20, 0" />
        <Setter Property="FontSize" Value="30px" />
        <Setter Property="Foreground" Value="{StaticResource NavForegroundActive}" />
        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="FontWeight" Value="300" />
        <Setter Property="VerticalAlignment" Value="Center" />
    </Style>

    <!-- Settings Screen Styles -->
    <Style x:Key="SettingsMenuItem" TargetType="{x:Type Label}">
        <Setter Property="Padding" Value="0, 5, 10, 5" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryForegroundInactive}" />
        <Setter Property="Background" Value="#00FFFFFF" />
        <Setter Property="FontSize" Value="15px" />
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="HorizontalContentAlignment" Value="Right" />
        <Setter Property="Width" Value="Auto" />
        <Setter Property="Cursor" Value="Hand" />
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Foreground.Color">
                        <ColorAnimation From="{StaticResource PrimaryForegroundInactive-Color}" To="{StaticResource PrimaryForegroundActive-Color}" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Foreground.Color">
                        <ColorAnimation From="{StaticResource PrimaryForegroundActive-Color}" To="{StaticResource PrimaryForegroundInactive-Color}" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
    <Style x:Key="SettingsMenuItem-Active" TargetType="{x:Type Label}">
        <Setter Property="Padding" Value="0, 5, 10, 5" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryForegroundActive}" />
        <Setter Property="Background" Value="#00FFFFFF" />
        <Setter Property="FontSize" Value="15px" />
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="HorizontalContentAlignment" Value="Right" />
        <Setter Property="Width" Value="Auto" />
    </Style>

    <!-- Default Button Style -->
    <Style x:Key="DefaultButton" TargetType="{x:Type Button}" BasedOn="{StaticResource SimpleButton}">
        <Setter Property="Background" Value="#00FFFFFF" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Padding" Value="5" />
        <Setter Property="BorderThickness" Value="1, 0, 1, 0" />
        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryForeground}" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryForeground}" />
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="FontSize" Value="9pt" />
        <Setter Property="Width" Value="85" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="BorderThickness">
                        <ThicknessAnimation From="1, 0, 1, 0" To="3, 0, 3, 0" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="BorderBrush.Color">
                        <ColorAnimation From="{StaticResource PrimaryForeground-Color}" To="{StaticResource PrimaryForegroundActive-Color}" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Foreground.Color">
                        <ColorAnimation From="{StaticResource PrimaryForeground-Color}" To="{StaticResource PrimaryForegroundActive-Color}" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="BorderThickness">
                        <ThicknessAnimation To="1, 0, 1, 0" From="3, 0, 3, 0" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="BorderBrush.Color">
                        <ColorAnimation To="{StaticResource PrimaryForeground-Color}" From="{StaticResource PrimaryForegroundActive-Color}" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Foreground.Color">
                        <ColorAnimation To="{StaticResource PrimaryForeground-Color}" From="{StaticResource PrimaryForegroundActive-Color}" Duration="{StaticResource HoverDuration}" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>

    <!-- Checkmark -->
    <Style x:Key="DefaultCheckBox" TargetType="{x:Type CheckBox}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="Foreground" Value="{DynamicResource PrimaryForeground}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">

                    <!-- BulletDecorator is used to provide baseline alignment between the checkmark and the Content -->
                    <BulletDecorator Background="Transparent">
                        <BulletDecorator.Bullet>
                            <Grid Width="16" Height="16">
                                <Border x:Name="Border" BorderBrush="{TemplateBinding Foreground}" BorderThickness="2"/>
                                <Path x:Name="CheckMark" Stroke="{DynamicResource PrimaryForegroundActive}" StrokeThickness="2" SnapsToDevicePixels="False" Data="M1,1 L14,14" Margin="0" Stretch="Fill" VerticalAlignment="Center" HorizontalAlignment="Center" Width="10" Height="10"/>
                                <Path x:Name="CheckMark1" Stroke="{DynamicResource PrimaryForegroundActive}" StrokeThickness="2" SnapsToDevicePixels="False" Data="M1,14 L14,1" Margin="0" Stretch="Fill" VerticalAlignment="Center" HorizontalAlignment="Center" Width="10" Height="10"/>
                            </Grid>
                        </BulletDecorator.Bullet>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" Margin="5,0,0,0"/>
                    </BulletDecorator>

                    <!-- This uses Visibility to hide and show the CheckMark on IsChecked -->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter Property="Visibility" Value="Collapsed" TargetName="CheckMark" />
                            <Setter Property="Visibility" Value="Collapsed" TargetName="CheckMark1" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>