Channging Template

Question

Hi All,

I have a togglebutton on which I want to use two different template on Checked and Unchecked State.

When the ToggleButton is Clicked (IsChecked=True) I want to Use template 1 and when it is clicked for the second time I want to use Template 2.

That's it !!!

How can I do that ?? Should I use Event Trigger or Trigger for that ???

Answer 1

You can change the Template's on an element by assigning them through a style, instead of directly to the element. In our style we can assign a trigger that is fired when the IsChecked property of the ToggleButton is set to True/False, and then within that trigger we can change the assigned template. A sample Style for our ToggleButton would look like this:

<ToggleButton Content="Toggle Me">
 <ToggleButton.Style>
  <Style TargetType="{x:Type ToggleButton}">
   <Setter Property="Template"
     Value="{StaticResource ToggleButtonUncheckedTemplate}" />
   <Style.Triggers>
    <Trigger Property="IsChecked"
       Value="True">
     <Setter Property="Template"
       Value="{StaticResource ToggleButtonCheckedTemplate}" />
    </Trigger>
   </Style.Triggers>
  </Style>
 </ToggleButton.Style>
</ToggleButton>

The two StaticResource's are our predefined ControlTemplates. While this works, I would recomend to just make the modifications needed inside the Template, instead of completely swapping the ControlTemplate for another one.

Just like we did in the style, we could create a Trigger inside the ControlTemplate that changes what is needed:

     <ControlTemplate x:Key="ToggleButtonUncheckedTemplate"
       TargetType="{x:Type ToggleButton}">
   <Grid SnapsToDevicePixels="False"
      Background="Transparent">
    ... layout ...
   </Grid>

   <ControlTemplate.Triggers>
    <Trigger Property="IsChecked"
       Value="true">
     <Setter Property="Data"
       TargetName="arrow"
       Value="M 1,4  L 4,1  L 7,4" />
    </Trigger>
    <Trigger Property="IsMouseOver"
       Value="true">
     <Setter Property="Stroke"
       TargetName="circle"
       Value="#666" />
     <Setter Property="Stroke"
       TargetName="arrow"
       Value="#222" />
     <Setter Property="Visibility"
       TargetName="shadow"
       Value="Visible" />
    </Trigger>
   </ControlTemplate.Triggers>

  </ControlTemplate>