如何实现PivotItemHeader在空间不足时自动换行两行显示？

嘿，这个适配小屏幕的需求我太熟了！之前帮客户做IoT设备上的应用时，也遇到过Pivot表头被截断的问题。下面给你几个实用的实现方案，你可以根据自己的场景来选：

这个方案通用性最强，不管你的表头是纯文本还是复杂控件，都能搞定。核心思路是重写PivotHeaderItem的控件模板，把内容放到WrapPanel里——它会自动在空间不足时换行。

<Style TargetType="PivotHeaderItem">
    <Setter Property="Padding" Value="16,8"/> <!-- 先调整下内边距，避免换行后太挤 -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="PivotHeaderItem">
                <Grid Background="{TemplateBinding Background}">
                    <!-- 用WrapPanel替代默认容器，实现换行 -->
                    <WrapPanel HorizontalAlignment="Center" VerticalAlignment="Center"
                               Margin="{TemplateBinding Padding}">
                        <ContentPresenter Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </WrapPanel>
                    <!-- 保留原有的选中/未选中视觉状态，不影响交互体验 -->
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected"/>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

把这个样式加到你的资源字典里，所有PivotHeaderItem都会自动用上WrapPanel布局，空间不够时就会自动堆叠换行。

如果你的Pivot表头都是纯文本，那不用改整个模板，直接自定义HeaderTemplate更省事：

<Pivot HorizontalAlignment="Stretch"> <!-- 确保Pivot占满可用宽度 -->
    <Pivot.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" 
                       TextWrapping="Wrap" 
                       TextAlignment="Center"
                       MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=PivotHeaderItem}}"/>
        </DataTemplate>
    </Pivot.HeaderTemplate>

    <!-- 你的PivotItem示例 -->
    <PivotItem Header="设备状态监控面板（超长表头测试）"/>
    <PivotItem Header="数据统计与分析"/>
    <PivotItem Header="系统设置与维护"/>
</Pivot>

这里给TextBlock开了TextWrapping="Wrap"，同时绑定MaxWidth到表头项的实际宽度，确保文本不会超出范围，空间不足时就会自动换行。

• 适配不同DPI的IoT屏幕：可以通过VisualStateManager针对小屏幕调整字体大小，减少换行次数：

<!-- 可以加到Pivot或者PivotHeaderItem的模板里 -->
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ScreenSizeStates">
        <VisualState x:Name="Default"/>
        <VisualState x:Name="SmallScreen">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderTextBlock"
                                               Storyboard.TargetProperty="FontSize">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="12"/>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

• 调整表头间距：如果换行后还是太挤，可以修改Pivot的HeaderPadding属性，比如<Pivot HeaderPadding="0,0,0,8"/>，给换行后的内容留更多空间。

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