WPF 语言格式化文本控件

前言

本章讲述正确添加语言资源的方式，以及一段语言资源的多种样式显示。

例如：“@Winter，你好！感谢已使用软件 800 天！”

 

在添加如上多语言资源项时，“XX，你好！感谢已使用软件 X 天！”

那么，你是怎么添加语言资源的呢？

分别添加，“，你好！”、“感谢已使用软件”、“年”3个，再通过界面绑定动态变量 昵称和使用天数？

假如你是按照如上添加语言资源的，那么问题来了，添加如上英文语言资源呢？是不是也分别添加单个资源，再拼凑绑定？

添加语言资源

正确的做法是，添加整个语言资源，“{0}，你好！感谢已使用软件 {1} 天！”

原因：使用格式化的语言资源，那么将中文资源翻译成英文或者其它语言后，得到的译文才符合原有的含义。

不然，一段一段翻译后的文本拼接，得到的只会是，中式英文之类的。。。

语言格式化控件

在添加了语言资源后，如何在WPF界面显示呢？

简单的文本样式

假如只是实现简单的文本拼接，且样式相同时，可以直接绑定动态变量值 - 昵称和使用年限，然后通过StringFormat或者Conveter去处理格式化文本。

• 如果只有一个动态变量，直接使用StringFormat处理即可。Text="{Binding Name,StringFormat={StaticResource TheFormatedText}}"
• 如果多个动态变量，可以使用多重绑定+Converter，实现文本格式化。

详细可查看 WPF StringFormat 格式化文本

复杂的文本样式

假如格式化文本，需要实现复杂的样式和操作，例如：

1. 文本+按钮
2. 文本+超链接
3. 加粗文本+普通文本+红色文本

以上，如何处理？

语言格式化控件实现

Demo显示效果：

 1. 添加一个继承TextBlock的用户控件ComplexTextBlock

    /// <summary>
    /// 解决复杂文本格式化样式的文本框控件
    /// 如"已使用软件 {0} 天"，天数需要标红加粗，或者用于【文本】【文字按钮】【文本】的组合
    /// </summary>
    public class ComplexTextBlock : TextBlock
    {

    }

2. 重写文本依赖属性

为了监听文本变更，所以重写文本的依赖属性。文本变更事件处理，之后会详细介绍~

    public new static DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(ComplexTextBlock), new PropertyMetadata(TextPropertyChanged));

    public static string GetText(DependencyObject element)
    {
        return (string)element.GetValue(TextProperty);
    }
    public static void SetText(DependencyObject element, string value)
    {
        element.SetValue(TextProperty, value);
    }

    private static void TextPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        LoadComplexContent(d);
    }

3. 添加动态变量显示的控件列表

如“@Winter，你好！感谢已使用软件 800 天，可查看详情！”，可以将昵称、使用时间、详情，分别设置为文本控件、文本控件、超链接按钮，然后添加到动态控件列表中。

 

    public static DependencyProperty ContentFormatsProperty =
        DependencyProperty.Register("ContentFormats", typeof(ContentFormatsCollection), typeof(ComplexTextBlock),
            new PropertyMetadata(default(ContentFormatsCollection), ContentFormatsPropertyChanged));

    /// <summary>
    /// 格式化内容列表
    /// </summary>
    public ContentFormatsCollection ContentFormats
    {
        get => (ContentFormatsCollection)GetValue(ContentFormatsProperty);
        set => SetValue(ContentFormatsProperty, value);
    }

    private static void ContentFormatsPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        LoadComplexContent(d);
    }

 

4. 处理格式化文本

处理方法，主要是将当前格式化的文本拆分为多个文本段落和格式化字符“{0}”，然后将待显示的动态变量（文本控件/按钮等）替换拆分后列表中的格式化字符。组合成完整的显示文本。

其中，需要注意的是，文本的样式继承。

    private const string FormattedKey = "{0}";

    /// <summary>
    /// 加载复杂文本
    /// </summary>
    /// <param name="dependencyObject"></param>
    private static void LoadComplexContent(DependencyObject dependencyObject)
    {
        if (!(dependencyObject is ComplexTextBlock complexTextBlock))
        {
            return;
        }

        string text = GetText(complexTextBlock);
        var contentFormats = complexTextBlock.ContentFormats;

        if (string.IsNullOrEmpty(text) || contentFormats == null || contentFormats.Count == 0)
        {
            return;
        }

        for (int i = 0; i < contentFormats.Count; i++)
        {
            text = text.Replace(i.ToString(), "0");
        }

        var list = GetTextList(text);

        //清空当前文本
        complexTextBlock.Text = null;
        //分段加载文本
        var stackPanel = new StackPanel();
        stackPanel.Orientation = Orientation.Horizontal;
        stackPanel.VerticalAlignment = VerticalAlignment.Center;

        int formatIndex = 0;
        foreach (var paraText in list)
        {
            if (paraText == FormattedKey)
            {
                stackPanel.Children.Add(contentFormats[formatIndex++]);
            }
            else
            {
                var textLine = new TextBlock();
                if (complexTextBlock.Style != null)
                {
                    textLine.Style = complexTextBlock.Style;
                }
                else
                {
                    textLine.VerticalAlignment = complexTextBlock.VerticalAlignment;
                    textLine.HorizontalAlignment = complexTextBlock.HorizontalAlignment;
                    textLine.Background = complexTextBlock.Background;
                    textLine.FontFamily = complexTextBlock.FontFamily;
                    textLine.FontSize = complexTextBlock.FontSize;
                    textLine.Foreground = complexTextBlock.Foreground;
                    textLine.FontWeight = complexTextBlock.FontWeight;
                    textLine.FontStyle = complexTextBlock.FontStyle;
                }
                textLine.Text = paraText;
                stackPanel.Children.Add(textLine);
            }
        }
        complexTextBlock.Inlines.Add(stackPanel);
    }

    /// <summary>
    /// 获取分段文本列表
    /// </summary>
    /// <param name="text"></param>
    /// <returns></returns>
    private static List<string> GetTextList(string text)
    {
        var list = new List<string>();
        var formatIndex = text.IndexOf(FormattedKey, StringComparison.Ordinal);

        //1.不存在格式化关键字，则直接返回当前文本
        if (formatIndex == -1)
        {
            list.Add(text);
            return list;
        }

        //2.存在格式化关键字
        if (formatIndex == 0)
        {
            list.Add(FormattedKey);
        }
        else
        {
            list.Add(text.Substring(0, formatIndex));
            list.Add(FormattedKey);
        }

        //获取下一格式化文本
        if (formatIndex < text.Length)
        {
            list.AddRange(GetTextList(text.Substring(formatIndex + FormattedKey.Length)));
        }

        return list;
    }

5. 控件的使用

界面显示：

调用实现：

    <local:ComplexTextBlock Text="小王,好好{0}，详见{1}!" Style="{StaticResource ComplexTextBlockStyle}" Margin="0 10 0 0">
        <local:ComplexTextBlock.ContentFormats>
            <local:ContentFormatsCollection>
                <Button Content="学习" Click="ButtonBase_OnClick" VerticalAlignment="Center"></Button>
                <Button x:Name="LinkedButton" Content="学习计划" Click="LinkedButton_OnClick" Style="{StaticResource LinkeButton}" VerticalAlignment="Center"/>
            </local:ContentFormatsCollection>
        </local:ComplexTextBlock.ContentFormats>
    </local:ComplexTextBlock>

详细代码实现，可查看Github源码Demo