WPF - Change ContentTemplate in DataTrigger of RepeatButton

Question

I got the following issue which I need some help with.

(The code is simplified to show the problem I'm having)

I got a repeat button with a contenttemplate and style:

<UserControl x:Class="SR.Testing.MyUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">


  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Border x:Name="Border" SnapsToDevicePixels="True">
      <StackPanel>
        <RepeatButton x:Name="IncreaseButton" ContentTemplate="{StaticResource ArrowUpNormal}" Style="{StaticResource IncreaseRepeatButtonStyle}" Click="IncreaseClick" />
      </StackPanel>
    </Border>
  </Grid>
</UserControl>

This is the datatemplate and the style:

  <Geometry x:Key="UpArrowGeometry">M0,5 L4.5,.5 9,5 6,5 4.5,3.5 3,5 z</Geometry>

  <DataTemplate x:Key="ArrowUpNormal">
    <Path Width="18"
          Height="10"
          Stretch="Fill"
          Data="{StaticResource UpArrowGeometry}"
          Fill="DarkOrange"
          SnapsToDevicePixels="True"
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Focusable="False" />
  </DataTemplate>

  <DataTemplate x:Key="ArrowUpDisabled">
    <Path Width="18"
          Height="10"
          Stretch="Fill"
          Data="{StaticResource UpArrowGeometry}"
          Fill="Green"
          SnapsToDevicePixels="True"
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Focusable="False" />
  </DataTemplate>

  <Style x:Key="IncreaseRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Height" Value="40" />

    <Style.Triggers>
      <Trigger Property="IsEnabled" Value="False">
        <Setter Property="ContentTemplate" Value="{StaticResource ArrowUpDisabled}" />
      </Trigger>
    </Style.Triggers>
  </Style>

After starting the application, the repeatbutton looks as intended (darkorange):

However, when I disable the RepeatButton (via codebehind) with "IncreaseButton.IsEnabled = false;"

I expected my style trigger to turn the arrow green:

But instead I get this (Arrow stays orange and the background turns white/gray):

What is causing this behaviour and how do I fix this? Thanks!

Answer 1

The Background turns white/gray because there is a ControlTemplate trigger defined in the base style. To remove this you need to override the base style. But then you need to create a new template.

<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
    <Setter.Value>
        <!--  Template  -->
    </Setter.Value>
</Setter>

Link to the base style with template

And the reason why the arrow stays orange is that you have set the template directly on the button. This overrides the property in the style and also the triggers. To fix this just add (and remove the property on the button)

<Setter Property="ContentTemplate" Value="{StaticResource ArrowUpNormal" />

to your style.