Avalonia 中可通过 Grid、ToggleButton 和动画实现 SplitView 功能:1. 用两列 Grid 控制侧边栏宽(* 或 0)并绑定 IsPaneOpen;2. 可选 Width 动画实现平滑折叠;3. 叠加遮罩层支持 Overlay 模式点击关闭;4. 配合 IsEnabled、焦点管理和 Escape 键提升可用性。

Avalonia 中没有内置的 SplitView 控件(不像 UWP 或 WinUI),但可以通过组合 Grid、ToggleButton 和动画来实现功能完整、视觉流畅的可折叠侧边栏。核心思路是:用一个列宽可变的 Grid 控制侧边栏显示/隐藏,配合状态切换和可选的滑入动画。
1. 基础结构:Grid + ToggleButton 实现折叠逻辑
在 XAML 中定义两列布局:第一列为侧边栏(宽度绑定到布尔状态),第二列为内容区(剩余空间)。用 ToggleButton 触发折叠/展开。
- 侧边栏列宽设为
*(展开)或0(折叠),通过BooleanToVisibilityConverter或自定义值转换器控制更直观;推荐用Width绑定配合IValueConverter返回GridLength -
ToggleButton.IsChecked绑定到 ViewModel 的IsPaneOpen属性,作为主控开关 - 内容区域设置
Grid.Column="1",并用Width="*"自动填充剩余空间
2. 平滑折叠动画(可选但推荐)
Avalonia 支持基于属性的动画,可对侧边栏容器(如 Panel 或 Border)的 Width 或 Opacity 添加过渡效果。
- 在侧边栏外层包裹一个
Panel,绑定其Width到PaneWidth(double 类型,例如 240 或 0) - 在 ViewModel 中更新
PaneWidth时,用Animatable.Animate方法驱动平滑变化(需引用Avalonia.Animation) - 示例:从 240 → 0 动画持续 200ms,缓动函数用
Easing.EaseOutCubic更自然
3. 响应式行为与遮罩层(类似 SplitView.DisplayMode = Overlay)
当侧边栏为 overlay 模式时,需在内容区上方叠加半透明遮罩,并拦截点击收起面板。
- 用
Grid叠加层级:底层放内容,中层放遮罩(Rectangle或Border,Opacity="0.5",IsVisible="{Binding IsPaneOpen}") - 遮罩添加
PointerPressed事件处理,触发IsPaneOpen = false,实现点击关闭 - 遮罩
ZIndex设为高于内容、低于侧边栏,确保点击穿透侧边栏但响应遮罩
4. 键盘与焦点管理(提升可用性)
折叠状态下,侧边栏内控件不应获得焦点;展开后应支持 Tab 导航并默认聚焦首项。
- 设置侧边栏容器的
IsEnabled="{Binding IsPaneOpen}",禁用折叠时的交互 - 在
IsPaneOpen变为 true 后,调用FocusManager.Instance?.FocusFirst()或手动Focus()到菜单根元素 - 监听
Escape键:在主窗口或侧边栏上处理KeyDown,当e.Key == Key.Escape && IsPaneOpen时关闭面板










