简介：这是一份面向 WPF 桌面开发者的 TabControl 定制实例资源，围绕「选项卡在下方显示」这一布局需求，讲解如何通过 ControlTemplate 与 TabItem.Template 重写选项卡外观，涵盖背景、边框、字体、悬停与选中态等细节，并借助 IsSelected、SelectedIndex 与 SelectionChanged 事件实现选择与切换逻辑，适合已具备一定 XAML 基础、希望提升界面表现力的开发者参考。压缩包共 29 个文件，约 95KB，包含 MainWindow.xaml 与 App.xaml 等界面与入口文件、多个 cs 源码（含 ScrollableTabPanel、RelayCommand 等自定义组件）、xaml 模板资源、csproj 与 sln 工程文件及编译产物 exe、pdb、baml，可直接用 Visual Studio 打开运行与调试。目前已有 6268 人学习下载。资源价值在于提供一套可直接运行的 WpfTabControlApplication 示例工程，读者可对照源码理解模板重写与切换动画的实现方式，并在此基础上修改布局、样式与交互，快速套用到自己的项目中。
1. 为什么我把 TabControl 的标签挪到了下方：一个上位机界面的真实需求
去年接手一个工控上位机项目，界面顶部是工具栏，底部固定一排状态栏，中间留给内容区。WPF TabControl 的默认样式把标签条顶在最上面，和工具栏挤在一起，两层导航叠着，现场操作员点错过好几次。我索性把标签条挪到内容区下方，顺手把 WPF TabControl 样式里的选中态、悬停态、圆角方向整套重做了一遍。这套方案解决两件事：标签在下方显示，以及选择与切换干脆利落。适合桌面端后台、设备控制面板、多文档编辑器这类需要密集切换页签的场景，也适合被默认 TabItem 模板折磨过的开发者直接拿走改。
2. 拆开默认模板：TabControl 的四个部件与它们的绑定关系
2.1 默认 ControlTemplate 的真实结构
WPF 的 TabControl 默认模板来自主题资源，不同系统版本略有差异，但骨架稳定：一个 Grid，两行，第 0 行放 TabPanel 当标签条，第 1 行放 ContentPresenter 当内容区。我在项目里用设计器的「编辑模板副本」提取出来，删掉无关的视觉状态，剩下的核心结构大概是这样。
<!-- 简化后的默认模板，重点看行定义和两个部件 --> <ControlTemplate TargetType="{x:Type TabControl}"> <Grid ClipToBounds="True" KeyboardNavigation.TabNavigation="Local"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <!-- 第 0 行：标签条 --> <RowDefinition Height="*"/> <!-- 第 1 行：内容区 --> </Grid.RowDefinitions> <!-- 标签条：IsItemsHost 决定它是所有 TabItem 的容器 --> <TabPanel x:Name="HeaderPanel" Grid.Row="0" IsItemsHost="True" Panel.ZIndex="1"/> <!-- 内容区：ContentSource 决定它跟随 SelectedContent --> <Border x:Name="ContentPanel" Grid.Row="1"> <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent"/> </Border> </Grid> </ControlTemplate>这段模板里真正起作用的只有三处：RowDefinition的顺序决定标签在上还是在下，IsItemsHost="True"决定 TabPanel 接管所有 TabItem 的排列，ContentSource="SelectedContent"决定内容区显示哪一页。其余的背景、边框、Padding 都是装饰。
我见过不少人改样式时只改Background和CornerRadius，结果发现标签位置纹丝不动，就是因为没碰RowDefinition的先后顺序。要把标签挪到下方，本质是把第 0 行和第 1 行的内容对调，让 Grid 的第一行是星号高度、第二行是 Auto 高度。
参数上有两个点容易忽略。一是Panel.ZIndex="1"，它让标签条浮在内容区之上，后面做「选中标签与内容区连成一体」的效果时全靠这一层叠放。二是PART_SelectedContentHost这个名字，它属于约定名而非必须，但部分主题和第三方控件会按这个名字去找内容宿主，改模板时最好保留，省得后面接别的控件库时翻车。
2.2 TabPanel、IsItemsHost 与 ContentSource 三件套
TabPanel是 WPF 内部的一个面板类型，专门负责把 TabItem 排成一行，宽度不够时自动折成多行。它继承自 Panel，所以Panel.ZIndex这类附加属性对它内部的子元素依然有效。当你在 TabControl 的模板里写IsItemsHost="True"时，等于告诉 ItemsControl 的生成器：把生成的 TabItem 统统塞进这个面板，别另找地方。
这里有个容易混淆的点：TabItem 不是 TabControl 的「内容」，而是它的「项」。TabControl.Items里放的是业务数据或 TabItem 本身，IsItemsHost的面板负责摆这些项，而ContentPresenter的ContentSource="SelectedContent"负责摆当前选中项的内容。两条链路完全独立，一条管导航条，一条管显示区。
ContentSource="SelectedContent"是 ContentPresenter 上的一个特殊属性，它会让 ContentPresenter 自动去绑定模板化父级的SelectedContent、SelectedContentTemplate这一组只读属性。换句话说，你不用写任何Binding，只要写上ContentSource="SelectedContent"，内容区就会跟着当前选中项走。这是 TabControl 模板里最省事也最容易被漏掉的一行。
三件套的配合关系可以这么理解：TabPanel 决定「有哪些标签、排在哪儿」，IsItemsHost 决定「谁来装这些标签」，ContentSource 决定「内容区显示谁的正文」。三者缺一，要么标签不显示，要么内容区空白，要么标签全部堆在左上角重叠成一团。我调试模板时习惯先把这三处确认一遍，再看装饰性的边框和圆角，顺序反了会浪费很多时间。
2.3 选择状态的依赖属性链：SelectedItem、SelectedIndex、SelectedContent
TabControl 上有三个关键属性：SelectedItem、SelectedIndex、SelectedContent。前两个是可读写的依赖属性，第三个是只读的，由前两个推导出来。TabItem 上则有一个IsSelected，它是双向绑定的，TabItem 被点中时它变 true，同时通知 TabControl 更新SelectedItem；反过来 TabControl 设置SelectedIndex时，也会把对应位置的 TabItem 的IsSelected置为 true。
这条链子是「完美选择与切换」的基础。很多人写的样式看着挺漂亮，但快速连点几个标签时会出现两个标签同时高亮的残影，根源就在于模板里的选中态用了IsMouseOver或者自己维护的布尔值，而没走IsSelected。只要所有视觉状态都挂在IsSelected上，状态同步就不会出错。
还有一个时间差问题值得提前知道：当 TabControl 绑定ItemsSource时，TabItem 是延迟生成的，构造阶段SelectedItem可能还是 null，SelectedIndex是 -1。如果你的内容区在Loaded之前就依赖SelectedContent做布局计算，会拿到空值。常见做法是在 ViewModel 里显式给一个初始索引，或者在Loaded事件里补一次赋值，别指望控件自己猜。
2.4 为什么不直接用 TabStripPlacement="Bottom"
看到这儿你可能会问：TabControl 不是自带TabStripPlacement属性吗，设成 Bottom 不就完了？我一开始也是这么想的，结果界面惨不忍睹。这个属性确实会让默认模板交换行列，但它只交换位置，不管长相——TabItem 的圆角依旧朝上，边框依旧按「上方标签」的方向绘制，内容区的下边框和标签条上边框叠成两条线。视觉上就像把一张桌子倒过来放，位置对了，但每个零件都别扭。
更麻烦的是，不同系统主题下默认模板的内部命名不一样，你没法稳定地用 Trigger 去修补这些细节。所以我最终放弃了这条捷径，改成完全自绘模板。自绘之后TabStripPlacement就不再参与布局，位置完全由我自己写的RowDefinition顺序控制，反而更可控。这也是这个项目里第一个「血泪经验」：能用属性解决的别急着自绘，但涉及视觉方向的属性，往往只改位置不改观感。
3. 把标签放到下方：一份可直接抄的 ControlTemplate 写法
3.1 TabControl 模板：行序倒置与 1px 接缝处理
核心思路就一句话：把内容区放第 0 行、标签条放第 1 行，然后让标签条整体上移 1px，去盖住内容区的下边框。这样选中标签的背景色和内容区背景色连成一片，视觉上是一张完整的卡片。
<Style x:Key="BottomTabControlStyle" TargetType="{x:Type TabControl}"> <Setter Property="Background" Value="#FFFFFF"/> <Setter Property="BorderBrush" Value="#D8DEE9"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Padding" Value="0"/> <Setter Property="SnapsToDevicePixels" Value="True"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabControl}"> <Grid ClipToBounds="True" KeyboardNavigation.TabNavigation="Local" SnapsToDevicePixels="True"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <!-- 0：内容区，在上 --> <RowDefinition Height="Auto"/> <!-- 1：标签条，在下 --> </Grid.RowDefinitions> <!-- 内容区：四边描边，下边框稍后会被选中标签盖住 --> <Border x:Name="ContentPanel" Grid.Row="0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" KeyboardNavigation.DirectionalNavigation="Contained"> <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </Border> <!-- 标签条：Margin 上移 1px，与内容区下边框重合 --> <TabPanel x:Name="HeaderPanel" Grid.Row="1" IsItemsHost="True" Margin="0,-1,0,0" Panel.ZIndex="1" KeyboardNavigation.TabIndex="1"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>逐个参数说。Grid.RowDefinitions第一行Height="*"表示内容区吃掉所有剩余高度，第二行Height="Auto"表示标签条按内容自适应高度，这两句交换就是标签在上和标签在下的全部区别。Margin="0,-1,0,0"里的负上边距是把标签条往上顶 1 像素，正好压住内容区的 1px 下边框，这是接缝处理的精髓，不写这个就会出现一条突兀的双线。
KeyboardNavigation.TabNavigation="Local"和TabNavigation="1"保证 Tab 键在标签之间循环而不是跳到内容区里的控件，DirectionalNavigation="Contained"防止方向键把焦点移出内容区。这几个附加属性不影响观感，但直接影响键盘操作的手感，做「完美切换」时不能省。
SnapsToDevicePixels="True"在 100% 缩放下没什么感觉，但在 125% 或 150% 缩放的显示器上，它能让 1px 的边框不至于被抗锯齿糊成 2px 的灰条。工控机接的显示器五花八门，这一行我是必加的。
3.2 TabItem 模板：下圆角、上接缝线与相邻边框合并
TabControl 的模板只管布局，真正好看不好看取决于 TabItem。这里要解决三个问题：圆角必须只在下方，选中时的上边线必须变成内容区背景色，相邻标签的左右边框不能叠成 2px 双线。
<Style x:Key="BottomTabItemStyle" TargetType="{x:Type TabItem}"> <Setter Property="Foreground" Value="#4A5568"/> <Setter Property="Padding" Value="18,9"/> <Setter Property="MinWidth" Value="96"/> <Setter Property="SnapsToDevicePixels" Value="True"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <Grid x:Name="Root" MinHeight="36" Background="Transparent"> <!-- 主体：只画左、右、下三条边，底部两个角是圆角 --> <Border x:Name="Bd" Background="#F4F6F9" BorderBrush="#D8DEE9" BorderThickness="1,0,1,1" CornerRadius="0,0,8,8"/> <!-- 顶部接缝线：单独一条 1px，选中时换成白色 --> <Rectangle x:Name="TopLine" Height="1" VerticalAlignment="Top" Fill="#D8DEE9"/> <!-- 表头内容：Header 而不是 Content --> <ContentPresenter x:Name="HeaderHost" ContentSource="Header" Margin="{TemplateBinding Padding}" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter TargetName="Bd" Property="Background" Value="#FFFFFF"/> <Setter TargetName="TopLine" Property="Fill" Value="#FFFFFF"/> <Setter Property="Panel.ZIndex" Value="3"/> <Setter Property="Foreground" Value="#2B6CB0"/> <Setter Property="FontWeight" Value="SemiBold"/> </Trigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsMouseOver" Value="True"/> <Condition Property="IsSelected" Value="False"/> </MultiTrigger.Conditions> <Setter TargetName="Bd" Property="Background" Value="#E8EEF7"/> <Setter Property="Foreground" Value="#2B6CB0"/> </MultiTrigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Foreground" Value="#A0AEC0"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>关键点拆开讲。BorderThickness="1,0,1,1"的上边是 0，因为上面那条线由独立的Rectangle负责，这样做的目的是让线的颜色可以独立于边框画笔变化，而不用改变厚度引起 1px 的高度抖动。如果直接把 Border 的上边厚度改成 0 再改回来，标签条整体高度会跳一下，切换时肉眼可见。
CornerRadius="0,0,8,8"的顺序是左上、右上、右下、左下，标签在下方所以圆角落在底部两个角，这个顺序写反了会变成上方圆角，一眼就能看出来。
选中时TopLine的Fill换成#FFFFFF，和内容区背景一致，于是内容区下边框在选中标签正上方被「擦掉」，两者连成一体。这是整个样式里观感提升最大的一行，也是我调了最久的一处，因为一开始我用的是改 Border 的边框颜色，结果线是盖住了，但标签内部还能看到一条浅灰的残影——那是内容区 Border 自己的下边框透出来。后来改成 TabPanel 上移 1px 加独立线条，才彻底干净。
Panel.ZIndex在 Trigger 里设成 3，是为了让选中的标签压住左右邻居的边框和接缝线。TabPanel 内部的子元素默认按声明顺序叠放，后面的压住前面的，选中项如果排在前面就会被后面的邻居遮掉一角。把选中项提到最上层，这个遮挡问题就没了。
最后是相邻边框合并。在 TabPanel 上给 TabItem 加Margin="0,0,-1,0"，让每个标签的右边距吃掉 1px，和下一个标签的左边框重合，视觉上就只有一条线。这个值我写在了 TabItem 的Marginsetter 里，需要和MinWidth一起调，不然窄屏下标签会被压得过紧。
3.3 资源字典拆分与合并顺序
样式写完直接贴在窗口里也能跑，但项目里肯定不止一个界面用。我的组织方式是拆成三个字典：Colors.xaml放颜色画笔，TabControl.Bottom.xaml放 TabControl 和 TabItem 样式，Converters.xaml放少量的值转换器。合并顺序不能乱，颜色字典必须排第一，因为后面两个会引用里面的StaticResource。
<!-- App.xaml 里的合并顺序：先颜色，再控件样式 --> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Themes/Colors.xaml"/> <ResourceDictionary Source="Themes/TabControl.Bottom.xaml"/> <ResourceDictionary Source="Themes/Converters.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>StaticResource是编译期解析，引用顺序错了会直接抛异常，报「找不到资源」。如果确实需要后加载的字典里引用先加载的，用DynamicResource可以绕过，但代价是每次访问都走一次查找，标签多的时候切换会有一点点卡顿感。我的做法是颜色全部用StaticResource，只有主题切换这种运行时才确定的东西才用DynamicResource。
拆字典还有个附带好处：换肤的时候只改Colors.xaml一个文件，所有引用这些画笔的控件自动跟着变。这个项目的现场版本需要白天/夜间两套配色，我就是靠这一层拆分布置的，切换时只换一个字典的 Source，界面整体刷新，没有一处需要写额外的代码。
4. 选择与切换的三种实现路线：触发器、状态机与数据驱动
4.1 纯 Trigger 方案：够用且最不容易出错
3.2 里那段ControlTemplate.Triggers就是 Trigger 方案。它的优点是直观，所有状态和对应的视觉变化写在一起，改一个颜色不用跳文件。缺点是当状态组合变多时会膨胀，比如「选中 + 悬停」「选中 + 禁用」「未选中 + 焦点」这几组如果都写 Trigger，模板底下会堆一长串。
Trigger 的匹配顺序是从上到下，后面的覆盖前面的。所以IsSelected的 Trigger 要写在IsMouseOver && !IsSelected的 MultiTrigger 之后，否则鼠标悬停在选中标签上时会命中 MultiTrigger 的条件判断失败而保持选中态，这个倒没问题，真正会出事的是反过来写——悬停 Trigger 在后面，选中标签被鼠标扫过就变成悬停色。这个顺序我踩过一次，表现是「点中一个标签后鼠标移开又恢复，但鼠标停在上面时看起来像没选中」。
4.2 VisualStateManager 方案：切换有动画，但要保住状态组名
如果希望切换带一点颜色过渡，Trigger 就力不从心了，因为它只能瞬间赋值。这时候可以换 VisualStateManager。
<ControlTemplate TargetType="{x:Type TabItem}"> <Grid x:Name="Root" MinHeight="36" Background="Transparent"> <!-- 组名必须是 SelectionStates，TabItem 内部会按这个名字调用 GoToState --> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="Unselected"/> <VisualState x:Name="Selected"> <Storyboard> <ColorAnimation Storyboard.TargetName="BdBrush" Storyboard.TargetProperty="Color" To="#FFFFFF" Duration="0:0:0.15"/> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="Bd" BorderBrush="#D8DEE9" BorderThickness="1,0,1,1" CornerRadius="0,0,8,8"> <Border.Background> <SolidColorBrush x:Name="BdBrush" Color="#F4F6F9"/> </Border.Background> </Border> <Rectangle x:Name="TopLine" Height="1" VerticalAlignment="Top" Fill="#D8DEE9"/> </Grid> </ControlTemplate>组名SelectionStates和状态名Selected/Unselected是硬约定，TabItem 内部在选中状态变化时会按这两个名字去调VisualStateManager.GoToState。名字写错不会报错，只是动画永远不播，界面看起来就像没选中——这个坑比异常还难查，因为没有任何日志。我一般会在模板里先留一个空的状态组，确认能切换了再往里填 Storyboard。
另外Storyboard.TargetProperty="Color"要指向画刷的Color而不是Border.Background，因为后者是画刷对象本身，动画要动的是它的属性。这一处写错会抛「无法解析 TargetProperty」的运行时异常，在 XAML 加载阶段就能看到，反而好排查。
4.3 MVVM 数据驱动：ItemsSource + SelectedIndex 双向绑定
真实项目里标签页基本不会手写一堆 TabItem，都是绑集合。这套样式配合数据绑定时，要额外注意 ItemTemplate 和 ContentTemplate 的分工。
<!-- 绑定集合：ItemTemplate 管标签表头，ContentTemplate 管内容区 --> <TabControl ItemsSource="{Binding Pages}" SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" ItemTemplate="{StaticResource HeaderTemplate}" ContentTemplate="{StaticResource PageTemplate}" Style="{StaticResource BottomTabControlStyle}" ItemContainerStyle="{StaticResource BottomTabItemStyle}"/>// ViewModel：给一个明确的初始索引，避免首屏内容区空白 public class ShellViewModel : INotifyPropertyChanged { private int _selectedIndex = 0; // 关键：别留 -1 public ObservableCollection<PageItem> Pages { get; } = new ObservableCollection<PageItem>(); public int SelectedIndex { get => _selectedIndex; set { if (_selectedIndex == value) return; _selectedIndex = value; OnPropertyChanged(nameof(SelectedIndex)); } } public event PropertyChangedEventHandler PropertyChanged; private void OnPropertyChanged(string name) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); }ItemTemplate会被赋给生成出来的 TabItem 的HeaderTemplate，所以它负责表头长相；ContentTemplate被 TabControl 的ContentPresenter通过SelectedContentTemplate拿到，负责内容区长什么样。这两个模板搞反了，表现是表头里出现整页内容，或者内容区只有一个标题，一眼能认出来但不一定想得到是模板绑错了。
SelectedIndex要给初始值 0。绑定模式下 TabControl 首次生成容器时SelectedIndex默认是 -1，如果 ViewModel 不主动赋值，首屏就是一片空白，用户点一下才出来内容。这个现象在新手项目里极为常见，问起来就是「我的 TabControl 一打开没内容」。给个 0 就完事，别指望控件自己选第一个。
如果业务上需要「切换前拦截」，比如有未保存的表单要提示，别在SelectedIndex的 setter 里做弹窗，那是属性变更通知，回滚很麻烦。常见做法是监听SelectionChanged事件，在e.Source判断是 TabControl 自身之后做校验，不通过就把e.Handled = true并把索引改回去。
4.4 键盘与焦点：让切换不只在鼠标下好用
「完美切换」不只是鼠标点。现场操作员戴着手套用触摸屏，键盘反而少用，但调试和维护时我全靠键盘。默认情况下 TabControl 支持 Ctrl+Tab 在页签间循环，前提是模板没把键盘导航打断。3.1 里的KeyboardNavigation.TabNavigation="Local"就是保这个的。
焦点框也值得单独处理。TabItem 默认会显示一个虚线焦点矩形，套在自定义圆角边框上会露出边角，很难看。做法是在 TabItem 样式里设FocusVisualStyle="{x:Null}"，然后自己在模板里用IsKeyboardFocused触发器画一条内描边。牺牲一点系统的可访问性提示，换整体观感，这个取舍在工控场景下我认为是值的，因为操作员根本不看焦点框。
5. 避坑与排查：五个真实翻车现场
5.1 坑一：只改 TabStripPlacement，圆角朝上边框打架
现象是把TabStripPlacement="Bottom"设上之后，标签确实跑到了下面，但每个标签的圆角还朝上，内容区的下边框和标签条的上边框叠成两条平行线，中间还有 1px 的缝。
原因是这个属性只交换模板里的行列位置，不改 TabItem 的CornerRadius方向，也不处理接缝。默认模板里根本没有针对底部方向的 TabItem 视觉状态。
解决办法只有自绘模板，按 3.1 和 3.2 的做法把RowDefinition顺序倒过来、圆角改成0,0,8,8、标签条上移 1px。我试过用 Style Trigger 去修补默认模板，但默认模板的内部命名在不同系统主题下不统一，Trigger 找不到目标，最后放弃。
5.2 坑二：相邻标签出现 2px 双线
现象是标签之间看起来有两条细线，放大看是 2 像素，颜色比单线深，整体像一条虚线。
原因是每个 TabItem 都画了自己的左边框和右边框，相邻两个叠在一起就是 2px。TabPanel 不做边框合并，它只是按顺序排列。
解决办法是给 TabItem 加Margin="0,0,-1,0"，用负右边距吃掉 1px。注意这个值要和Padding一起调，标签很窄的时候负边距会让内容贴边。另一个思路是只画右边框不画左边框，第一个标签单独补一条，但那样选中态切换时左边框会消失，反而更麻烦，我选了负边距这条路。
5.3 坑三：ContentPresenter 忘了 ContentSource，内容区永远空白
现象是标签都正常显示、点击也能高亮，但内容区始终是白的，换哪个标签都一样。
原因是模板里的ContentPresenter没写ContentSource="SelectedContent"，它默认去绑定模板化父级的Content属性，而 TabControl 的Content通常是空的。所以它什么都不显示，也不报错。
解决办法是补上ContentSource="SelectedContent"。同理，TabItem 模板里的ContentPresenter要写ContentSource="Header"，否则表头是空白的。这两处都属于「不写不报错，写了才正常」的类型，排查时优先检查。我在模板里会把这两个名字写进注释，免得下次复制粘贴时漏掉。
5.4 坑四：绑定集合时首屏空白，点一下才出内容
现象是程序启动后 TabControl 有标签，但内容区空白，手动点一下任意标签内容才出来。
原因是ItemsSource绑定后容器延迟生成，SelectedIndex初始值是 -1，没有任何一项被选中，SelectedContent自然是 null。
解决办法是在 ViewModel 里给SelectedIndex一个初始值 0，或者在Loaded事件里判断SelectedIndex < 0就设成 0。我更倾向在 ViewModel 里做，因为那是业务状态的起点，放在视图事件里容易在重建视图时漏掉。如果业务上确实允许「一个都不选」，那就要在模板里给内容区放一个空状态提示，别让用户对着白板发呆。
5.5 坑五：悬停态盖掉选中态，鼠标扫过一片乱
现象是鼠标快速划过标签条时，已经选中的那个标签会短暂变色，看起来像选中丢了。
原因是 Trigger 的书写顺序错了。IsMouseOver && !IsSelected的 MultiTrigger 如果排在IsSelected的 Trigger 后面，理论上不会命中，因为条件里有!IsSelected。但如果你图省事只写了IsMouseOver单条件 Trigger，排在选中 Trigger 后面，那悬停就会覆盖选中。
解决办法是悬停态必须带IsSelected=False的条件，用 MultiTrigger 或者MultiDataTrigger都行。另外 ColorAnimation 方案里要把CommonStates组的优先级想清楚，选中态的动画和不选中的悬停动画如果在不同组里，会同时生效，取最后写入的值。我的习惯是选中态永远只用IsSelected一个条件，最省心。
6. 二次开发：把标签位置做成可配置，以及我的验证习惯
这套样式落地之后，另一个项目也要用，但那边要求标签可以在上也可以在下，由用户自己选。我把位置从模板里抽出来做成了一个附加属性，通过它切换两套Style。
// 附加属性：控制标签条位置，值变化时切换对应的样式资源 public static class TabStrip { public static readonly DependencyProperty PlacementProperty = DependencyProperty.RegisterAttached( "Placement", typeof(TabStripPlacement), typeof(TabStrip), new PropertyMetadata(TabStripPlacement.Bottom, OnPlacementChanged)); public static void SetPlacement(DependencyObject obj, TabStripPlacement value) => obj.SetValue(PlacementProperty, value); public static TabStripPlacement GetPlacement(DependencyObject obj) => (TabStripPlacement)obj.GetValue(PlacementProperty); private static void OnPlacementChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (d is not TabControl tc) return; // 只换样式，不重建模板，避免选中项丢失 var key = (TabStripPlacement)e.NewValue == TabStripPlacement.Top ? "TopTabControlStyle" : "BottomTabControlStyle"; if (Application.Current.TryFindResource(key) is Style style) { tc.Style = style; } } }用法是local:TabStrip.Placement="Top"一行搞定。这里的关键是只替换Style，不动ItemsSource和SelectedIndex，所以切换位置时当前选中的页签不会丢。我最初写的是重新赋值Template，结果每次切换都回到第一页，用户抱怨了半天，后来改成换 Style 才解决。
验证方面，我养成了三个固定动作。第一，把系统缩放调到 150%，看 1px 边框有没有糊成 2px，这一步能抓出大半的SnapsToDevicePixels遗漏。第二，用可视化树工具展开 TabControl，确认 TabPanel 底下挂的确实是 TabItem 而不是多包了一层 ContentPresenter，绑定模式下包错层的情况特别多。第三，写一个只有三个页签的最小 Demo，反复快速点击二十次，看有没有残影和闪烁，切换逻辑的 bug 在慢速点击下基本暴露不出来。
从那以后我每次做自定义控件样式，都强制先在最小 Demo 里跑一遍这套检查，再往业务工程里搬。大工程里变量太多，样式出问题时你分不清是模板写错了还是数据绑错了。这套 TabControl 的样式和模板我整理成了一份可直接引用的资源字典，配合最小 Demo 一起看，改起来会快很多，希望帮到你。
本文还有配套的精品资源，点击获取
