如何为WPF TabControl中选中的TabItem添加可移动下划线

要实现选中TabItem底部的动态下划线效果，需要通过重写TabControl和TabItem的样式模板，结合绑定与自定义转换器实现下划线的平滑移动。以下是具体实现步骤和代码：

1. 添加必要命名空间 #

在UserControl根节点补充所需命名空间：

<UserControl x:Class="MyProject.Wpf.Views.Header"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:MyProject.Wpf.Views"
             mc:Ignorable="d"
             DataContext="{Binding HeaderView, Source={StaticResource Locator}}"
             d:DesignHeight="300" d:DesignWidth="300">

2. 实现下划线偏移转换器（C#） #

创建转换器类，用于计算选中TabItem的总偏移量：

namespace MyProject.Wpf.Views
{
    public class TabUnderlineOffsetConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            if (values == null || values.Length < 2) return 0;
            if (!(values[0] is TabPanel panel) || !(values[1] is int selectedIndex)) return 0;
            
            double offset = 0;
            for (int i = 0; i < selectedIndex; i++)
            {
                if (panel.Children.Count > i)
                {
                    var tabItem = panel.Children[i] as FrameworkElement;
                    if (tabItem != null)
                    {
                        offset += tabItem.ActualWidth + tabItem.Margin.Left + tabItem.Margin.Right;
                    }
                }
            }
            return offset;
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

3. 定义样式资源 #

在UserControl的Resources中添加TabItem、TabControl样式及转换器引用：

<UserControl.Resources>
    <!-- 下划线偏移转换器 -->
    <local:TabUnderlineOffsetConverter x:Key="TabUnderlineOffsetConverter"/>

    <!-- TabItem样式：移除默认选中效果，仅保留图标 -->
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Margin" Value="0,0,10,0"/> <!-- 调整TabItem间距 -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid x:Name="RootGrid" Background="Transparent">
                        <ContentPresenter x:Name="ContentPresenter"
                                          VerticalAlignment="Center"
                                          HorizontalAlignment="Center"
                                          ContentSource="Header"/>
                    </Grid>
                    <!-- 可选：选中时高亮图标 -->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="ContentPresenter" Property="Opacity" Value="1"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="False">
                            <Setter TargetName="ContentPresenter" Property="Opacity" Value="0.6"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- TabControl样式：添加动态下划线 -->
    <Style TargetType="{x:Type TabControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid x:Name="RootGrid" SnapsToDevicePixels="True">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="0"/> <!-- 隐藏默认内容区域 -->
                        </Grid.RowDefinitions>

                        <!-- Tab标题面板 -->
                        <TabPanel x:Name="HeaderPanel"
                                  Grid.Row="0"
                                  IsItemsHost="True"
                                  Background="Transparent"
                                  VerticalAlignment="Center"/>

                        <!-- 动态下划线 -->
                        <Border x:Name="UnderlineBorder"
                                Grid.Row="0"
                                Height="2"
                                Background="#FFFFFF" <!-- 下划线颜色可自定义 -->
                                VerticalAlignment="Bottom"
                                <!-- 下划线宽度绑定选中TabItem的宽度 -->
                                Width="{Binding ElementName=HeaderPanel, Path=Children[{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedIndex}].ActualWidth}">
                            <Border.RenderTransform>
                                <TranslateTransform>
                                    <!-- 下划线偏移量绑定转换器计算结果 -->
                                    <TranslateTransform.X>
                                        <MultiBinding Converter="{StaticResource TabUnderlineOffsetConverter}">
                                            <Binding ElementName="HeaderPanel"/>
                                            <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="SelectedIndex"/>
                                        </MultiBinding>
                                    </TranslateTransform.X>
                                </TranslateTransform>
                            </Border.RenderTransform>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

4. 原TabControl代码无需修改 #

原有TabControl代码可直接使用，样式会自动应用：

<TabControl Grid.Column="2" Background="Transparent" VerticalAlignment="Center" Margin="10">
    <TabItem IsSelected="True">
        <TabItem.Header>
            <Button Command="{Binding ShowPageA}">
                <Button.Template>
                    <ControlTemplate>
                        <Image Source="Images/PageA.png" Width="24" Height="24" />
                    </ControlTemplate>
                </Button.Template>
            </Button>    
        </TabItem.Header>
    </TabItem>
    <TabItem>
        <TabItem.Header>
            <Button Command="{Binding ShowPageB}">
                <Button.Template>
                    <ControlTemplate>
                        <Image Source="/Images/PageB.png" Width="24" Height="24" />
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </TabItem.Header>
    </TabItem>
    <TabItem>
        <TabItem.Header>
            <Button Command="{Binding ShowPageC}">
                <Button.Template>
                    <ControlTemplate>
                        <Image Source="/Images/PageC.png" Width="24" Height="24" />
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </TabItem.Header>
    </TabItem>
</TabControl>

关键说明 #

• TabItem样式：移除默认选中边框与背景，仅保留图标，并添加选中/未选中的透明度变化效果（可选）。
• 动态下划线：通过MultiBinding和自定义转换器计算选中TabItem的偏移量，实现下划线自动跟随选中项移动。
• 平滑过渡：WPF会自动为下划线位置变化应用默认过渡动画，也可通过显式Storyboard添加更个性化的动画效果。

内容的提问来源于stack exchange，提问作者Simon