例外情況：「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

我看到三個問題。

一個是您將故事板添加到資源字典而不指定密鑰。我想你想要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>