如何為 IsEnabled 屬性上的按鈕設置動畫？

Question

我目前正在資源字典中的 WPF .NET Core 3.1 中設置按鈕模板的樣式，當按鈕的 IsEnabled 屬性設置為 true/false 時，我想淡化按鈕顏色。 根據此鏈接，我們似乎可以使用Trigger.Enter/ExitActions輕松完成此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

出於調試目的，我修改了模板以在您嘗試設置動畫的背景屬性中查看畫筆實例的屬性值。

                <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 實例（SmallButtonGrayBrush 資源）被凍結的信息。 但是凍結的實例是不可變的。

這是因為 SmallButtonGrayBrush 和 SmallButtonGray 資源是使用 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}"/>