Avalonia中的ItemsControl怎么用 Avalonia ItemsControl自定义列表

ItemsControl是Avalonia中轻量、无默认交互的集合显示控件，需显式设置ItemsSource、ItemTemplate和ItemsPanelTemplate才能正常显示；适用于纯展示场景，如标签栏、评分条等。

Avalonia 中的 ItemsControl 是最基础、最灵活的集合显示控件，它不带默认交互（如选中、滚动、焦点管理），适合做纯展示型列表，比如图形容器、标签栏、自定义评分条、节点连线图等。用好它的关键是：明确数据源、配好模板、选对布局面板。

绑定数据源和基本结构

ItemsControl 本身不提供滚动或选中逻辑，所以它轻量但“裸”。你需要手动指定 ItemsSource（推荐用 ObservableCollection）和 ItemTemplate：

• ViewModel 中定义集合： public ObservableCollection Items { get; } = new();
• AXAML 中绑定：
• 必须显式写 ItemTemplate，否则什么也不显示

自定义每一项的外观（DataTemplate）

模板里可以放任意控件组合，支持绑定子属性。常见写法：

• 用 或 布局内容
• 直接绑定字段：
• 嵌套控件也支持绑定：
• 如果想复用已有 UserControl，可用

控制整体布局方式（ItemsPanelTemplate）

ItemsPanelTemplate 决定所有子项怎么“摆”——这是自定义列表形态的核心：

• 水平排列：
• 垂直流式（默认）：
• 绝对定位（画布）：，再配合 canvas.Left 和 canvas.Top 绑定 VM 的 X/Y 属性
• 网格布局需自行实现，ItemsControl 不内置 UniformGrid，可改用 Grid + ItemsRepeater 或手动生成行列

附加样式与行为（如悬停、右键菜单）

因为 ItemsControl 没有自带容器元素（如 ListBoxItem），要加交互得靠样式选择器或模板内嵌：

• 右键菜单：在 ItemsPanelTemplate 的根面板（如 Canvas）上设 ContextMenu
• 鼠标悬停效果：用样式选择器匹配 ContentPresenter，例如：


• 点击响应：在 ItemTemplate 根元素加 PointerPressed 事件，或用命令绑定到 VM 方法

基本上就这些。它不复杂但容易忽略 ItemsPanelTemplate 和 ItemTemplate 的强制性——漏掉任一个，界面就空白。