为带水印TextBox实现悬停半宽底部线条及ColorAnimation动画效果

下面是修改后的完整样式代码，实现了鼠标悬停时底部显示半宽线条，并带有颜色渐变动画：

<Style TargetType="{x:Type local:TextBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:TextBox}">
                <DockPanel HorizontalAlignment="Stretch">
                    <Border CornerRadius="10" BorderBrush="{StaticResource BackgroundColor}" BorderThickness="1" Background="{StaticResource BackgroundColor}">
                        <Grid Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth}">
                            <!-- 原有输入框和水印文本 -->
                            <TextBox Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth}" 
                                     VerticalAlignment="Center" 
                                     Foreground="{StaticResource TextColor}" 
                                     Background="{StaticResource BackgroundColor}" 
                                     Padding="10" 
                                     HorizontalAlignment="Left" 
                                     x:Name="SearchTermTextBox" 
                                     Margin="5" 
                                     BorderThickness="0"/>
                            <TextBlock IsHitTestVisible="False" 
                                       Text="Enter Search Term Here" 
                                       VerticalAlignment="Center" 
                                       HorizontalAlignment="Left" 
                                       Margin="20,0,0,0" 
                                       Foreground="{StaticResource TextColor}" 
                                       Background="{StaticResource BackgroundColor}">
                                <TextBlock.Style>
                                    <Style TargetType="{x:Type TextBlock}">
                                        <Setter Property="Visibility" Value="Collapsed"/>
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Text, ElementName=SearchTermTextBox}" Value="">
                                                <Setter Property="Visibility" Value="Visible"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </TextBlock.Style>
                            </TextBlock>
                            
                            <!-- 新增的底部悬停线条 -->
                            <Border x:Name="HoverLine" 
                                    Height="2" 
                                    Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth, Converter={StaticResource HalfWidthConverter}}"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Bottom"
                                    Background="Transparent"
                                    Margin="0,0,0,5"/>
                        </Grid>         
                    </Border>
                    
                    <!-- 触发器与动画 -->
                    <ControlTemplate.Triggers>
                        <!-- 鼠标悬停时显示线条动画 -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="HoverLine"
                                                        Storyboard.TargetProperty="Background.Color"
                                                        From="Transparent"
                                                        To="{StaticResource TextColor}"
                                                        Duration="0:0:0.3"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <!-- 鼠标离开时隐藏线条动画 -->
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="HoverLine"
                                                        Storyboard.TargetProperty="Background.Color"
                                                        From="{StaticResource TextColor}"
                                                        To="Transparent"
                                                        Duration="0:0:0.3"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关键改动说明： #

• 新增底部线条元素：在Grid中添加了名为HoverLine的Border，初始背景为透明，宽度绑定到TextBox实际宽度的一半（需要自定义一个HalfWidthConverter转换器，代码见下方），水平居中、底部对齐。
• 悬停动画触发器：在ControlTemplate.Triggers中添加IsMouseOver触发器，通过ColorAnimation实现线条颜色在透明和实色之间的平滑过渡，时长0.3秒。
• 宽度转换器：需要实现一个IValueConverter来获取实际宽度的一半，代码如下：

public class HalfWidthConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double width)
        {
            return width / 2;
        }
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

别忘了在XAML资源中声明这个转换器：

<local:HalfWidthConverter x:Key="HalfWidthConverter"/>

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