XAML WPF User Control changing state - wpf

Question

I am trying to create a WPF user control using XAML it is a old fashion checkbox control and the below code look ok on screen but in order for the control to change state you have to click on the path not anywhere in the box what am i doing wrong ?
as you can properly see I a bit of a nooob when it comes to WPF so if there is any thing I am doing really badly please comment.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="BFCheckBoxTest.BFCheckBox"
x:Name="UserControl"
d:DesignWidth="55" d:DesignHeight="55">
<UserControl.Resources>
<SolidColorBrush x:Key="CheckBoxFillNormal" Color="#F4F4F4"/>
<SolidColorBrush x:Key="CheckBoxStroke" Color="#8E8F8F"/>
<Style x:Key="EmptyCheckBoxFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="1" SnapsToDevicePixels="true" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="BFCheckBoxStyle" TargetType="{x:Type CheckBox}">
<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}">
<Grid x:Name="Controlgrid" Height="{TemplateBinding ActualHeight}" Width="{TemplateBinding ActualWidth}">
<Border x:Name="border" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="{Binding ActualHeight, ElementName=Controlgrid}" VerticalAlignment="Bottom" Width="{Binding ActualWidth, ElementName=Controlgrid}" Grid.ColumnSpan="1" RenderTransformOrigin="0.518,0.127" d:IsLocked="True"/>
<Viewbox x:Name="CrossViewbox" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Top" Width="Auto" Margin="4" Visibility="Hidden">
<Path x:Name="Cross" Data="M0,55 L55,0 M0,0 L55,55" HorizontalAlignment="Left" Height="{Binding ActualHeight, ElementName=border}" Margin="0" Stretch="Fill" Stroke="Red" StrokeThickness="2" VerticalAlignment="Bottom" Width="{Binding ActualWidth, ElementName=border}" Grid.ColumnSpan="1" Focusable="False"/>
</Viewbox>
<Viewbox x:Name="TickViewBox" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="4" RenderTransformOrigin="0.373,0.225" Visibility="Visible">
<Path x:Name="Tick" Data="M0,35 L20,55 L55,0" HorizontalAlignment="Left" Height="{Binding ActualHeight, ElementName=border}" Margin="0" Stretch="Fill" Stroke="Green" StrokeThickness="2" VerticalAlignment="Bottom" Width="{Binding ActualWidth, ElementName=border}" Grid.ColumnSpan="1" Focusable="False"/>
</Viewbox>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click"/>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" TargetName="TickViewBox" Value="Visible" />
<Setter Property="Visibility" TargetName="CrossViewbox" Value="Hidden" />
</Trigger>
<Trigger Property="IsChecked" Value="false">
<Setter Property="Visibility" TargetName="TickViewBox" Value="Hidden" />
<Setter Property="Visibility" TargetName="CrossViewbox" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<CheckBox Content="CheckBox" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{DynamicResource BFCheckBoxStyle}" Height="{Binding ActualHeight, ElementName=UserControl}" Width="{Binding ActualWidth, ElementName=UserControl}"/>
I am actually in the process of porting a IPad application to WPF and in the iPad I used a animationlayer to animate the path as if it was drawn by hand it was very simple you just provided it with a path and a duration and IOS takes care of the rest is there some thing similar in WPF or how would you achieve it in WPF ??
Regards Christian Arild Stœr Andersen

Answer 1

The reason is because you did not bind Background Brush in your ControlTemplate.
So make this change in your XAML ControlTemplate
<Grid x:Name="Controlgrid" Background="{TemplateBinding Background}">
Other than that you do not need two trigger calls for a boolean property so just one trigger will do the job for you.
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" TargetName="TickViewBox" Value="Visible" />
<Setter Property="Visibility" TargetName="CrossViewbox" Value="Hidden" />
</Trigger>