• UI组件
• 桌面应用

TabControl是 SukiUI 主题库（AvaloniaUI 的 UI 主题方案）为多标签页场景提供的基础容器控件，它把一组TabItem的标题区与内容区组织在同一视图中，让用户在有限空间内切换不同内容面板。本文以官方文档 tabcontrol.md 为主线，结合仓库内的主题样式源码与演示工程，讲解 SukiUI 风格化 TabControl 的四种标签条摆放方向、横向标签模式、胶囊（Pill）样式以及数据绑定驱动标签页的完整实战方案。读完本文，你将能直接在 SukiUI 应用里写出可运行、可复制的多标签页界面，并理解其底层旋转与动画实现原理。

一、功能概述：一个容器承载多页内容

TabControl向用户提供一组标签（Tab），每个标签对应一块独立内容。它由两部分组成：

• 标签条（Tab Strip）：显示各TabItem的标题，用户点击即可切换；
• 内容宿主（Content Host）：仅展示当前选中项对应的内容。

SukiUI 对 AvaloniaUI 原生TabControl进行了完整的主题化包装，并且支持TabStripPlacement属性，可以把标签条放置在上、下、左、右四个方向。这是官方文档特别强调的能力，也是 SukiUI 在该控件上的核心增强点。

二、最小可用示例：快速上手

根据官方文档给出的最小示例，直接在 SukiUI 应用的 XAML 中声明即可：

<TabControl> <TabItem Header="Tab 1"> <!-- Content --> </TabItem> <TabItem Header="Tab 2"> <!-- Content --> </TabItem> </TabControl>

每个TabItem的Header决定标签条上显示的文字，TabItem内部的内容（XAML 元素）即该标签页的内容面板。运行后默认显示第一个标签页，点击标题即可切换。

三、TabStripPlacement：标签条的四向摆放

SukiUI 官方演示工程（TabControlView.axaml）一次性展示了五种常用摆放方式，全部封装在suki:GlassCard+suki:GroupBox的卡片式布局中：

值得注意的细节是“横向左侧/横向右侧”与“左侧/右侧”的区别：默认的Left/Right会把标题文字旋转 90°，而加上HorizontalTabs样式类后标题保持水平、标签条以垂直列表呈现。这两种形态分别适用于侧边导航式标签和工具栏式标签的不同需求。

源码级原理解析：旋转是如何发生的

SukiUI 并未用复杂的自定义面板实现四向摆放，而是在 TabControl.axaml 中利用 AvaloniaUI 的LayoutTransformControl配合选择器完成的：

<Style Selector="^[TabStripPlacement=Left] /template/ LayoutTransformControl#PART_LayoutTransform"> <Setter Property="LayoutTransform" Value="rotate(-90deg)" /> </Style> <Style Selector="^[TabStripPlacement=Right] /template/ LayoutTransformControl#PART_LayoutTransform"> <Setter Property="LayoutTransform" Value="rotate(90deg)" /> </Style>

即：把整个标签条容器分别旋转 -90° 与 +90°，从而实现左侧/右侧的纵向排布。同时，为了让旋转后的内部标题依然可读，样式还会同步调整内部WrapPanel的Orientation与FlowDirection（FlowDirectionOpposite这一动态资源由 Index.axaml.cs 依据 RTL/LTR 语言环境计算注入）。

而HorizontalTabs样式类则把旋转量“抵消”回 0°，并将内部WrapPanel改为垂直方向，从而得到标题保持水平、标签条竖排的效果：

<Style Selector="^.HorizontalTabs"> <Style Selector="^[TabStripPlacement=Left] /template/ LayoutTransformControl#PART_LayoutTransform"> <Setter Property="LayoutTransform" Value="rotate(0)" /> </Style> </Style>

由此可以推断：SukiUI 的 TabControl 主题完全复用 AvaloniaUI 原生控件模板结构（PART_LayoutTransform、PART_ItemsPresenter、PART_SelectedContentHost），通过样式覆盖实现形态变化，因此原生TabControl的所有数据绑定能力都得以保留。

四、Pill 胶囊样式：标签条与选中态的自定义

在 TabControl.axaml 与 TabItem.axaml 中还内置了一套Pill（胶囊）样式，适合需要高辨识度选中态的工具栏场景：

<TabControl Classes="Pill"> <TabItem Classes="Pill" Header="Test 1"> <Panel Height="200" Width="600"></Panel> </TabItem> <TabItem Classes="Pill" Header="Test 2"></TabItem> </TabControl>

其实现要点（同样需要 TabControl 与 TabItem 同时加上Pill类）：

