InvalidOperationException for ColorAnimation for WPF Grid.Background inside ControlTemplate

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?

Just use `TargetProperty=Background` should work. In case it doesn't recognize `Pink` as a Brush, you might need to use a `StaticResource` for that but afaik it should work with the name alone as long it is a pre-defined color name. — Adwaenyth, Sep 12 '16 at 07:56
@Adwaenyth, sure it does not work. Additional information: 'System.Windows.Media.Animation.ColorAnimation' animation object cannot be used to animate property 'Background' because it is of incompatible type 'System.Windows.Media.Brush'. — TecMan, Sep 12 '16 at 08:08
Mh... try as `Storyboard.TargetProperty=(GroupBox.Background).(SolidColorBrush.Color)`, does that work then as noted [here](http://stackoverflow.com/questions/14158500/wpf-animate-background-color)? — Adwaenyth, Sep 12 '16 at 08:12
@Adwaenyth, still the same unhandled exception of type 'System.InvalidOperationException' occurred in PresentationFramework.dll. Additional information: 'Background' property does not point to a DependencyObject in path '(0).(1)'. — TecMan, Sep 12 '16 at 08:28

score 1 · Answer 1 · answered Sep 12 '16 at 10:20

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"

Yes, really, and I even thought about this: how can ColorAnimation know how to animate from a non-set color to pink? However, I need to do this the universal way, i.e. without setting a predefined color for the main layout grid. Is there a way to implement this? — TecMan, Sep 12 '16 at 11:17
BTW, even the simple property setting in the Grid node helps: ``. — TecMan, Sep 12 '16 at 11:17
You could define a default-background for the grid. The built-in default should be Transparent or White. Just set it again and you'll have a more generic approach. — lokusking, Sep 12 '16 at 12:40
Doesn't setting the Background to Transparent change the mouse behavior in the control? See also this [SO discussion](http://stackoverflow.com/questions/5344699/xnull-vs-transparent). Is there a way to animate the background from Null to a specified color? — TecMan, Sep 13 '16 at 07:22
Not really. It doesnt matter **what** you initially set as Background as long you do set one. Wpf is not really pretty on some places but we have to deal with it — lokusking, Sep 13 '16 at 07:24

InvalidOperationException for ColorAnimation for WPF Grid.Background inside ControlTemplate

1 Answers1