InvalidOperationException for ColorAnimation for WPF Grid.Background inside ControlTemplate


Keywords:wpf 


Question: 

I'm customizing the stock WPF GroupBox control. I need to implement a color animation for its background when the mouse pointer enters the control area - say, change the background color slowly to a predefined color (let it be pink). I created a custom control template for that, and its essential part looks like this:

<ControlTemplate TargetType="{x:Type GroupBox}">
    <Grid Name="MainGrid" SnapsToDevicePixels="true">
        <!-- Control layout stuff with ContentPresenter -->
    </Grid>

    <ControlTemplate.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation
                        Storyboard.TargetName="MainGrid"
                        Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
                        To="Pink" Duration="0:0:1" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

However, I can't make this animation work. I always get an unhandled exception of type:

'System.InvalidOperationException' occurred in PresentationFramework.dll with additional information like this: 'Background' property does not point to a DependencyObject in path 'Background.(0)'

I googled this problem. It seems, I need to use the correct syntax for the TargetProperty to animate. However, I tried a lot of variants like the following ones and they all do not work in my case:

  • Background.Color
  • (Panel.Background).Color
  • (Panel.Background).(SolidColorBrush.Color)
  • (Grid.Background).(SolidColorBrush.Color)

Am I searching not in the right direction?


1 Answer: 

Your TargetElement needs an initial Setter in its Style in order to get the Animation to work.

Example

<GroupBox>
        <GroupBox.Style>
            <Style TargetType="GroupBox">
                <Style.Setters>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type GroupBox}">
                                <Grid Name="MainGrid" SnapsToDevicePixels="true">
                                    <Grid.Style>
                                        <Style TargetType="Grid">
                                            <Setter Property="Background" Value="Blue"></Setter>
                                        </Style>
                                    </Grid.Style>
                                    <ContentPresenter/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <EventTrigger RoutedEvent="MouseEnter">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="MainGrid" Storyboard.TargetProperty="Background.Color" To="Pink" Duration="0:0:1" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style.Setters>
            </Style>
        </GroupBox.Style>
        <Button Content="test" Width="200" Height="50"></Button>
    </GroupBox>

After doing this, you can easily use Storyboard.TargetProperty="Background.Color"