WPF，在按鈕樣式的Style.Triggers中創建畫筆動畫

Question

我現在在按鈕樣式上工作，我已經包含控件模板和樣式觸發器。現在，當鼠標進入按鈕時，我想讓背景畫筆淡入某種顏色。但彩色動畫不適用於筆刷。我從昨天開始就陷入了困境。以下是我在按鈕樣式中迄今爲止所做的操作：

<Converters:MathConverter x:Key="MathConverter" /> 
<Converters:ColorToBrushConverter x:Key="ColorToBrushConverter" /> 
<Style TargetType="Button"> 
    <Setter Property="FontSize" 
      Value="{Binding FontSizeButton}" /> 
    <Setter Property="Margin" 
      Value="{Binding FontSizeBase, Converter={StaticResource MathConverter}, ConverterParameter=@VALUE/3}" /> 
    <Setter Property="Padding" 
      Value="{Binding FontSizeButton, Converter={StaticResource MathConverter}, ConverterParameter=@VALUE/3}" /> 
    <Setter Property="MinWidth" 
      Value="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" /> 
    <Setter Property="Width" 
      Value="NaN" /> 
    <Setter Property="Background" 
      Value="{Binding BrushBackButton}" /> 
    <Setter Property="BorderBrush" 
      Value="{Binding BrushBorder}" /> 
    <Setter Property="BorderThickness" 
      Value="{Binding BorderThicknessBase}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         Background="{TemplateBinding Background}"> 
        <ContentPresenter x:Name="Content" 
             VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
             TextElement.Foreground="{TemplateBinding Foreground}" /> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
     <!-- 
     <Trigger Property="IsMouseOver" 
       Value="True"> 
      <Setter Property="Background" 
        Value="{Binding BrushBackButtonOver}" /> 
     </Trigger> 
     --> 
     <EventTrigger RoutedEvent="MouseEnter"> 
      <BeginStoryboard> 
       <Storyboard TargetProperty="Background"> 
        <ColorAnimation To="Blue" Duration="10"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Style.Triggers> 
</Style> 

Answer 1

對於這類問題，您應該使用VisualStateManager。

這可能會導致您這樣的事情：

<Style TargetType="{x:Type Button}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
     <ControlTemplate TargetType="{x:Type Button}"> 
      <Border x:Name ="Border" Background="LightBlue"> 
      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="CommonStates"> 
        <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="0:0:0.2"/> 
        </VisualStateGroup.Transitions> 
        <VisualState x:Name="Normal"/> 
        <VisualState x:Name="Pressed"> 
        <Storyboard> 
         <ColorAnimation 
        Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
        To="Red"/> 
        </Storyboard> 
        </VisualState> 
        <VisualState x:Name="MouseOver"> 
         <Storyboard> 
         <ColorAnimation 
        Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
        To="Blue"/> 
         </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <ContentPresenter Content="{TemplateBinding Content}"/> 
     </Border> 
[...] 

[編輯] 關於你的具體問題，你應該把你的觸發器在ControlTemplate中的觸發器。

<ControlTemplate TargetType="{x:Type Button}"> 
[...] 
    <ControlTemplate.Triggers> 
    <EventTrigger RoutedEvent="MouseEnter"> 
     <BeginStoryboard> 
      <Storyboard TargetName="Border" TargetProperty="(Background).(SolidColorBrush.Color)"> 
       <ColorAnimation To="Blue" Duration="0:0:0.2"/> 
      </Storyboard> 
     </BeginStoryboard> 
     </EventTrigger> 
    </ControlTemplate.Triggers>