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本身。实际上，您可以关闭该属性，默认情况下它将以Button为目标。

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

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

例外：“缺少'故事板'对象上的键值。”带有样式触发器

1 个答案: