How can I resolve property conflicts in WPF when using Triggers?

Question

I am trying to change the background of a button but the problem is it has three states - IsEnabled, IsPressed and Clicked. In default state when I press the button the background changes and then when I click the button, the button animates but next time when I press the button, the background doesn't change but the Click (animation) works correctly, since there is a conflict on changing the similar resource.

Here is my source code

<Style TargetType="{x:Type Button}" x:Key="myButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="myBorder"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Name="Stack" Background="DarkGray">
                             <Image x:Name="checkBoxImage" Width="40" Height="40" Source="NextPage.png"/>
                        </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Stack" Storyboard.TargetProperty="Background">
                                    <ObjectAnimationUsingKeyFrames.KeyFrames>
                                        <DiscreteObjectKeyFrame Value="Blue1"  KeyTime="0" />
                                        <DiscreteObjectKeyFrame Value="DarkGray1" KeyTime="0:0:0.4" />
                                    </ObjectAnimationUsingKeyFrames.KeyFrames>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="Stack" Property="Background" Value="Red" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

score 1 · Answer 1 · answered Jul 11 '16 at 18:24

This looks like a precedence issue. Animations have precedence over trigger-set values. You could either replace your trigger's setter with animations added to the Enter/ExitActions or try using visual states and manage transitions that way (which probably works better because you do not really know what the ExitAction should animate to in all cases).

How can I resolve property conflicts in WPF when using Triggers?

1 Answers1