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

来源:这里教程网 时间:2026-02-21 17:36:50 作者:

Avalonia 中的

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

绑定数据源和基本结构

ItemsControl
本身不提供滚动或选中逻辑,所以它轻量但“裸”。你需要手动指定
ItemsSource
(推荐用
ObservableCollection<t></t>
)和
ItemTemplate

ViewModel 中定义集合:
public ObservableCollection<myitemvm> Items { get; } = new();</myitemvm>
AXAML 中绑定:
<itemscontrol itemssource="{Binding Items}"></itemscontrol>
必须显式写
ItemTemplate
,否则什么也不显示

自定义每一项的外观(DataTemplate)

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

<grid></grid>
<stackpanel></stackpanel>
布局内容
直接绑定字段:
<textblock text="{Binding Name}"></textblock>
嵌套控件也支持绑定:
<checkbox ischecked="{Binding IsEnabled}"></checkbox>
如果想复用已有 UserControl,可用
<myitemview datacontext="{Binding}"></myitemview>

控制整体布局方式(ItemsPanelTemplate)

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

水平排列:
<stacklayout orientation="Horizontal"></stacklayout>
垂直流式(默认):
<stacklayout orientation="Vertical"></stacklayout>
绝对定位(画布):
<canvas background="Transparent"></canvas>
,再配合
Canvas.Left
Canvas.Top
绑定 VM 的
X
/
Y
属性
网格布局需自行实现,
ItemsControl
不内置
UniformGrid
,可改用
Grid
+
ItemsRepeater
或手动生成行列

附加样式与行为(如悬停、右键菜单)

因为

ItemsControl
没有自带容器元素(如
ListBoxItem
),要加交互得靠样式选择器或模板内嵌:

右键菜单:在
ItemsPanelTemplate
的根面板(如
Canvas
)上设
ContextMenu
鼠标悬停效果:用样式选择器匹配
ContentPresenter
,例如:
<style selector="ItemsControl > ContentPresenter:pointerover"></style>
点击响应:在
ItemTemplate
根元素加
PointerPressed
事件,或用命令绑定到 VM 方法

基本上就这些。它不复杂但容易忽略

ItemsPanelTemplate
ItemTemplate
的强制性——漏掉任一个,界面就空白。

相关推荐