Animating Button.Background to a LinearGradientBrush on MouseOver

Question

I'm designing a custom button and want to change the its background to a LinearGradientBrush upon MouseOver. This is what I tried:

<UserControl Height="Auto" Width="Auto">
<UserControl.Resources>
    <LinearGradientBrush x:Key="toBackgroundBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFC8C8C8" Offset="1"/>
        <GradientStop Color="#FF626161" Offset="0.599"/>
        <GradientStop Color="#FF787878" Offset="0.497"/>
        <GradientStop Color="#FF939393" Offset="1"/>
    </LinearGradientBrush>
</UserControl.Resources>

<Grid>
    <Button Content="Button" Foreground="#FFFFFEFE" Height="30" Width="120">
        <Button.Background>
            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFC8C8C8" Offset="0"/>
                <GradientStop Color="#FF626161" Offset="0.539"/>
                <GradientStop Color="#FF787878" Offset="0.467"/>
                <GradientStop Color="#FF939393" Offset="1"/>
            </LinearGradientBrush>
        </Button.Background>
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation 
                                                    Storyboard.TargetProperty="Background"
                                                    AutoReverse="True"
                                                    Duration="0:0:0.25"
                                                    To="{StaticResource toBackgroundBrush}">
                                    </ColorAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
</Grid>

When I run the code however, I get this exception:

Cannot convert the value in attribute 'To' to object of type 
'System.Nullable`1[[System.Windows.Media.Color, PresentationCore, Version=3.0.0.0, 
Culture=neutral, PublicKeyToken=31bf3856ad364e35]]'. 
'System.Windows.Media.LinearGradientBrush' is not a valid value for property 'To'.

I initially attempted to animate the MouseOver event in Blend, but that didn't override the default template so I ended up doing in "manually" using a storyboard. I don't understand why a LinearGradientBrush is not a valid value for property To when To really points to the Background property on the button. Any help is appreciated.

See if this SO question helps http://stackoverflow.com/questions/4050032/animation-change-from-lineargradientbrush-to-solidcolorbrush — Mark Hall, Jun 25 '13 at 05:18
@MarkHall I tried it... doesn't change anything, the color keeps changing to the default Windows Button style. — Arian Motamedi, Jun 25 '13 at 05:41
A `Brush` is not a `Color`. Hence you can't animate the `Background` of type `Brush` with a `ColorAnimation`, and you can't assign a `Brush` to the `To` property of type `Color`. — Clemens, Jun 25 '13 at 07:11
You may want to take a look at [Button Styles and Templates](http://msdn.microsoft.com/en-us/library/ms753328.aspx) to find out how the `MouseOver` VisualState is implemented. — Clemens, Jun 25 '13 at 07:31
@Clemens Using `VisualStateManager` did the trick, thanks! Post your comment as an answer if you want and I'll accept it. — Arian Motamedi, Jun 26 '13 at 01:46

Clemens · Accepted Answer · 2013-06-26T12:30:59.090

1

The example ControlTemplate in the MSDN page on Button Styles and Templates shows how to solve your problem by creating a Storyboard for the MouseOver visual state.

edited Jun 26 '13 at 12:30

answered Jun 26 '13 at 07:15

Clemens

123,504
12
155
268

Animating Button.Background to a LinearGradientBrush on MouseOver

1 Answers1