如何设置IsEnabled属性上按钮的动画

Question

我目前正在资源字典中的WPF.NET Core 3.1中设置按钮模板的样式，并且我希望在按钮的IsEnabled属性设置为true/false时淡化按钮颜色。根据这个链接，我们似乎可以用Trigger.Enter/ExitActions轻松地做到这一点。然而，我似乎无法让它发挥作用。

我尝试了一些变体：

<Trigger Property="IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="Background.Color"
Duration="0:0:0.3"
To="{StaticResource ButtonGray}"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>

将所有内容放在一个触发器中：

<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.BackgroundBrush}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.BorderBrush}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.ForegroundBrush}"/>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="Background.Color"
Duration="0:0:0.3"
To="{StaticResource ButtonGray}"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>

最后，我尝试了触发器在同一触发器中同时具有EnterActions和ExitActions的情况。知道为什么不起作用吗？

更新：整按钮样式：

<Style TargetType="{x:Type Control}" x:Key="ControlBase">
<Setter Property="FontFamily" Value="Poppins"/>
</Style>
<!-- Gray Button Styles -->
<Color x:Key="SmallButtonGray">#BB222222</Color>
<SolidColorBrush x:Key="SmallButtonGrayBrush" Color="{StaticResource SmallButtonGray}"/>
<Color x:Key="Button.Hover.BGGray">#BB333333</Color>
<SolidColorBrush x:Key="Button.Hover.BGGrayBrush" Color="{StaticResource Button.Hover.BGGray}"/>
<Color x:Key="Button.Click.Gray">#BB888888</Color>
<SolidColorBrush x:Key="Button.Click.GrayBrush" Color="{StaticResource Button.Click.Gray}"/>
<Color x:Key="Button.Disabled.Background">#44BBBBBB</Color>
<SolidColorBrush x:Key="Button.Disabled.BackgroundBrush" Color="{StaticResource Button.Disabled.Background}"/>
<Color x:Key="Button.Disabled.Border">#FFADB2B5</Color>
<SolidColorBrush x:Key="Button.Disabled.BorderBrush" Color="{StaticResource Button.Disabled.Border}"/>
<Color x:Key="Button.Disabled.Foreground">#FF838383</Color>
<SolidColorBrush x:Key="Button.Disabled.ForegroundBrush" Color="{StaticResource Button.Disabled.Foreground}"/>
<!-- Small Button Styles -->
<Style x:Key="SmallButtonStyle" TargetType="Button" BasedOn="{StaticResource ControlBase}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="FontWeight" Value="Light" />
<Setter Property="FontSize" Value="18"/>
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="TextOptions.TextRenderingMode" Value="ClearType"/>
<Setter Property="UseLayoutRounding" Value="True"/>
<Setter Property="BorderThickness" Value="1"/>
</Style>
<!-- Page Buttons-->
<Style x:Key="GrayButtonStyle" TargetType="Button" BasedOn="{StaticResource SmallButtonStyle}">
<Setter Property="Background" Value="{StaticResource SmallButtonGrayBrush}"/>
<Setter Property="Foreground" Value="{StaticResource BGWhiteBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource FGBlackBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border x:Name="border" 
Background="{TemplateBinding Background}" 
BorderThickness="{TemplateBinding BorderThickness}" 
BorderBrush="{TemplateBinding BorderBrush}" 
SnapsToDevicePixels="false"         
RenderTransformOrigin="0.5,0.5"
RenderOptions.BitmapScalingMode="HighQuality">
<ContentPresenter x:Name="contentPresenter" Focusable="False" 
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" 
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Border.RenderTransform>
<ScaleTransform/>
</Border.RenderTransform>
</Border>
<ControlTemplate.Triggers>
<!-- Button Mouse Hover Animation -->
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard >
<ColorAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="Background.Color"
To="{StaticResource Button.Hover.BGGray}"
Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
To="1.05"
Duration="0:0:0.3"/>
<DoubleAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
To="1.05"
Duration="0:0:0.3"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="{StaticResource ButtonGray}"
Duration="0:0:0.4"
Storyboard.TargetName="border"
Storyboard.TargetProperty="Background.Color"/>
<DoubleAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
To="1"
Duration="0:0:0.3"/>
<DoubleAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
To="1"
Duration="0:0:0.3"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<!-- Button Mouse Click Animation -->
<EventTrigger RoutedEvent="PreviewMouseDown">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="Background.Color"
To="{StaticResource Button.Click.Gray}"
Duration="0:0:0.2"/>

<DoubleAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
To="1"
Duration="0:0:0.1"/>
<DoubleAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
To="1"
Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="PreviewMouseUp">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="Background.Color"
To="{StaticResource Button.Hover.BGGray}"
Duration="0:0:0.1"/>
<DoubleAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
Duration="0:0:0.1"
To="1.05"/>
<DoubleAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
Duration="0:0:0.1"
To="1.05"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<!-- Not Enabled -->
<Trigger Property="IsEnabled" Value="false">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="Background.Color"
Duration="0:0:0.3"
To="{StaticResource Button.Disabled.Background}"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="Background.Color"
Duration="0:0:0.3"
To="{StaticResource SmallButtonGray}"/>

</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>

<!-- Enabled -->
<!-- Fade back into normal colors -->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

出于调试目的，我修改了模板，以便在您试图设置动画的BackGround属性中查看笔刷实例的属性值。

<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border x:Name="border" 
Background="{TemplateBinding Background}" 
BorderThickness="{TemplateBinding BorderThickness}" 
BorderBrush="{TemplateBinding BorderBrush}" 
SnapsToDevicePixels="false"         
RenderTransformOrigin="0.5,0.5"
RenderOptions.BitmapScalingMode="HighQuality">
<StackPanel>
<TextBlock Text="{Binding Background.Color, ElementName=border}"/>
<TextBlock Text="{Binding Background.IsFrozen, ElementName=border}"/>
</StackPanel>
<!--<ContentPresenter x:Name="contentPresenter" Focusable="False" 
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" 
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>-->
</Border>
<ControlTemplate.Triggers>

显示了SolidColorBrush实例(SmallButtonGrayBrash资源(已冻结的信息。但是冻结的实例是不可变的。

发生这种情况是因为SmallButtonGrayBrash和SmallButton Gray资源是使用StaticResource检索的。如果使用DynamicResource接收资源，则实例不会冻结，动画也会正常工作。

<!-- Gray Button Styles -->
<Color x:Key="SmallButtonGray">#BB222222</Color>
<SolidColorBrush x:Key="SmallButtonGrayBrush" Color="{DynamicResource SmallButtonGray}"/>

<!-- Page Buttons-->
<Style x:Key="GrayButtonStyle" TargetType="Button" BasedOn="{StaticResource SmallButtonStyle}">
<Setter Property="Background" Value="{DynamicResource SmallButtonGrayBrush}"/>