Changing StackPanel Background color with ColorAnimation

Question

Well, I'm trying to change the Background color of a StackPanel in a DataTemplate using ColorAnimation:

    <DataTemplate DataType="{x:Type logic:Sensor}">
        <StackPanel Name="SensorPanel" MouseDown="SensorPanel_MouseDown">
        </StackPanel>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding Status}" Value="0">
                <!--<Setter TargetName="SensorPanel" Property="Background" Value="LawnGreen" />-->

                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation 
                                Storyboard.TargetName="SensorPanel" 
                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                To="LawnGreen" Duration="0:0:0.25" AutoReverse="True" RepeatBehavior="4">
                            </ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>

            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>

No Compile-Time Errors. But when I run this an InvalidOperationException is thrown: "'Background' property does not point to a DependencyObject in path '(0).(1)'."

What? :D

[link](http://stackoverflow.com/questions/17399210/background-property-does-not-point-to-a-dependencyobject-in-path-0-1) You may see this link as it similar to your problem. — TM Rocket, Aug 05 '13 at 08:41

score 17 · Accepted Answer · answered Mar 17 '12 at 09:32

Your code worked perfectly for me. I just made minor modifications.

    <DataTemplate DataType="{x:Type Model:Sensor}">
        <StackPanel Name="SensorPanel" Background="LightBlue" Width="100" Margin="5">
            <TextBlock Text="{Binding Name}"/>
            <ToggleButton Margin="2" IsChecked="{Binding IsChecked}" Content="Set status=0" />
        </StackPanel>
      <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding Status}" Value="0">
                <!--<Setter TargetName="SensorPanel" Property="Background" Value="LawnGreen" />-->

                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation 
                            Storyboard.TargetName="SensorPanel" 
                            Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                            To="LawnGreen" Duration="0:0:0.25" AutoReverse="True" RepeatBehavior="4">
                            </ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>

            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>

    <ListBox ItemsSource="{Binding Sensors}" />

Thanks, But is it Supposed to repeat forever? because it does. :( — liranxs, Mar 17 '12 at 15:37
RepeatBehaviour="4x" will fix it. Specifying a number is interpreted as a TimeSpan so what you've got means '04:00:00' or 'for 4 hours'. — Phil, Mar 17 '12 at 15:42

score 11 · Answer 2 · edited Jul 26 '16 at 23:39

For documentation purposes:

It is a little hard to use (Panel.Background).(SolidColorBrush.Color). The real problem is that ColorAnimation only works for the Color property, instead of Brush. For me this is the trick:

Define your panel brush...

<StackPanel Name="SensorPanel" MouseDown="SensorPanel_MouseDown">
    <StackPanel.Background>
        <SolidColorBrush Color="White" x:Name="PanelColor"/>
    </StackPanel.Background>
</StackPanel>

...then animate the Color property of SolidColorBrush instead:

<ColorAnimation 
    Storyboard.TargetName="PanelColor" 
    Storyboard.TargetProperty="Color"
    To="LawnGreen" Duration="0:0:0.25" AutoReverse="True" RepeatBehavior="4">

Changing StackPanel Background color with ColorAnimation

2 Answers2