AvaloniaUI(WPF)中ListBox内复选框不显示的问题咨询

问题原因 #

你直接往ListBox里添加了ListBoxItem实例，这种情况下ListBox会把这些ListBoxItem当作现成的UI容器使用，不会触发ItemTemplate的渲染逻辑——ItemTemplate是用来渲染非UI类型的数据对象（比如字符串、自定义实体类）的，所以你的复选框模板根本没被用上，自然看不到复选框。

解决方案 #

给你三种可行的修改方式：

方式1：直接添加数据项（推荐） #

去掉外层的ListBoxItem，直接放字符串内容，让ItemTemplate接管渲染：

<DockPanel>
    <ListBox x:Name="Test"
              DockPanel.Dock="Top">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <DockPanel Margin="-10, 0, 0, 0">
                    <CheckBox DockPanel.Dock="Left" 
                              IsChecked="True" />
                    <TextBlock DockPanel.Dock="Left"
                               Margin="5, 0, 0, 0"
                               TextTrimming="WordEllipsis"
                               VerticalAlignment="Center"
                               Text="{Binding}" />
                </DockPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <!-- 直接添加字符串，不用ListBoxItem包裹 -->
        <system:String>One</system:String>
        <system:String>Two</system:String>
        <system:String>Three</system:String>
    </ListBox>
</DockPanel>

注意要在XAML根节点添加命名空间：xmlns:system="clr-namespace:System;assembly=netstandard"，才能直接使用system:String。

方式2：修改ListBoxItem的Content #

如果一定要保留ListBoxItem，可以直接在它的Content里定义包含复选框的布局：

<DockPanel>
    <ListBox x:Name="Test"
              DockPanel.Dock="Top">
        <ListBoxItem>
            <DockPanel Margin="-10, 0, 0, 0">
                <CheckBox DockPanel.Dock="Left" 
                          IsChecked="True" />
                <TextBlock DockPanel.Dock="Left"
                           Margin="5, 0, 0, 0"
                           TextTrimming="WordEllipsis"
                           VerticalAlignment="Center"
                           Text="One" />
            </DockPanel>
        </ListBoxItem>
        <ListBoxItem>
            <DockPanel Margin="-10, 0, 0, 0">
                <CheckBox DockPanel.Dock="Left" 
                          IsChecked="True" />
                <TextBlock DockPanel.Dock="Left"
                           Margin="5, 0, 0, 0"
                           TextTrimming="WordEllipsis"
                           VerticalAlignment="Center"
                           Text="Two" />
            </DockPanel>
        </ListBoxItem>
        <ListBoxItem>
            <DockPanel Margin="-10, 0, 0, 0">
                <CheckBox DockPanel.Dock="Left" 
                          IsChecked="True" />
                <TextBlock DockPanel.Dock="Left"
                           Margin="5, 0, 0, 0"
                           TextTrimming="WordEllipsis"
                           VerticalAlignment="Center"
                           Text="Three" />
            </DockPanel>
        </ListBoxItem>
    </ListBox>
</DockPanel>

方式3：绑定ItemsSource（更符合MVVM） #

把数据放到集合里，通过ItemsSource绑定，这也是Avalonia/WPF开发的常规做法：

<!-- XAML部分 -->
<DockPanel>
    <ListBox x:Name="Test"
              DockPanel.Dock="Top"
              ItemsSource="{Binding Items}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <DockPanel Margin="-10, 0, 0, 0">
                    <CheckBox DockPanel.Dock="Left" 
                              IsChecked="True" />
                    <TextBlock DockPanel.Dock="Left"
                               Margin="5, 0, 0, 0"
                               TextTrimming="WordEllipsis"
                               VerticalAlignment="Center"
                               Text="{Binding}" />
                </DockPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</DockPanel>

// 后台代码（ViewModel或代码隐藏）
public ObservableCollection<string> Items { get; } = new ObservableCollection<string>
{
    "One", "Two", "Three"
};

// 如果是代码隐藏，在构造函数里设置DataContext
public YourWindow()
{
    InitializeComponent();
    DataContext = this;
}

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