Avalonia中的ItemsControl怎么用 ItemsControl自定义列表如何实现

Avalonia中的ItemsControl是展示集合数据的核心控件，支持灵活的数据绑定和样式自定义，能够满足绝大多数列表类界面的开发需求。它不需要用户交互选中项的能力，适合纯展示类的列表场景，也可以通过扩展实现复杂的交互逻辑。

ItemsControl基础用法

基本数据绑定

ItemsControl最核心的能力是绑定集合数据源，只需要将数据源赋值给ItemsSource属性，控件就会自动遍历集合生成对应的项。以下是一个简单的基础使用示例：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:YourProject"
        x:Class="YourProject.MainWindow"
        Title="ItemsControl示例">
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <ItemsControl ItemsSource="{Binding UserList}">
    </ItemsControl>
</Window>

对应的ViewModel代码如下，这里定义了一个简单的用户集合作为数据源：

using System.Collections.ObjectModel;
using System.ComponentModel;

public class User
{
    public string Name { get; set; }
    public int Age { get; set; }
}

public class MainViewModel : INotifyPropertyChanged
{
    private ObservableCollection<User> _userList;
    public ObservableCollection<User> UserList
    {
        get => _userList;
        set
        {
            _userList = value;
            OnPropertyChanged();
        }
    }

    public MainViewModel()
    {
        UserList = new ObservableCollection<User>
        {
            new User { Name = "张三", Age = 20 },
            new User { Name = "李四", Age = 22 },
            new User { Name = "王五", Age = 25 }
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([System.Runtime.CompilerServices.CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

自定义项模板

默认情况下ItemsControl会直接调用项的ToString方法展示内容，实际开发中我们需要自定义每个项的展示样式，这时候就需要用到ItemTemplate属性。以下是一个自定义项模板的示例，展示用户的姓名和年龄：

<ItemsControl ItemsSource="{Binding UserList}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="0,5">
                <TextBlock Text="{Binding Name}" Width="100"/>
                <TextBlock Text="{Binding Age, StringFormat='年龄：{0}'}"/>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

自定义列表布局

ItemsControl默认的布局是垂直堆叠的，我们可以通过ItemsPanel属性修改列表的布局方式，支持水平排列、网格排列等多种布局。以下是修改为水平排列的示例：

<ItemsControl ItemsSource="{Binding UserList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Gray" BorderThickness="1" Margin="5" Padding="10">
                <StackPanel>
                    <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                    <TextBlock Text="{Binding Age}"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

如果需要网格布局，只需要把ItemsPanelTemplate里的面板换成WrapPanel或者Grid即可，WrapPanel会自动换行，更适合不确定数量的列表项展示。

自定义列表样式

除了项模板和布局，我们还可以修改ItemsControl的整体样式，比如修改列表的背景、边框等属性。以下是一个自定义整体样式的示例：

<ItemsControl ItemsSource="{Binding UserList}">
    <ItemsControl.Styles>
        <Style Selector="ItemsControl">
            <Setter Property="Background" Value="#F5F5F5"/>
            <Setter Property="BorderBrush" Value="LightGray"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="10"/>
        </Style>
    </ItemsControl.Styles>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" Margin="0,3"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

常见问题说明

• 如果数据源更新后列表没有刷新，需要确认数据源是否实现了INotifyCollectionChanged接口，推荐使用ObservableCollection作为集合类型
• 自定义项模板时，绑定路径需要和数据源的公开属性对应，否则会绑定失败
• 如果需要列表支持选中交互，可以考虑使用继承ItemsControl的ListBox控件，它内置了选中项的能力

AvaloniaItemsControl自定义列表数据绑定修改时间：2026-07-07 05:45:26