如何在Avalonia中仅用AXAML绑定TextBlock的Run元素

需求说明 #

将ViewModel中的ObservableCollection<TextRun>数据绑定到TextBlock的Run元素，实现同一行内不同颜色文本无间隙显示，且仅通过AXAML完成，不编写后台代码。此前用水平StackPanel作为ItemsPanel的方案会产生额外间隙，不符合需求。

解决方案 #

核心思路是利用ItemsControl将数据项直接生成Run元素并注入到TextBlock.Inlines集合中，这样所有Run会作为TextBlock的内联元素自然拼接，不会产生布局间隙。

完整AXAML代码示例 #

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:YourNamespace.ViewModels"
        x:Class="YourNamespace.Views.MainWindow"
        Title="MainWindow">
    <Window.DataContext>
        <vm:MainWindowViewModel />
    </Window.DataContext>

    <TextBlock>
        <ItemsControl ItemsSource="{Binding RunList}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <!-- 直接用InlineCollection作为容器，消除布局间隙 -->
                    <InlineCollection />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Run Text="{Binding Text}"
                         Foreground="{Binding Color}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </TextBlock>
</Window>

关键细节解释 #

• ItemsPanelTemplate设置为InlineCollection：这是消除间隙的核心，让ItemsControl将生成的每个Run直接添加到TextBlock的内联元素集合中，替代默认的StackPanel布局容器。
• Run属性绑定：每个TextRun对象对应生成一个Run元素，Text绑定到TextRun.Text属性，Foreground绑定到TextRun.Color属性（Avalonia支持直接将颜色名称字符串转换为SolidColorBrush）。
• 自动更新支持：ViewModel中的ObservableCollection<TextRun>会自动通知UI更新，当集合增删项时，TextBlock的内容会实时同步变化。

对应ViewModel代码 #

public class MainWindowViewModel : ViewModelBase
{
    public ObservableCollection<TextRun> RunList { get; set; }

    public MainWindowViewModel()
    {
        RunList = new ObservableCollection<TextRun>(new List<TextRun>
            {
                new TextRun("Th", "Red"),
                new TextRun("is", "Green"),
                new TextRun(" i", "Maroon"),
                new TextRun("s ", "Blue"),
                new TextRun("a ", "Yellow"),
                new TextRun("te", "Black"),
                new TextRun("st", "Orange"),
                new TextRun("!!", "Violet"),
                new TextRun("!!", "Cyan")
            });
    }
}

public class TextRun
{
    public string Text { get; set; }
    public string Color { get; set; }

    public TextRun(string title, string color)
    {
        Text = title;
        Color = color;
    }
}

内容的提问来源于stack exchange，提问作者Yanko Hernández Alvarez