WPF中如何使文字外轮廓完全位于字符外部？

你的问题核心是两个点：把默认居中的描边改成完全在字符外部，同时让文本支持用户编辑。下面给你一步步拆解实现方案：

一、解决轮廓居中问题：生成纯外部描边 #

WPF自带的Stroke是沿着文本几何的中心线绘制的，所以会有一半嵌在字符里。要实现纯外部轮廓，我们需要基于原始文本的几何，生成一个向外膨胀的轮廓路径，而不是直接用内置的Stroke属性。

我写了一个改进版的自定义控件ExternalOutlinedTextBlock，核心用GetWidenedPathGeometry方法生成外部轮廓：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

public class ExternalOutlinedTextBlock : Control
{
    // 文本依赖属性，支持双向绑定
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(ExternalOutlinedTextBlock),
            new FrameworkPropertyMetadata(string.Empty, FrameworkPropertyMetadataOptions.AffectsRender));

    public string Text
    {
        get => (string)GetValue(TextProperty);
        set => SetValue(TextProperty, value);
    }

    // 轮廓颜色
    public static readonly DependencyProperty StrokeProperty =
        DependencyProperty.Register("Stroke", typeof(Brush), typeof(ExternalOutlinedTextBlock),
            new FrameworkPropertyMetadata(Brushes.Black, FrameworkPropertyMetadataOptions.AffectsRender));

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

    // 轮廓厚度
    public static readonly DependencyProperty StrokeThicknessProperty =
        DependencyProperty.Register("StrokeThickness", typeof(double), typeof(ExternalOutlinedTextBlock),
            new FrameworkPropertyMetadata(1.0, FrameworkPropertyMetadataOptions.AffectsRender));

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

    // 字体大小（复用TextBlock的属性定义）
    public static readonly DependencyProperty FontSizeProperty =
        TextBlock.FontSizeProperty.AddOwner(typeof(ExternalOutlinedTextBlock),
            new FrameworkPropertyMetadata(12.0, FrameworkPropertyMetadataOptions.AffectsRender));

    public double FontSize
    {
        get => (double)GetValue(FontSizeProperty);
        set => SetValue(FontSizeProperty, value);
    }

    protected override void OnRender(DrawingContext dc)
    {
        base.OnRender(dc);

        if (string.IsNullOrWhiteSpace(Text)) return;

        // 创建文本格式对象
        var typeface = new Typeface(FontFamily, FontStyle, FontWeight, FontStretch);
        var formattedText = new FormattedText(
            Text,
            System.Globalization.CultureInfo.CurrentUICulture,
            FlowDirection.LeftToRight,
            typeface,
            FontSize,
            Brushes.Transparent); // 填充色随便设，我们只需要几何

        // 生成原始文本的几何路径
        var textGeometry = formattedText.BuildGeometry(new Point(0, 0));

        // 生成向外扩展的轮廓几何——这一步是关键，让描边完全在字符外部
        var externalOutline = textGeometry.GetWidenedPathGeometry(
            new Pen(null, StrokeThickness));

        // 绘制外部轮廓
        dc.DrawGeometry(null, new Pen(Stroke, StrokeThickness), externalOutline);
    }
}

二、实现文本可编辑：叠加透明TextBox #

要让用户能修改文本，最直观的方式是在自定义控件上面叠一个透明的TextBox，让用户输入时同步文本到ExternalOutlinedTextBlock。XAML这样写：

<Grid>
    <!-- 显示外部轮廓的文本控件 -->
    <local:ExternalOutlinedTextBlock 
        x:Name="OutlinedDisplay"
        Stroke="Red" 
        FontSize="16" 
        StrokeThickness="1"
        Text="abc"/>
    
    <!-- 透明编辑框，覆盖在文本上面 -->
    <TextBox 
        Background="Transparent"
        BorderThickness="0"
        FontSize="16"
        Text="{Binding ElementName=OutlinedDisplay, Path=Text, Mode=TwoWay}"
        HorizontalAlignment="Left"
        VerticalAlignment="Center"
        Padding="0"/>
</Grid>

这样用户在TextBox里输入时，ExternalOutlinedTextBlock的文本会实时更新，而且完全看不到编辑框的痕迹，只显示外部轮廓的文本。

关键说明 #

• GetWidenedPathGeometry会把原始文本路径向外扩展指定的厚度，生成的几何就是纯外部的轮廓，不会和原始字符重叠。
• 用依赖属性实现所有控件属性，确保绑定和UI更新正常工作。
• 叠加透明TextBox是最轻量化的编辑方案，不需要在自定义控件里复杂处理输入逻辑，直接复用WPF原生的TextBox功能。

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