如何修改Pivot选中头部项样式以添加下划线

嘿，我来帮你搞定这个Pivot头部选中状态加下划线的问题！其实核心是要修改PivotHeaderItem的模板，特别是它的选中视觉状态部分，下面一步步来：

1. 先获取PivotHeaderItem的默认样式 #

你可以通过Visual Studio或Blend提取默认的PivotHeaderItem样式（因为Pivot的头部项本质上是这个控件）。提取后，你会看到包含VisualStateManager的模板结构，这就是我们要修改的核心区域。

2. 在模板中添加下划线元素 #

在PivotHeaderItem的根布局（通常是一个Grid）里，添加一个用于显示下划线的元素，比如Rectangle，初始状态设为隐藏。示例代码如下：

<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
    <!-- 原有的内容展示控件 -->
    <ContentPresenter x:Name="ContentPresenter"
                      Content="{TemplateBinding Content}"
                      ContentTemplate="{TemplateBinding ContentTemplate}"
                      Margin="{TemplateBinding Padding}"
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    <!-- 新增的下划线元素 -->
    <Rectangle x:Name="HeaderUnderline"
               Height="2"
               Fill="{ThemeResource SystemControlHighlightAccentBrush}"
               VerticalAlignment="Bottom"
               HorizontalAlignment="Stretch"
               Visibility="Collapsed"/>
</Grid>

3. 修改选中状态的视觉动画 #

找到模板里的VisualStateGroups，定位到SelectionStates下的Selected视觉状态，添加动画让下划线显示出来。同时可以在Unselected状态里保持下划线隐藏，确保切换状态时的交互流畅：

<VisualStateGroup x:Name="SelectionStates">
    <VisualState x:Name="Unselected">
        <Storyboard>
            <!-- 原有的未选中状态动画（比如文字颜色） -->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderUnderline" Storyboard.TargetProperty="Visibility">
                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>
    <VisualState x:Name="Selected">
        <Storyboard>
            <!-- 原有的选中状态动画（比如文字颜色加深） -->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderUnderline" Storyboard.TargetProperty="Visibility">
                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>
</VisualStateGroup>

4. 应用修改后的样式到Pivot #

最后，把修改好的PivotHeaderItem样式通过Pivot的HeaderTemplate或者直接设置PivotHeaderItem的Style属性应用到你的Pivot控件上，就能看到选中的头部项下方出现下划线了！

简单来说，就是通过给头部项的模板加一个下划线元素，再利用视觉状态控制它的显示/隐藏，就能实现你要的效果啦。

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