Avalonia如何通过ViewModel集合填充ComboBoxItem并自适应内容？

问题描述 #

在Avalonia中尝试通过ViewModel集合生成ComboBoxItem时，使用ItemsRepeater嵌套DataTemplate的方式会出现两个问题：

• 生成的ComboBoxItem宽度异常宽大
• 外观与手动添加的ComboBoxItem不一致

错误代码示例：

<Label Target="editorGroupSelectionComboBox">Editor Group: </Label>
<ComboBox Name="editorGroupSelectionComboBox">
    <ItemsRepeater ItemsSource="{Binding Characters}">
        <ItemsRepeater.ItemTemplate>
            <DataTemplate>
                <ComboBoxItem><TextBlock Text="{Binding CharacterIndex, StringFormat='Character {0}'}" /></ComboBoxItem>
            </DataTemplate>
        </ItemsRepeater.ItemTemplate>
    </ItemsRepeater>
    <ComboBoxItem>Inventory</ComboBoxItem>
</ComboBox>

问题表现截图：

而手动填充ComboBox时（不符合动态绑定需求）则正常：

<ComboBox Name="editorGroupSelectionComboBox">
    <ComboBoxItem><TextBlock Text="Character 0" /></ComboBoxItem>
    <ComboBoxItem>Character 1</ComboBoxItem>
    <ComboBoxItem><TextBlock Text="Character 2" /></ComboBoxItem>
    <ComboBoxItem><TextBlock Text="Inventory" /></ComboBoxItem>
</ComboBox>

正常效果截图：

解决方法 #

问题根源在于错误地在ComboBox内部嵌套了ItemsRepeater，ComboBox本身已经内置了项的渲染逻辑，无需额外使用ItemsRepeater。正确的做法是直接绑定ComboBox的ItemsSource属性，并通过ItemTemplate定义项的内容：

修正后的代码 #

<Label Target="editorGroupSelectionComboBox">Editor Group: </Label>
<ComboBox Name="editorGroupSelectionComboBox" ItemsSource="{Binding Characters}">
    <!-- 定义集合项的模板，无需手动添加ComboBoxItem -->
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding CharacterIndex, StringFormat='Character {0}'}" />
        </DataTemplate>
    </ComboBox.ItemTemplate>
    <!-- 添加静态项 -->
    <ComboBoxItem>Inventory</ComboBoxItem>
</ComboBox>

关键说明 #

1. 直接绑定ItemsSource：ComboBox的ItemsSource属性专门用于绑定集合数据源，内部会自动处理项的重复渲染，不需要额外的ItemsRepeater。
2. ItemTemplate无需包裹ComboBoxItem：当设置ItemTemplate后，Avalonia会自动将模板内容包裹在ComboBoxItem容器中，手动添加会导致双重嵌套，引发样式和布局异常。
3. 静态项可直接保留：动态绑定的集合项和手动添加的静态项可以共存，不会互相影响。

这样修改后，ComboBox会自动自适应内容宽度，生成的项外观也会和手动添加的保持一致。

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