Expander是Avalonia中用于折叠/展开的轻量控件,核心用法包括基础声明(含Header/Content及ExpandDirection)、数据绑定管理IsExpanded状态以避免滚动丢失、样式定制(ToggleButton/HeaderTemplate/ContentPresenter),并支持手风琴效果。

Expander 是 Avalonia 中一个实用的折叠/展开控件,适合用于隐藏次要内容、节省界面空间。它结构简单但可定制性强,用法核心就三点:基础声明、数据绑定控制状态、样式自定义外观。
基础用法:声明与结构
Expander 默认包含 Header(标题区)和 Content(内容区),两者都支持任意 XAML 内容:
- Header 可放 TextBlock、StackPanel,甚至带图标的按钮
- Content 区域可嵌入 Grid、ListBox、UserControl 等复杂布局
- 默认展开方向是向下;可通过 ExpandDirection="Up" 改为向上展开
示例:
状态管理:避免滚动丢失的关键
在 ListBox 或 ItemsControl 中大量使用 Expander 时,常见问题是“一滚动就自动收起”——这其实是 VirtualizingStackPanel 回收控件导致的。根本解法不是禁用虚拟化,而是把 IsExpanded 状态绑定到 ViewModel 属性:
- ViewModel 中定义 bool 属性,如 IsDetailExpanded
- XAML 中绑定:IsExpanded="{Binding IsDetailExpanded}"
- 这样状态随数据走,滚动重用也不会丢
不推荐写死 IsExpanded="True" 或仅靠事件处理,否则列表滚动后行为不可控。
样式定制:改外观不改逻辑
Expander 样式通过 Style Selector="Expander" 定义,通常放在 Resources 中。重点可调整三部分:
-
ToggleButton:即左侧小箭头按钮,可用
Template替换为图标或文字 - HeaderTemplate:控制标题区域渲染方式(比如加背景色、圆角、悬停效果)
- ContentPresenter:影响内容区的内边距、动画过渡等
注意:Avalonia 的 Expander 没有命名部件(Named Parts),所以不能用 TemplateBinding 绑定到固定名,需直接操作其子元素结构或重写整个 ControlTemplate。
进阶技巧:配合 ListBox 实现单选折叠
若希望列表中只允许一项展开(类似手风琴效果),可在 ItemTemplate 中绑定 IsSelected 到 ListBoxItem,并让 Expander 的 IsExpanded 与之联动:
- ListBox 设置 SelectionMode="Single"
- Expander 内部绑定:IsExpanded="{Binding $parent[ListBoxItem].IsSelected}"
- 这样点开新项时,旧项自动收起,无需手动维护状态
多个 Expander 同时展开也没问题,只需去掉上述绑定,改用独立的 ViewModel 属性即可。
基本上就这些。用好 Expander 的关键是状态绑定 + 合理布局,而不是堆样式。它本身轻量,但搭配 ListBox、MVVM 和模板后,能支撑很复杂的交互场景。










