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>