C# Avalonia UI的ItemControl

Avalonia UI 中 ItemControl

在 Avalonia UI 中，ItemsControl 是用于显示集合数据的基础控件，其样式可以通过 Style 和 DataTemplate 自定义。以下是一个示例代码，展示如何为 ItemsControl 定义样式并绑定数据：

csharp 复制代码

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

// 在 ViewModel 中绑定数据
public class MainViewModel
{
    public ObservableCollection<ItemModel> Items { get; } = new ObservableCollection<ItemModel>
    {
        new ItemModel { Name = "Item 1", Description = "Description 1" },
        new ItemModel { Name = "Item 2", Description = "Description 2" }
    };
}

在 XAML 中定义 ItemsControl 样式

xml 复制代码

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.Styles>
        <!-- 定义 ItemsControl 的样式 -->
        <Style Selector="ItemsControl">
            <Setter Property="Template">
                <ControlTemplate>
                    <Border Background="#F0F0F0" Padding="10">
                        <ItemsPresenter/> <!-- 用于显示子项 -->
                    </Border>
                </ControlTemplate>
            </Setter>
        </Style>

        <!-- 定义子项的样式 -->
        <Style Selector="ItemsControl > ContentPresenter">
            <Setter Property="Margin" Value="0 5"/>
        </Style>

        <!-- 定义数据项的样式 -->
        <Style Selector="ContentPresenter > Border">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="BorderBrush" Value="#DDD"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="CornerRadius" Value="4"/>
        </Style>
    </ItemsControl.Styles>

    <!-- 定义数据项的 DataTemplate -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border>
                <StackPanel>
                    <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                    <TextBlock Text="{Binding Description}" Foreground="#666"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

注意事项

1. 层级选择器

ItemsControl > ContentPresenter 选择直接子项容器。
ContentPresenter > Border 选择数据项模板中的根元素。

2. 数据绑定

确保 ItemsSource 绑定到正确的集合属性。
DataTemplate 中的绑定路径需与数据模型属性匹配。

3. 性能优化

对于大数据集，建议使用 VirtualizingStackPanel 作为 ItemsPanel 以减少内存占用：

xml 复制代码

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <VirtualizingStackPanel/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

4. 模板覆盖

若需完全自定义布局，可重写 ControlTemplate 并指定 ItemsPresenter 的位置。

5. 样式作用域

样式定义在 ItemsControl.Styles 中时，仅作用于当前控件及其子项。若需全局样式，应定义在 App.axaml 的 Application.Styles 中。

完整示例效果

外层 ItemsControl 带灰色背景和内边距。
每个数据项显示为白色卡片，包含名称（粗体）和描述（灰色文字）。
子项之间通过 Margin 分隔。