Not all DataTriggers of StackPanel are working

Question

I have a button which shows a text and an image: For this I use a StackPanel with a TextBlock and an Image inside of it.

When the variable "ActiveState" changes the Background of the StackPanel should change too, for this I use DataTriggers

ActiveState=0 -> Red / ActiveState=1 -> Blue / ActiveState=2 -> blinking Blue (for this I use a Storyboard and a Color Animation)

The blinking Trigger (Value=2) is working fine, but the two other Triggers (Value=0 + Value=1) are not working.

When I remove the Background of the Stackpanel (Background="Transparent") the first two Triggers are working but the last one get the following Exception:

An unhandled exception of type 'System.InvalidOperationException' occurred in PresentationFramework.dll

Additional information: Background property does not point to a dependencyobject in path '(0).(1)'

This is my code:

<Button>
  <Button.Template>
    <ControlTemplate TargetType="Button">
        <StackPanel Orientation="Horizontal" Name="SelectButtonStackpanel" Background="Transparent">
            <TextBlock Text="{Binding Text}"/>
            <Image Source="{Binding Image}" Stretch="Uniform" Height="40" Width="40"/>                    
                <StackPanel.Style>
                    <Style TargetType="{x:Type StackPanel}">
                        <Style.Triggers>

                            <DataTrigger Binding="{Binding ActiveState}" Value="0">
                                <Setter Property="Background" Value="Red"/>
                            </DataTrigger>

                            <DataTrigger Binding="{Binding ActiveState}" Value="1">
                                <Setter Property="Background" Value="Blue"/>
                            </DataTrigger>

                            <DataTrigger Binding="{Binding ActiveState}" Value="2">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation 
                                                Storyboard.TargetProperty="(StackPanel.Background).(SolidColorBrush.Color)"
                                                To="Blue" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever"
                                                >
                                            </ColorAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>

                                <DataTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation 
                                                Storyboard.TargetProperty="(StackPanel.Background).(SolidColorBrush.Color)"
                                                Duration="0:0:1"
                                                >
                                            </ColorAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>

                        </Style.Triggers>
                    </Style>
                </StackPanel.Style>
            </StackPanel>
    </ControlTemplate>
  </Button.Template>
</Button>

Do you have any idea how I get all three Triggers working?

best regards Phil

Answer 1

When you directly set Background="Transparent" on the StackPanel, this has higher precedence than a value set from a Style Setter. So remove the direct assignment and add another Setter for the default Background.

Besides that, if you want to animate Background.Color you should always explictly assign SolidColorBrushes instead of predefined Brushes like Background="Red".

<StackPanel Orientation="Horizontal" Name="SelectButtonStackpanel">
    <StackPanel.Style>
        <Style TargetType="StackPanel">
            <Setter Property="Background">
                <Setter.Value>
                    <SolidColorBrush Color="Transparent"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding ActiveState}" Value="0">
                    <Setter Property="Background">
                        <Setter.Value>
                            <SolidColorBrush Color="Red"/>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding ActiveState}" Value="1">
                    <Setter Property="Background">
                        <Setter.Value>
                            <SolidColorBrush Color="Blue"/>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding ActiveState}" Value="2">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.Color"
                                    To="Blue" Duration="0:0:1"
                                    AutoReverse="True" RepeatBehavior="Forever">
                                </ColorAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Style>
</StackPanel>