<Window

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

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

xml:lang="en-US"

xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"

xmlns:MyCheckBoxes="clr-namespace:MyCheckBoxes"

xmlns:d="http://schemas.microsoft.com/expression/blend/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"

x:Class="MyCheckBoxes.Window1"

x:Name="Window"

Title="Customizing checkboxes"

Width="660" Height="160">

<Window.Resources>

<ControlTemplate x:Key="CheckBoxControlTemplate1" TargetType="{x:Type CheckBox}">

<Image Width="53" Source="IMGP0208.JPG" Stretch="Fill"/>

</ControlTemplate>

<SolidColorBrush x:Key="CheckBoxFillNormal" Color="#F4F4F4"/>

<SolidColorBrush x:Key="CheckBoxStroke" Color="#8E8F8F"/>

<Style x:Key="EmptyCheckBoxFocusVisual">

<Setter Property="Control.Template">

<Setter.Value>

<ControlTemplate>

<Rectangle SnapsToDevicePixels="true" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="1"/>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="CheckRadioFocusVisual">

<Setter Property="Control.Template">

<Setter.Value>

<ControlTemplate>

<Rectangle SnapsToDevicePixels="true" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="14,0,0,0"/>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">

<Style.Resources>

<Storyboard x:Key="Timeline1">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="2"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="2"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

<Storyboard x:Key="Timeline2">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.0001"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.0001"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Style.Resources>

<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

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

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

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="FocusVisualStyle" Value="{StaticResource EmptyCheckBoxFocusVisual}"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type CheckBox}">

<BulletDecorator SnapsToDevicePixels="true" Background="Transparent">

<BulletDecorator.Bullet>

<Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>

</BulletDecorator.Bullet>

<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>

</BulletDecorator>

<ControlTemplate.Triggers>

<Trigger Property="HasContent" Value="true">

<Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>

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

</Trigger>

<Trigger Property="IsEnabled" Value="false">

<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="LayoutTransform">

<Setter.Value>

<TransformGroup>

<ScaleTransform ScaleX="1" ScaleY="1"/>

<SkewTransform AngleX="0" AngleY="0"/>

<RotateTransform Angle="0"/>

<TranslateTransform X="0" Y="0"/>

</TransformGroup>

</Setter.Value>

</Setter>

<Style.Triggers>

<Trigger Property="IsChecked" Value="True">

<Trigger.EnterActions>

<BeginStoryboard Storyboard="{StaticResource Timeline1}"/>

</Trigger.EnterActions>

<Trigger.ExitActions>

<BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>

</Trigger.ExitActions>

</Trigger>

</Style.Triggers>

</Style>

<ControlTemplate x:Key="CheckBoxControlTemplate2" TargetType="{x:Type CheckBox}">

<Image Width="53" Source="IMGP0093.JPG" Stretch="Fill"/>

</ControlTemplate>

<ControlTemplate x:Key="CheckBoxControlTemplate3" TargetType="{x:Type CheckBox}">

<Image Width="53" Source="IMGP0088.JPG" Stretch="Fill"/>

</ControlTemplate>

</Window.Resources>

<Grid x:Name="LayoutRoot">

<StackPanel Margin="156,16,137,0" VerticalAlignment="Top" Height="89" Orientation="Horizontal">

<CheckBox Height="35" Content="CheckBox" Margin="10,0,0,0" Style="{DynamicResource CheckBoxStyle1}" Width="53" Template="{DynamicResource CheckBoxControlTemplate1}"/>

<CheckBox Height="35" Content="CheckBox" Style="{DynamicResource CheckBoxStyle1}" Width="53" Template="{DynamicResource CheckBoxControlTemplate2}" Margin="10,0,0,0"/>

<CheckBox Height="35" Content="CheckBox" Style="{DynamicResource CheckBoxStyle1}" Template="{DynamicResource CheckBoxControlTemplate3}" Margin="10,0,0,0" Width="53"/>

</StackPanel>

</Grid>

</Window>