如何防止PivotHeaderItem文本加粗时标签布局发生移位

这个问题我之前在做UWP和Xamarin.Forms混合开发时也碰到过——文本加粗导致PivotHeader宽度跳动，确实很影响体验。本质原因是TextBlock在字体粗细变化时，ActualWidth会跟着改变，进而带动整个HeaderItem的布局尺寸变化，触发其他标签移位。要解决这个问题，核心思路是让每个PivotHeaderItem的宽度固定，不受文本样式变化影响，下面给你几个可行的方案：

方案1：纯XAML占位文本技巧（推荐） #

这是最简单的实现方式，不需要任何代码逻辑，利用Grid的重叠布局，让一个透明的常规文本占据固定宽度，实际显示的文本不管是否加粗，都不会改变容器宽度：

修改你的HeaderTemplate XAML部分：

<DataTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>
    <Grid>
        <!-- 透明的常规文本，用来固定容器宽度 -->
        <TextBlock Text='{Binding}' 
                   FontWeight="Normal" 
                   Opacity="0"
                   Margin="{StaticResource PivotHeaderItemMargin}"/>
        <!-- 实际显示的文本，样式随选中状态变化 -->
        <TextBlock Text='{Binding}' 
                   Style='{StaticResource PivotHeaderItemTextStyle}'/>
    </Grid>
</DataTemplate>

原理是两个TextBlock完全重叠，透明的那个保持常规字体，宽度固定；显示的文本即使加粗，也只会在这个固定宽度内渲染（如果文本过长可能会轻微截断，但PivotHeader的文本一般不会太长，这个问题可以忽略）。

方案2：动态计算固定宽度（灵活适配长文本） #

如果你的Header文本可能较长，不想出现截断，可以通过代码提前计算未加粗时的文本宽度，然后设置HeaderItem的固定宽度：

在你的GetStyledHeaderTemplate方法中添加加载事件处理：

private Windows.UI.Xaml.DataTemplate GetStyledHeaderTemplate()
{
    var xaml = @"
        <DataTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>
            <TextBlock x:Name='HeaderText' 
                       Text='{Binding}' 
                       Style='{StaticResource PivotHeaderItemTextStyle}'/>
        </DataTemplate>";
    
    var template = (Windows.UI.Xaml.DataTemplate)Windows.UI.Xaml.Markup.XamlReader.Load(xaml);
    
    // 模板加载时计算并设置固定宽度
    template.Loaded += (s, e) =>
    {
        var textBlock = (TextBlock)s;
        var text = textBlock.Text;
        
        // 测量未加粗状态下的文本宽度
        var formattedText = new Windows.UI.Xaml.Media.FormattedText(
            text,
            Windows.Globalization.Language.CurrentInputMethodLanguageTag,
            Windows.UI.Xaml.FlowDirection.LeftToRight,
            new Windows.UI.Xaml.Media.Typeface(textBlock.FontFamily, textBlock.FontStyle, Windows.UI.Text.FontWeight.Normal, textBlock.FontStretch),
            textBlock.FontSize,
            textBlock.Foreground);
        
        // 设置TextBlock的最小/最大宽度为测量值，确保加粗后宽度不变
        textBlock.MinWidth = formattedText.Width;
        textBlock.MaxWidth = formattedText.Width;
    };
    
    return template;
}

这种方法会精确计算每个Header文本的常规宽度，即使加粗后，TextBlock的宽度也不会变化，完全避免移位。

方案3：自定义PivotHeaderItem样式 #

你也可以通过修改PivotHeaderItem的默认样式，在VisualState切换时固定控件宽度。首先在UWP项目的App.xaml中定义自定义样式：

<Style x:Key="FixedWidthPivotHeaderItemStyle" TargetType="PivotHeaderItem">
    <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
    <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
    <Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="PivotHeaderItem">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected"/>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="FontWeight">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Bold"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <!-- 其他VisualState保持默认即可 -->
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter"
                                      Content="{TemplateBinding Content}"
                                      Margin="{TemplateBinding Padding}"
                                      FontSize="{TemplateBinding FontSize}"
                                      FontWeight="{TemplateBinding FontWeight}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后在自定义Renderer中应用这个样式，并在Pivot加载后设置每个HeaderItem的固定宽度：

protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
{
    base.OnElementChanged(e);
    
    if (Control != null)
    {
        Control.HeaderTemplate = GetStyledHeaderTemplate();
        // 应用自定义样式
        Control.HeaderItemStyle = (Windows.UI.Xaml.Style)Windows.UI.Xaml.Application.Current.Resources["FixedWidthPivotHeaderItemStyle"];
        
        // Pivot加载完成后，遍历设置HeaderItem宽度
        Control.Loaded += (s, args) =>
        {
            foreach (var item in Control.Items)
            {
                var headerItem = Control.ContainerFromItem(item) as PivotHeaderItem;
                if (headerItem == null) continue;
                
                var contentPresenter = headerItem.FindName("ContentPresenter") as ContentPresenter;
                var textBlock = contentPresenter.Content as TextBlock ?? (contentPresenter.ContentTemplate.LoadContent() as TextBlock);
                if (textBlock == null) continue;
                
                // 测量常规文本宽度
                var formattedText = new Windows.UI.Xaml.Media.FormattedText(
                    textBlock.Text,
                    Windows.Globalization.Language.CurrentInputMethodLanguageTag,
                    Windows.UI.Xaml.FlowDirection.LeftToRight,
                    new Windows.UI.Xaml.Media.Typeface(textBlock.FontFamily, textBlock.FontStyle, Windows.UI.Text.FontWeight.Normal, textBlock.FontStretch),
                    textBlock.FontSize,
                    textBlock.Foreground);
                
                // 设置HeaderItem的固定宽度（包含内边距）
                headerItem.Width = formattedText.Width + headerItem.Padding.Left + headerItem.Padding.Right;
            }
        };
    }
}

这三个方案都能有效解决标签移位的问题，优先推荐方案1，实现最简单；如果需要适配长文本，选择方案2或3即可。

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