如何将视图控件的FormattedText属性绑定到数据模型

问题场景 #

想把文本格式化逻辑完全放在视图层，不涉及数据模型，用DataTemplate创建Label时，需要给文本添加格式（红色、加粗）和常量前缀，但不知道如何给Span的Text属性绑定数据。当前代码中直接给Label.Text绑定后再设置FormattedText无效，绑定FormattedTextProperty也没效果。

正确实现方法 #

方法一：直接给Span的Text属性设置绑定 #

不需要给Label.Text绑定，直接为每个Span设置内容（常量前缀或数据绑定），再组合成FormattedString赋值给Label.FormattedText：

internal class BleDeviceDiagnosticItemDataTemplate : DataTemplate
{
    internal BleDeviceDiagnosticItemDataTemplate()
    {
        LoadTemplate = static () =>
        {
            Label idLabel = new();

            // 常量前缀Span，带样式
            Span prefixSpan = new() 
            { 
                Text = "设备ID: ", 
                TextColor = Colors.Red, 
                FontAttributes = FontAttributes.Bold 
            };
            
            // 绑定数据的Span
            Span idSpan = new();
            idSpan.SetBinding(Span.TextProperty, "Id");

            // 组合成格式化文本
            FormattedString formattedId = new();
            formattedId.Spans.Add(prefixSpan);
            formattedId.Spans.Add(idSpan);

            idLabel.FormattedText = formattedId;
        };
    }
}

方法二：使用转换器生成FormattedString（适合复杂格式） #

如果需要更复杂的格式逻辑，可以创建转换器，将数据直接转换成带样式的FormattedString，再绑定到Label.FormattedText：

1. 先实现转换器：

public class IdToFormattedStringConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string id = value?.ToString() ?? string.Empty;
        FormattedString formattedString = new();
        
        formattedString.Spans.Add(new Span 
        { 
            Text = "设备ID: ", 
            TextColor = Colors.Red, 
            FontAttributes = FontAttributes.Bold 
        });
        formattedString.Spans.Add(new Span { Text = id });
        
        return formattedString;
    }

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

2. 在DataTemplate中使用转换器绑定：

internal class BleDeviceDiagnosticItemDataTemplate : DataTemplate
{
    internal BleDeviceDiagnosticItemDataTemplate()
    {
        LoadTemplate = static () =>
        {
            Label idLabel = new();
            var binding = new Binding("Id") 
            { 
                Converter = new IdToFormattedStringConverter() 
            };
            idLabel.SetBinding(Label.FormattedTextProperty, binding);
        };
    }
}

原代码问题说明 #

• 原代码中先给Label.TextProperty绑定了Id，但随后设置Label.FormattedText会覆盖Text的内容，导致绑定失效。
• Span.Text不能直接引用Label.Text，因为此时Label的绑定还未生效，且Span需要独立的绑定逻辑。

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