DataTriggers: What's wrong?

Question

I'm trying to use a custom skin on my ToggleButton. Here's my ToggleButton:

<ToggleButton Template="{StaticResource OnTemplate}" IsChecked="True" >
    <ToggleButton.Style>
        <Style TargetType="ToggleButton">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=IsChecked}" Value="True">
                    <Setter Property="Template" Value="{StaticResource OnTemplate}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=IsChecked}" Value="False">
                    <Setter Property="Template" Value="{StaticResource OffTemplate}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
</ToggleButton>

Here are the two templates:

<ControlTemplate x:Key="OnTemplate">
    <Grid>
        <Image Source="ToggleOn.png" />
        <TextBlock>On</TextBlock>
    </Grid>
</ControlTemplate>

<ControlTemplate x:Key="OffTemplate">
    <Grid>
        <Image Source="ToggleOff.png" />
        <TextBlock>Off</TextBlock>
    </Grid>
</ControlTemplate>

This doesn't seemingly work. What am I doing wrong?

Answer 1

Try simply removing the Template="{StaticResource OnTemplate}" from your button definition. Local values trump values from trigger/style setters.

Also, you will either need to use a regular Trigger instead of a DataTrigger, or you will need to set RelativeSource={RelativeSource Self} on your DataTrigger bindings. I recommend the former.