• TabControl 的标签条被包裹进一个CornerRadius="100"的suki:GlassCard毛玻璃卡片中，形成胶囊容器（TabControl.axaml）；
• TabItem 选中时通过ThicknessTransition动画把Padding从8,4平滑过渡到16,4，背景填充为主题色SukiPrimaryColor，文字变白（TabItem.axaml）；
• 标签条的对齐方式受HorizontalContentAlignment控制，默认左对齐。

五、默认 TabItem 样式：下划线动画与状态反馈

在未使用 Pill 样式时，SukiUI 为TabItem提供了经典的“下划线指示条”交互（TabItem.axaml）：

• 每个标签头部下方有一条Height="3"、圆角55的PART_Underline边框，默认Opacity="0"隐藏；
• 选中时通过DoubleTransition（0.3 秒）把下划线透明度过渡为1，颜色取主题色SukiPrimaryColor；
• 鼠标悬停时标题前景色过渡为SukiPrimaryColor75，选中时为SukiPrimaryColor120（TabItem.axaml）；
• 禁用状态下文字自动应用SukiDisabledText资源（TabItem.axaml）；
• 标签条放置在底部（Bottom）时，样式会自动调整头部与下划线的边距，保证视觉对齐。

六、数据绑定驱动：MVVM 模式下的标签页

官方演示工程（TabControlViewModel.cs）展示了用 MVVM 方式驱动 TabControl 的标准姿势：ViewModel 暴露一个AvaloniaList<TabViewModel> Tabs集合，其中每个TabViewModel（TabViewModel.cs）持有Header、Content与IsEnabled三个只读属性；演示数据包含 5 个启用标签与 1 个禁用标签（new TabViewModel(6, false)），用于展示禁用态效果。

视图侧（TabControlView.axaml）通过样式为 TabControl 配置数据绑定：

<Style Selector="TabControl"> <Setter Property="ItemsSource" Value="{Binding Tabs}" /> <Setter Property="ItemTemplate"> <DataTemplate x:DataType="tabControl:TabViewModel"> <TextBlock Text="{Binding Header}" /> </DataTemplate> </Setter> <Setter Property="ContentTemplate"> <DataTemplate x:DataType="tabControl:TabViewModel"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Classes="h3" Text="{Binding Content}" /> </DataTemplate> </Setter> <Style x:DataType="tabControl:TabViewModel" Selector="^ TabItem"> <Setter Property="IsEnabled" Value="{Binding IsEnabled}" /> </Style> </Style>

这段代码覆盖了三个关键点，可直接迁移到业务代码中：

1. ItemsSource绑定集合：标签页集合来自 ViewModel，而不是在 XAML 中硬编码TabItem；
2. ItemTemplate与ContentTemplate分离：前者决定标签标题的外观，后者决定内容区的外观，二者各自绑定数据模型的不同属性；
3. IsEnabled逐项绑定：通过Selector="^ TabItem"的样式选择器把数据模型的IsEnabled同步到每个TabItem，实现“禁用某些标签页”的业务需求（禁用项点击无响应且文字呈禁用色）。

七、如何运行与验证

SukiUI 仓库自带完整的演示工程，运行方式如下：

1. 打开解决方案文件 Suki.sln（需要安装 .NET SDK 与 AvaloniaUI 相关 NuGet 依赖）；
2. 将SukiUI.Demo项目设为启动项并运行；
3. 在左侧导航进入 “Tabs” 页面（由 TabControlViewModel.cs 注册，图标为MaterialIconKind.Tab），即可看到顶部、左、右、底部以及横向左右五种形态的 TabControl 实时演示，其中第 6 个标签页保持禁用状态。

八、扩展阅读

• 官方控件文档：controls/navigation/tabcontrol.md
• 主题源码：SukiUI/Theme/TabControl.axaml、SukiUI/Theme/TabItem.axaml
• 相关样式资源：SukiUI/Theme/TabItemGlassStyles.xaml（定义了TabControlTopPlacementItemMargin等间距资源）
• 演示工程：SukiUI.Demo/Features/ControlsLibrary/TabControl/TabControlView.axaml、TabControlViewModel.cs

总结来说，SukiUI 的 TabControl 在保留 AvaloniaUI 原生控件全部数据绑定能力的前提下，通过主题样式提供了四向标签条、横向标签、胶囊选中态与下划线动画等开箱即用的视觉能力。无论是声明式硬编码标签页，还是 MVVM 数据绑定驱动，都能在演示代码的基础上快速落地。

• UI组件
• 桌面应用