将Button.Background动画为MouseOver上的LinearGradientBrush

时间:2013-06-25 04:59:15

标签: c# wpf xaml storyboard

我正在设计自定义按钮,并希望在LinearGradientBrush后将其背景更改为MouseOver。这就是我试过的:

<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>

但是当我运行代码时,我得到了这个例外:

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'.

我最初尝试在Blend中为MouseOver事件设置动画,但这并没有覆盖默认模板,因此我最终使用故事板“手动”进行操作。我不明白为什么当LinearGradientBrush真正指向按钮上的To属性时,To不是属性Background的有效值。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:1)

Button Styles and Templates上MSDN页面中的示例ControlTemplate显示了如何通过为MouseOver视觉状态创建故事板来解决您的问题。