title: Customising ToggleButton state images using XAML
body: <p>I am currently using the XAML below to change the image on a toggle button for each state.  How can I define a template or style that will allow me to define the images that are to be used in the button definition such that I don't have to repeat everything below for each button. Is this even possible ?</p>
  
  <p>Ideally I would like to define a template with properties such as 'checkedImage', 'uncheckedImage' and then set these properties in the button definition in Designer.  </p>
  
  <p>I would also like the button to prevent the display of any other states or animations but I can't seem to prevent the background changing when the button is selected or when there is a mouseover.  Are there some additional states that I don't have defined below?</p>
  
  <p>Sample code (XAML, C#) for the style or template and for the actual toggle button definition would be appreciated.  Also any references to 'simple' samples and explanations would be appreciated.</p>
  
  <p>Thanks</p>
  
  <p>EDIT:  Update with my latest attempt...  </p>
  
  <p>This almost works - the correct image never gets displayed when the button is Checked.  Any ideas what I am missing here?</p>
  
  <pre><code>&lt;Style x:Key="ImgToggleButton" TargetType="ToggleButton"&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="ToggleButton"&gt;
                  &lt;Grid x:Name="GD" Background="White"&gt;
                      &lt;ContentPresenter x:Name="CP" Content="{TemplateBinding Content}"&gt;&lt;/ContentPresenter&gt;
                  &lt;/Grid&gt;
  
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="IsChecked" Value="True"&gt;
                          &lt;Setter Property="Content"&gt;
                              &lt;Setter.Value&gt;
                                  &lt;Image Source="{Binding Path=Tag, RelativeSource={RelativeSource AncestorType=ToggleButton}}" Stretch="Uniform"/&gt;
                              &lt;/Setter.Value&gt;
                          &lt;/Setter&gt;
                          &lt;Setter TargetName="GD" Property="Background" Value="{DynamicResource ThemeSolidColorBrushBlue}"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsChecked" Value="False"&gt;
                          &lt;Setter TargetName="GD" Property="Background" Value="White"/&gt;
                       &lt;/Trigger&gt;
                      &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                         &lt;!-- Nothing so we have no change--&gt;
  
                      &lt;/Trigger&gt;
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>And here is the button definition</p>
  
  <pre><code>&lt;ToggleButton x:Name="allTestsToggleButton"  Tag="Asset/AllTestsButton_1.png" Style="{DynamicResource ImgToggleButton}" ClickMode="Press" Checked="allTestsToggleButton_Checked" Unchecked="allTestsToggleButton_Unchecked"  Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="5"&gt;
      &lt;ToggleButton.Content&gt;
          &lt;Image Source="Assets/AllTestsButton_0.png" Stretch="Uniform"/&gt;
      &lt;/ToggleButton.Content&gt;
  &lt;/ToggleButton&gt;
  </code></pre>
  
  <p>Setting <code>TargetName="CP"</code> does not work either</p>
  
  <p>
      
          
              
                  
                      
                  </p>
  
  <pre><code>            &lt;ControlTemplate.Triggers&gt;
                  &lt;Trigger Property="IsChecked" Value="True"&gt;
                      &lt;Setter TargetName="CP" Property="Content"&gt;
                          &lt;Setter.Value&gt;
                              &lt;Image Source="{Binding Path=Tag, RelativeSource={RelativeSource AncestorType=ToggleButton}}" Stretch="Uniform"/&gt;
                          &lt;/Setter.Value&gt;
                      &lt;/Setter&gt;
                      &lt;Setter TargetName="GD" Property="Background" Value="{DynamicResource ThemeSolidColorBrushBlue}"/&gt;
                  &lt;/Trigger&gt;
                  &lt;Trigger Property="IsChecked" Value="False"&gt;
                      &lt;Setter TargetName="GD" Property="Background" Value="White"/&gt;
                   &lt;/Trigger&gt;
                  &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                     &lt;!-- Nothing so we have no change--&gt;
  
                  &lt;/Trigger&gt;
              &lt;/ControlTemplate.Triggers&gt;
          &lt;/ControlTemplate&gt;
      &lt;/Setter.Value&gt;
  &lt;/Setter&gt;
  </code></pre>
  
  <p></p>