WPF,以样式创建笔刷动画。按钮样式的触发器

WPF,以样式创建笔刷动画。按钮样式的触发器,wpf,xaml,animation,styles,storyboard,Wpf,Xaml,Animation,Styles,Storyboard,我现在正在研究一种按钮样式,包括一个控件模板和样式触发器。现在,我想使背景刷淡入某种颜色时,鼠标进入按钮。但是彩色动画不能与画笔一起使用。从昨天起我就一直坚持这一点。以下是我迄今为止所做的按钮风格: <Converters:MathConverter x:Key="MathConverter" /> <Converters:ColorToBrushConverter x:Key="ColorToBrushConverter" /> <Style TargetType

我现在正在研究一种按钮样式,包括一个控件模板和样式触发器。现在,我想使背景刷淡入某种颜色时,鼠标进入按钮。但是彩色动画不能与画笔一起使用。从昨天起我就一直坚持这一点。以下是我迄今为止所做的按钮风格:

<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>

对于此类问题,您应该使用

它可能会让你想到这样的事情:

   <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>

[...]

如果在
触发器中可以更轻松地使用
VisualStateManager
,他们为什么要使用它?请查看您的question@SheridanVisualStateManager更加优雅、强大和灵活,我并不觉得它特别困难。看一看这篇文章:伙计,我知道VisualStateManager
。。。当然,它更强大,在正确的情况下,它是伟大的。我的观点是,对于像这样简单的事情,当一个简单的
触发器可以做同样的事情时,使用它并被迫在后面的代码中写入(
GoToState
)是过分的。但我还是同意不同意,把它放在那里。首先,我不一定是在和你说话,也不一定是在和任何可能在听我们谈话的人说话。不过,我还是不明白你的观点。他正在制作标准按钮的模板,该按钮已经“进入状态”。这里不需要添加代码隐藏@DavidDanielDiamond->将我的visual state manager解决方案更新为Functional解决方案。
Duration
属性需要一个
TimeSpan
对象,格式如下:
0:0:10
持续10秒。另外,请查看MSDN上的页面,了解如何执行您想要的操作。