Avalonia如何实现一个可折叠的侧边栏 Avalonia SplitView

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 时关闭面板