如何在WPF中为TextBox添加文字描边？

针对你遇到的问题，这里提供两种可靠解决方案，既能保留TextBox的选中编辑功能，又能实现清晰细腻的文字描边效果：

方案一：修改TextBox模板，叠加描边层 #

通过自定义TextBox的ControlTemplate，在原内容文本层下方添加同步文本的描边层，利用TextBlock的描边属性实现效果，完全不影响原生编辑选中功能。

实现步骤与代码 #

提取默认TextBox模板后，在内容显示区域添加描边用的TextBlock，绑定与原TextBox一致的文本、字体属性，确保对齐：

<Style TargetType="{x:Type TextBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border x:Name="border" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        Background="{TemplateBinding Background}" 
                        SnapsToDevicePixels="True">
                    <Grid>
                        <!-- 描边层：置于底层，仅显示描边 -->
                        <TextBlock Text="{TemplateBinding Text}" 
                                   FontFamily="{TemplateBinding FontFamily}"
                                   FontSize="{TemplateBinding FontSize}"
                                   FontStyle="{TemplateBinding FontStyle}"
                                   FontWeight="{TemplateBinding FontWeight}"
                                   Foreground="Transparent"
                                   Stroke="#000000"
                                   StrokeThickness="2"
                                   Padding="{TemplateBinding Padding}"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   TextWrapping="{TemplateBinding TextWrapping}"/>
                        <!-- 原内容编辑层：保留原生功能 -->
                        <ScrollViewer x:Name="PART_ContentHost" 
                                      Focusable="false" 
                                      HorizontalScrollBarVisibility="Hidden" 
                                      VerticalScrollBarVisibility="Hidden"/>
                    </Grid>
                </Border>
                <!-- 保留默认触发器逻辑 -->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

注意：多行文本场景需给描边TextBlock绑定TextWrapping属性，避免文本溢出。

方案二：继承TextBox自定义绘制（进阶） #

通过重写OnRender方法，使用FormattedText先绘制描边、再绘制填充文本，能实现更精细的描边控制，且完全保留原生功能。

自定义控件代码 #

public class StrokedTextBox : TextBox
{
    public static readonly DependencyProperty StrokeProperty =
        DependencyProperty.Register("Stroke", typeof(Brush), typeof(StrokedTextBox), 
            new FrameworkPropertyMetadata(Brushes.Black, FrameworkPropertyMetadataOptions.AffectsRender));

    public static readonly DependencyProperty StrokeThicknessProperty =
        DependencyProperty.Register("StrokeThickness", typeof(double), typeof(StrokedTextBox), 
            new FrameworkPropertyMetadata(2.0, FrameworkPropertyMetadataOptions.AffectsRender));

    public Brush Stroke
    {
        get => (Brush)GetValue(StrokeProperty);
        set => SetValue(StrokeProperty, value);
    }

    public double StrokeThickness
    {
        get => (double)GetValue(StrokeThicknessProperty);
        set => SetValue(StrokeThicknessProperty, value);
    }

    protected override void OnRender(DrawingContext dc)
    {
        var formattedText = new FormattedText(
            Text,
            CultureInfo.CurrentUICulture,
            FlowDirection,
            new Typeface(FontFamily, FontStyle, FontWeight, FontStretch),
            FontSize,
            Brushes.Black);
        
        // 同步文本属性
        formattedText.SetForegroundBrush(Stroke);
        formattedText.SetFontSize(FontSize);
        formattedText.SetFontFamily(FontFamily);
        formattedText.SetFontStyle(FontStyle);
        formattedText.SetFontWeight(FontWeight);
        formattedText.TextAlignment = TextAlignment;
        formattedText.Trimming = TextTrimming;
        formattedText.Wrapping = TextWrapping;

        // 绘制四方向描边，实现完整轮廓
        var offset = StrokeThickness;
        var basePoint = new Point(Padding.Left, Padding.Top);
        dc.DrawText(formattedText, new Point(basePoint.X + offset, basePoint.Y + offset));
        dc.DrawText(formattedText, new Point(basePoint.X - offset, basePoint.Y + offset));
        dc.DrawText(formattedText, new Point(basePoint.X + offset, basePoint.Y - offset));
        dc.DrawText(formattedText, new Point(basePoint.X - offset, basePoint.Y - offset));

        // 绘制填充文本
        formattedText.SetForegroundBrush(Foreground);
        dc.DrawText(formattedText, basePoint);
    }
}

XAML中使用 #

<local:StrokedTextBox Text="测试描边文字" 
                      Foreground="White" 
                      Stroke="Black" 
                      StrokeThickness="2"
                      Width="200"
                      Height="50"/>

这种方案描边效果细腻，无ShaderEffect的粗糙问题，且完全兼容TextBox的所有原生操作。

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