如何限制UWP Pivot头部最大元素数量并将头部置于底部？

我来帮你搞定这个UWP Pivot的两个需求——限制头部最多显示5个标签，以及调整头部位置的问题。下面分步骤给你拆解实现方式：

一、限制Pivot头部最多显示5个元素 #

UWP默认的Pivot头部会展示所有标签，超出后可以横向滚动。要限制最多显示5个，有两种常用方案：

方案1：数据源层面控制（简单直接） #

如果你的Pivot是通过绑定ItemsSource加载数据的，那直接在ViewModel里控制只加载前5个元素就行，代码示例：

// 假设你有一个全量的数据源列表
var allPivotItems = GetAllPivotItems();

// 只取前5个添加到绑定的集合中
foreach (var item in allPivotItems.Take(5))
{
    YourBoundPivotItemsCollection.Add(item);
}

这个方法的好处是代码少，不需要自定义控件，但缺点是如果需要保留所有Pivot内容（只是头部不显示），这个方案就不适用了。

方案2：自定义PivotHeaderPanel（灵活可控） #

如果想保留所有PivotItem，只是头部标签最多显示5个，那可以自定义一个LimitedPivotHeaderPanel来控制布局：

首先在XAML里给Pivot指定使用这个自定义面板：

<Style TargetType="Pivot">
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <local:LimitedPivotHeaderPanel MaxVisibleItems="5">
                    <ItemsPresenter />
                </local:LimitedPivotHeaderPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后编写自定义面板的C#代码：

public class LimitedPivotHeaderPanel : Panel
{
    // 定义依赖属性，设置最大可见数量
    public static readonly DependencyProperty MaxVisibleItemsProperty =
        DependencyProperty.Register(nameof(MaxVisibleItems), typeof(int), typeof(LimitedPivotHeaderPanel), new PropertyMetadata(5, (s,e) => ((LimitedPivotHeaderPanel)s).InvalidateArrange()));

    public int MaxVisibleItems
    {
        get => (int)GetValue(MaxVisibleItemsProperty);
        set => SetValue(MaxVisibleItemsProperty, value);
    }

    protected override Size MeasureOverride(Size availableSize)
    {
        var visibleChildren = Children.Take(MaxVisibleItems);
        Size totalSize = new Size();

        foreach (var child in visibleChildren)
        {
            child.Measure(availableSize);
            totalSize.Width += child.DesiredSize.Width;
            totalSize.Height = Math.Max(totalSize.Height, child.DesiredSize.Height);
        }

        return totalSize;
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        double currentX = 0;
        var visibleChildren = Children.Take(MaxVisibleItems);

        // 布局可见的前5个标签
        foreach (var child in visibleChildren)
        {
            child.Arrange(new Rect(currentX, 0, child.DesiredSize.Width, finalSize.Height));
            currentX += child.DesiredSize.Width;
        }

        // 隐藏超出的标签
        foreach (var child in Children.Skip(MaxVisibleItems))
        {
            child.Arrange(new Rect(0, 0, 0, 0));
        }

        return finalSize;
    }
}

这个方案可以保留所有PivotItem，只是头部不显示多余的标签，你依然可以通过代码切换到任意PivotItem。

二、调整Pivot头部的位置（以移到底部为例） #

UWP默认Pivot头部在顶部，要调整位置（比如移到底部），需要修改Pivot的ControlTemplate，交换内容和头部的布局位置：

<Style TargetType="Pivot">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Pivot">
                <Grid x:Name="RootElement" Background="{TemplateBinding Background}" 
                      BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid.RowDefinitions>
                        <!-- 第一行放Pivot内容，第二行放头部 -->
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <!-- Pivot内容区域 -->
                    <ScrollViewer x:Name="ScrollViewer" HorizontalScrollBarVisibility="Hidden" 
                                  VerticalScrollBarVisibility="Hidden" ZoomMode="Disabled" Grid.Row="0">
                        <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
                            <!-- 原来的顶部头部隐藏 -->
                            <PivotHeaderPanel x:Name="Header" Visibility="Collapsed"/>
                            <ItemsPresenter x:Name="PivotItemPresenter">
                                <ItemsPresenter.RenderTransform>
                                    <TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
                                </ItemsPresenter.RenderTransform>
                            </ItemsPresenter>
                        </PivotPanel>
                    </ScrollViewer>

                    <!-- 底部头部（如果用方案2的自定义面板，替换这里的PivotHeaderPanel即可） -->
                    <local:LimitedPivotHeaderPanel x:Name="BottomHeader" Grid.Row="1" 
                                                   MaxVisibleItems="5" ItemsSource="{TemplateBinding Items}">
                        <local:LimitedPivotHeaderPanel.RenderTransform>
                            <TranslateTransform x:Name="HeaderTranslateTransform"/>
                        </local:LimitedPivotHeaderPanel.RenderTransform>
                    </local:LimitedPivotHeaderPanel>

                    <!-- 保留默认的视觉状态，确保切换标签的动画正常工作 -->
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="Orientation">
                            <VisualState x:Name="Portrait"/>
                            <VisualState x:Name="Landscape">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="NavigationButtonsVisibility">
                            <VisualState x:Name="NavigationButtonsHidden"/>
                            <VisualState x:Name="NavigationButtonsVisible">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LeftNavButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RightNavButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="HeaderStates">
                            <VisualState x:Name="HeaderDynamic"/>
                            <VisualState x:Name="HeaderStatic">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这个模板把Pivot内容放在顶部，头部放在底部，同时结合了方案2的自定义面板，实现了“最多显示5个头部标签+头部在底部”的效果。如果需要把头部放在其他位置，调整Grid的行/列定义即可。

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