如何在WPF中为Button的BorderThickness添加动画效果？

问题描述 #

我是WPF和XAML新手，掌握了基础的StoryBoard动画，但给自定义样式的按钮实现鼠标悬停边框动画时遇到了困难：

• 自定义样式的按钮，宽、高、字号、背景动画都正常，但边框厚度动画无反应，因为边框是控件模板内部元素，外部无法直接访问。
• 将动画移到样式的IsMouseOver触发器中仍无效，拆分BorderThickness四个方向做动画还抛出System.InvalidOperationException异常。
• 当前仅能实现悬停显示静态边框，无法添加动画效果。

相关代码片段 #

自定义按钮样式

<Style x:Key="DarkButtonNoBG" TargetType="{x:Type Button}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="DarkGray" />
    <Setter Property="FontWeight" Value="Light"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid Background="{TemplateBinding Background}">
                    <Border BorderThickness="0" BorderBrush="White">
                        <ContentPresenter x:Name="MyContentPresenter" 
                                      Content="{TemplateBinding Content}"
                                      HorizontalAlignment="Center" 
                                      VerticalAlignment="Center" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    ...
</Style>

带动画的按钮控件代码

<Button Style="{StaticResource DarkButtonNoBG}" x:Name="btnStart" Grid.Row="4" Height="40" Width="150"
         Click="btnStart_Click" Content="Start" FontSize="17" Foreground="White" BorderThickness="0" BorderBrush="White">
    <Button.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Width" From="150" To="165" Duration="0:0:0.4" DecelerationRatio="1"/>
                    <DoubleAnimation Storyboard.TargetProperty="Height" From="40" To="50" Duration="0:0:0.4" DecelerationRatio="1"/>
                    <DoubleAnimation Storyboard.TargetProperty="FontSize" From="17" To="20" Duration="0:0:0.4" DecelerationRatio="1"/>
                    <ColorAnimation Storyboard.TargetProperty="Background.Color" From="Transparent" To="#88444444"
                                    Duration="0:0:0.4" DecelerationRatio="1"/>
                    <ThicknessAnimation Storyboard.TargetProperty="BorderThickness" To="2,2,2,2" Duration="0:0:1"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Width" From="165" To="150" Duration="0:0:0.4" DecelerationRatio="1"/>
                    <DoubleAnimation Storyboard.TargetProperty="Height" From="50" To="40" Duration="0:0:0.4" DecelerationRatio="1"/>
                    <DoubleAnimation Storyboard.TargetProperty="FontSize" From="20" To="17" Duration="0:0:0.4" DecelerationRatio="1"/>
                    <ColorAnimation Storyboard.TargetProperty="Background.Color" From="#88444444" To="Transparent"
                                    Duration="0:0:0.4" DecelerationRatio="1"/>
                    <ThicknessAnimation Storyboard.TargetProperty="BorderThickness" 
                                        To="0,0,0,0" Duration="0:0:0.4"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

解决方法 #

核心思路是在控件模板内部为Border命名，通过Storyboard.TargetName指定动画目标，并将动画逻辑放在模板的触发器中，这样就能直接访问模板内的Border元素。

修改后的完整样式代码 #

<Style x:Key="DarkButtonNoBG" TargetType="{x:Type Button}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="DarkGray" />
    <Setter Property="FontWeight" Value="Light"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid Background="{TemplateBinding Background}">
                    <!-- 为Border添加名称，方便动画定位 -->
                    <Border x:Name="ButtonBorder" BorderThickness="0" BorderBrush="White">
                        <ContentPresenter x:Name="MyContentPresenter" 
                                      Content="{TemplateBinding Content}"
                                      HorizontalAlignment="Center" 
                                      VerticalAlignment="Center" />
                    </Border>
                </Grid>
                <!-- 模板内触发器，统一处理悬停动画 -->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <!-- 背景颜色动画 -->
                                    <ColorAnimation Storyboard.TargetProperty="Background.Color" 
                                                    To="#88444444" Duration="0:0:0.4" DecelerationRatio="1"/>
                                    <!-- 边框厚度动画，指定目标为模板内的ButtonBorder -->
                                    <ThicknessAnimation Storyboard.TargetName="ButtonBorder"
                                                        Storyboard.TargetProperty="BorderThickness"
                                                        To="2,2,2,2" Duration="0:0:0.5"/>
                                    <!-- 按钮宽高、字号动画 -->
                                    <DoubleAnimation Storyboard.TargetProperty="Width" From="150" To="165" Duration="0:0:0.4" DecelerationRatio="1"/>
                                    <DoubleAnimation Storyboard.TargetProperty="Height" From="40" To="50" Duration="0:0:0.4" DecelerationRatio="1"/>
                                    <DoubleAnimation Storyboard.TargetProperty="FontSize" From="17" To="20" Duration="0:0:0.4" DecelerationRatio="1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="Background.Color" 
                                                    To="Transparent" Duration="0:0:0.4" DecelerationRatio="1"/>
                                    <ThicknessAnimation Storyboard.TargetName="ButtonBorder"
                                                        Storyboard.TargetProperty="BorderThickness"
                                                        To="0,0,0,0" Duration="0:0:0.5"/>
                                    <DoubleAnimation Storyboard.TargetProperty="Width" From="165" To="150" Duration="0:0:0.4" DecelerationRatio="1"/>
                                    <DoubleAnimation Storyboard.TargetProperty="Height" From="50" To="40" Duration="0:0:0.4" DecelerationRatio="1"/>
                                    <DoubleAnimation Storyboard.TargetProperty="FontSize" From="20" To="17" Duration="0:0:0.4" DecelerationRatio="1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

简化后的按钮控件代码 #

此时按钮不需要再写内部触发器，直接引用样式即可：

<Button Style="{StaticResource DarkButtonNoBG}" x:Name="btnStart" Grid.Row="4" 
        Height="40" Width="150" Click="btnStart_Click" 
        Content="Start" FontSize="17" Foreground="White" />

关键要点 #

• 命名模板内元素：给Border添加x:Name，让动画能精准定位到目标元素。
• 模板内统一处理动画：将动画逻辑放在ControlTemplate.Triggers中，确保能访问模板内部的所有元素。
• 直接使用ThicknessAnimation：无需拆分BorderThickness的四个方向，避免抛出异常。

内容的提问来源于stack exchange，提问作者Crocialist