如何在 WPF 文本框中指定字母间距或字距调整？

Question

我想修改 WPF TextBox 中字符之间的间距。
类似于 CSS 中可用的 letter-spacing: 5px 内容。
我认为在 XAML 中这是可能的；最简单的方法是什么？

我找到了“GlyphRun 对象和 Glyphs 元素简介”文档，并发现它毫无帮助。

这是该页面的代码示例：

<!-- "Hello World!" with explicit character widths for proportional font -->
<Glyphs 
   FontUri             = "C:\WINDOWS\Fonts\ARIAL.TTF"
   FontRenderingEmSize = "36"
   UnicodeString       = "Hello World!"
   Indices             = ",80;,80;,80;,80;,80;,80;,80;,80;,80;,80;,80"
   Fill                = "Maroon"
   OriginX             = "50"
   OriginY             = "225"
/>

同一文档页面对 Indices 属性的作用进行了“解释”：

我不知道这意味着什么。我也不确定索引是否正确 - 代码中的注释提到了我不关心的“字符宽度”。我想调整字符之间的宽度。

此外，也没有关于如何将 Glyphs 元素应用到 TextBox 的示例。当我尝试时，我的 WPF 测试应用程序崩溃了。

---

我想要做的是稍微增加 WPF 文本框中绘制的字符之间出现的空白空间。文本的长度和内容会有所不同。每次出现新字符时是否都必须修改 Indicies 属性？有没有办法说“为每个角色设置比平常多 20% 的空间”。

有人可以帮助我吗？

Answer 1

我尝试了 Glyphs 和 FontStretch，但无法轻松获得我想要的结果。我能够想出一种适合我的目的的方法。也许它也对其他人有用。

<ItemsControl ItemsSource="{Binding SomeString}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" 
                       Margin="0,0,5,0"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

我可以绑定到任何字符串，并且不需要进行任何字符宽度检测来正确设置间距。右边距是字母之间的空格。

示例：

Answer 2

我找到了一种使用 TextBlock 类，因为它支持 翻译转换。通过将 TextBlock.TextProperty 上的默认 PropertyChangedCallback 替换为自定义的，我们可以将 TranslateTransform 应用于 TextBlock< 中的每个字母/代码>。

这是我所做的完整的逐步编码：

首先，我们创建一个自定义类并继承 TextBlock，如下所示：

using System.Windows.Controls;

namespace MyApp
{
    class SpacedLetterTextBlock : TextBlock
    {
        public SpacedLetterTextBlock() : base()
        {
        }
    }
}

然后，在 XAML 中，我们将 TextBlock 更改为我们的自定义类（更多信息可以找到 此处)：

<Window x:Class="MyApp.MainWindow"
        ...
        xmlns:app="clr-namespace:MyApp">
   <Grid>
       <app:SpacedLetterTextBlock>
           Some Text
       </app:SpacedLetterTextBlock>
   </Grid>
</Window>

最后，在 .cs 代码隐藏文件中的 InitializeComponent() 方法之前，添加 OverrideMetadata 方法，如下所示：

// This line of code adds our own callback method to handle any changes in the Text
//   property of the TextBlock
SpacedLetterTextBlock.TextProperty.OverrideMetadata(
    typeof(SpacedLetterTextBlock),
    new FrameworkPropertyMetadata(null,
            FrameworkPropertyMetadataOptions.AffectsRender,
            new PropertyChangedCallback(OnTextChanged)
    )
);

...并在每次 TextProperty 更改时将 TranslateTransform 应用于每个字母：

private static void OnTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    SpaceLettersOut(d);
}

// This method takes our custom text block and 'moves' each letter left or right by 
//  applying a TranslateTransform
private static void SpaceLettersOut(DependencyObject d)
{
    SpacedLetterTextBlock thisBlock = (SpacedLetterTextBlock)d;
            
    for (int i = 1; i <= thisBlock.Text.Length; i++)
    {
        // TranslateTransform supports doubles and negative numbers, so you can have
        //  whatever spacing you need - do see 'Notes' section in the answer for
        //  some limitations.
        TranslateTransform transform = new TranslateTransform(2, 0);
        TextEffect effect = new TextEffect();
        effect.Transform = transform;
        effect.PositionStart = i;
        effect.PositionCount = thisBlock.Text.Length;

        thisBlock.TextEffects.Add(effect);
        if (effect.CanFreeze)
        {
            effect.Freeze();
        }
    }
}

NOTES ：

首先，我是 WPF 和 C# 的新手，所以我的答案可能不是最干净的解决方案。如果您对如何改进这个答案有任何意见，我们将不胜感激！

其次，我还没有使用大量 TextBlock 元素测试此解决方案，并且（可能）存在巨大的性能损失，因为 TranslateTransform 应用于中的每个单独字母一个TextBlock.Text。

最后，TextBlock 的文本超出 TranslateTransform 的任何正 X 值的范围。我认为您可以重新计算 TextBlock 的宽度，然后以编程方式放置它（？）

Answer 3

FontStretch 适合您吗？

否则，您可能需要在那里查看 this是一个图像，显示了前进宽度的含义。虽然我以前没有这样做过，也不知道这是否有效，但增加左右侧轴承可能就是您想要的！

Answer 4

虽然我喜欢 ItemsControl hack，但这里有一个简单的 Unicode "Space分隔符” 技巧可能对某些人有用。

<TextBlock Text="{Binding Text,Converter={x:Static c:LetterSpacingConverter.Default}}" />

public class LetterSpacingConverter : IValueConverter
{
    private const char ThinSpace = '\x2009';
    private const char HairSpace = '\x200A';

    public static readonly LetterSpacingConverter Default = new();

    public object Convert(object value, Type targetType,
                          object parameter, CultureInfo culture)
    {
        if (value is string s)
        {
            // Use ThinSpace for slightly wider spacing :)
            return string.Join(HairSpace, s.ToArray());
        }

        return DependencyProperty.UnsetValue;
    }

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

为了提高性能，您可能希望将值缓存在视图模型中，而不是使用转换器。

Answer 5

它的价值是什么。 。 。

如果您可以选择将实现切换到 RichTextBox，这可能比您在 2013 年 9 月找到的解决方法更容易。我只是根据自己的需要尝试了它，它可以满足我的需要。我没有看到 RichTextBox 可以像排字机那样控制各个空间的字距调整的方法。但 TextBox 会像 HTML 一样占用额外的空间（将多个相邻空间合并为一个空间）。我需要让空格显示与文本字符串中相同的间距，而 RichTextBox 可以做到这一点。

<RichTextBox x:Name="MyRichTextBox"></RichTextBox>

我不是专家，但似乎您无法在 XAML 中指定文本内容。我必须在代码隐藏事件中指定它：

this.MyRichTextBox.AppendText("V A R I E D      S P A C E S");