title: XAML WPF User Control changing state
body: <p>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 ?</p>
  
  <p>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.</p>
  
  <pre><code>&lt;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"&gt;
  &lt;UserControl.Resources&gt;
      &lt;SolidColorBrush x:Key="CheckBoxFillNormal" Color="#F4F4F4"/&gt;
      &lt;SolidColorBrush x:Key="CheckBoxStroke" Color="#8E8F8F"/&gt;
      &lt;Style x:Key="EmptyCheckBoxFocusVisual"&gt;
          &lt;Setter Property="Control.Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate&gt;
                      &lt;Rectangle Margin="1" SnapsToDevicePixels="true" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2"/&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
      &lt;Style x:Key="BFCheckBoxStyle" TargetType="{x:Type CheckBox}"&gt;
          &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/&gt;
          &lt;Setter Property="Background" Value="{StaticResource CheckBoxFillNormal}"/&gt;
          &lt;Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/&gt;
          &lt;Setter Property="BorderThickness" Value="1"/&gt;
          &lt;Setter Property="FocusVisualStyle" Value="{StaticResource EmptyCheckBoxFocusVisual}"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type CheckBox}"&gt;
                      &lt;Grid x:Name="Controlgrid" Height="{TemplateBinding ActualHeight}" Width="{TemplateBinding ActualWidth}"&gt;
                          &lt;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"/&gt;
                          &lt;Viewbox x:Name="CrossViewbox" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Top" Width="Auto" Margin="4" Visibility="Hidden"&gt;
                              &lt;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"/&gt;
                          &lt;/Viewbox&gt;
                          &lt;Viewbox x:Name="TickViewBox" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="4" RenderTransformOrigin="0.373,0.225" Visibility="Visible"&gt;
                              &lt;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"/&gt;
                          &lt;/Viewbox&gt;
                      &lt;/Grid&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;EventTrigger RoutedEvent="ButtonBase.Click"/&gt;
                          &lt;Trigger Property="IsChecked" Value="true"&gt;
                              &lt;Setter Property="Visibility" TargetName="TickViewBox" Value="Visible" /&gt;
                              &lt;Setter Property="Visibility" TargetName="CrossViewbox" Value="Hidden" /&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="IsChecked" Value="false"&gt;
                              &lt;Setter Property="Visibility" TargetName="TickViewBox" Value="Hidden" /&gt;
                              &lt;Setter Property="Visibility" TargetName="CrossViewbox" Value="Visible" /&gt;
                          &lt;/Trigger&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  &lt;/UserControl.Resources&gt;
  
  &lt;CheckBox Content="CheckBox" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{DynamicResource BFCheckBoxStyle}" Height="{Binding ActualHeight, ElementName=UserControl}" Width="{Binding ActualWidth, ElementName=UserControl}"/&gt;
  </code></pre>
  
  <p></p>
  
  <p>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 ??</p>
  
  <p>Regards Christian Arild Stœr Andersen</p>