异常：“‘Storyboard’ 上缺少键值对象。”带有样式触发器

Question

我正在重新设计一个按钮，其中包括提供 controlTemplate 并添加一些触发器（用于 mouseenter 和 mouseleave）。

我的 XAML 如下：

<Style TargetType="Button">
    <Style.Resources>
        <Color  x:Key="ForeColour" R="128" G="128" B="128" A="255"/>

        <Color x:Key="BackColour" R="211" G="211" B="211" A="255"/>

        <Color x:Key="GlowColour" R="30" G="144" B="255" A="255"/>

        <SolidColorBrush Color="{StaticResource ResourceKey=ForeColour}" x:Key="ForeBrush"/>

        <LinearGradientBrush x:Key="BackBrush" StartPoint="0,1" EndPoint="0,0">
            <GradientStop Color="White" Offset="0.5"/>
            <GradientStop Color="{StaticResource ResourceKey=BackColour}"  Offset="1"/>
        </LinearGradientBrush>

        <Storyboard x:Name="mouseOverText">
            <ColorAnimation Storyboard.Target="{Binding RelativeSource= {RelativeSource Self}" Storyboard.TargetProperty="Foreground" From="{StaticResource ResourceKey=ForeColour}" To="{StaticResource ResourceKey=GlowColour}"/>
        </Storyboard>

    </Style.Resources>

    <Setter Property="Foreground" Value="{StaticResource ResourceKey=ForeBrush}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border BorderBrush="LightGray" BorderThickness="2" CornerRadius="8" Background="{StaticResource ResourceKey=BackBrush}">
                        <ContentPresenter x:Name="cnpContent" Opacity="1" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <EventTrigger  RoutedEvent="MouseEnter">
            <BeginStoryboard Storyboard="{StaticResource mouseOverText}"/>
        </EventTrigger>
    </Style.Triggers>
</Style>

但是当我运行它时，启动时出现以下错误：

'Missing key value on 'Storyboard' object.' Line number '88' and line position '31'.

对应于这一行：

<ColorAnimation Storyboard.Target="{Binding RelativeSource= {RelativeSource Self}" Storyboard.TargetProperty="Foreground" From="{StaticResource ResourceKey=ForeColour}" To="{StaticResource ResourceKey=GlowColour}"/>

我想做的就是当鼠标悬停在按钮上时，让按钮的前景淡入不同的颜色。有人知道我哪里出错了吗？我似乎无法理解它。

Answer 1

我看到三个问题。

一种是您将 Storyboard 添加到资源字典中而不指定键。我认为您需要 x:Key 而不是 x:Name。

接下来，通过将 Storyboard.Target 设置为与 RelativeSource Self 的绑定，您可以将目标设置为 ColorAnimation 本身。实际上，您可以关闭该属性，默认情况下它将以按钮为目标。

最后，您将 TargetProperty 设置为 Foreground，但您实际上想要为 Foreground 画笔的 Color 属性设置动画，因此您需要使用 Foreground.Color。试试这个：

<Storyboard x:Key="mouseOverText">
    <ColorAnimation
        Storyboard.TargetProperty="Foreground.Color"
        From="{StaticResource ResourceKey=ForeColour}"
        To="{StaticResource ResourceKey=GlowColour}"/>
</Storyboard>