C# Avaloniaui ListBox样式及用法

Avalonia UI ListBox 样式

以下是一个 ListBox 样式定义示例，包含数据绑定、自定义项样式和选中效果：

csharp 复制代码

// 定义 ListBox 数据模型
public class ItemModel
{
    public string Name { get; set; }
    public string Description { get; set; }
}

// 在 ViewModel 中初始化数据
public ObservableCollection<ItemModel> Items { get; } = new()
{
    new ItemModel { Name = "Item 1", Description = "Description 1" },
    new ItemModel { Name = "Item 2", Description = "Description 2" }
};

xml 复制代码

<!-- 在 XAML 中定义 ListBox 样式 -->
<ListBox Items="{Binding Items}" SelectedItem="{Binding SelectedItem}">
    <ListBox.Styles>
        <Style Selector="ListBox">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
        </Style>

        <Style Selector="ListBoxItem">
            <Setter Property="Padding" Value="8 4"/>
            <Setter Property="Template">
                <ControlTemplate>
                    <Border Name="border" Background="Transparent"
                            CornerRadius="4"
                            BorderThickness="1"
                            BorderBrush="Transparent">
                        <ContentPresenter Content="{TemplateBinding Content}"
                                          Margin="{TemplateBinding Padding}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPointerOver" Value="True">
                            <Setter TargetName="border" Property="Background" Value="#20000000"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="border" Property="Background" Value="#40000000"/>
                            <Setter TargetName="border" Property="BorderBrush" Value="Gray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter>
        </Style>
    </ListBox.Styles>

    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical" Spacing="4">
                <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                <TextBlock Text="{Binding Description}" FontSize="12" Opacity="0.7"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

常见问题解决方案

数据绑定不更新

确保使用 ObservableCollection<T> 作为数据源
检查 ItemModel 是否实现 INotifyPropertyChanged 接口
验证绑定路径是否正确

滚动条不可见

设置 ScrollViewer.VerticalScrollBarVisibility="Auto"
检查容器高度是否受限
确认内容是否超出可视区域

项选择无效

检查 SelectedItem 绑定模式是否为双向
验证 IsSelected 触发器是否正常工作
确保没有覆盖默认选择行为

性能优化

对大量数据使用虚拟化：

xml 复制代码

<ListBox VirtualizationMode="Simple"/>

简化项模板复杂度
避免在模板中使用过多嵌套布局

自定义项外观

xml 复制代码

<Style Selector="ListBoxItem:selected /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="TextBlock.Foreground" Value="White"/>
</Style>

空列表显示提示

xml 复制代码

<ListBox>
    <ListBox.Styles>
        <Style Selector="ListBox:empty">
            <Setter Property="Template">
                <ControlTemplate>
                    <TextBlock Text="No items available" HorizontalAlignment="Center"/>
                </ControlTemplate>
            </Setter>
        </Style>
    </ListBox.Styles>
</ListBox>