如何在UWP XAML页面底部实现微软风格Pivot菜单？

嘿，我刚好做过类似的实现，给你一步步拆解怎么搞定这种底部的Pivot导航菜单：

1. 核心思路：调整Pivot的布局结构 #

默认Pivot的Header在顶部，我们需要修改它的ControlTemplate，把Header区域移到页面底部，同时让内容区域占据上方的全部空间。

2. 完整XAML代码示例 #

下面是一个可直接复用的实现，包含底部导航的样式、图标+文字的HeaderItem，以及选中状态的高亮效果：

<Page
    x:Class="YourNamespace.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- 自定义PivotHeaderItem样式：图标+文字，底部导航风格 -->
        <Style x:Key="BottomPivotHeaderItemStyle" TargetType="PivotHeaderItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="PivotHeaderItem">
                        <Grid
                            Width="Auto"
                            Height="60"
                            Background="Transparent">
                            <StackPanel
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Orientation="Vertical">
                                <SymbolIcon
                                    x:Name="Icon"
                                    Symbol="{Binding IconSymbol}"
                                    Foreground="{TemplateBinding Foreground}"
                                    Width="24"
                                    Height="24"/>
                                <TextBlock
                                    x:Name="HeaderText"
                                    Text="{TemplateBinding Content}"
                                    FontSize="12"
                                    Foreground="{TemplateBinding Foreground}"
                                    Margin="0,4,0,0"/>
                            </StackPanel>
                            <!-- 选中状态的下划线指示器 -->
                            <Rectangle
                                x:Name="SelectedIndicator"
                                Height="2"
                                Width="40"
                                Fill="{ThemeResource SystemControlHighlightAccentBrush}"
                                VerticalAlignment="Bottom"
                                Opacity="0"/>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="SelectedIndicator"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0:0:0.2"/>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="Icon"
                                                Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="HeaderText"
                                                Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- 修改Pivot的ControlTemplate，把Header移到底部 -->
        <Style x:Key="BottomPivotStyle" TargetType="Pivot">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Pivot">
                        <Grid x:Name="RootElement" Background="{TemplateBinding Background}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <!-- Pivot内容区域：占据上方全部空间 -->
                            <ScrollViewer
                                x:Name="ScrollViewer"
                                Grid.Row="0"
                                HorizontalScrollBarVisibility="Hidden"
                                VerticalScrollBarVisibility="Hidden"
                                ZoomMode="Disabled"
                                Margin="{TemplateBinding Padding}">
                                <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
                                    <PivotHeaderPanel x:Name="HeaderPanel" Visibility="Collapsed"/>
                                    <ItemsPresenter x:Name="PivotItemPresenter">
                                        <ItemsPresenter.RenderTransform>
                                            <TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
                                        </ItemsPresenter.RenderTransform>
                                    </ItemsPresenter>
                                </PivotPanel>
                            </ScrollViewer>
                            <!-- 底部的Header导航栏 -->
                            <Grid
                                x:Name="BottomHeader"
                                Grid.Row="1"
                                Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                                BorderThickness="0,1,0,0"
                                BorderBrush="{ThemeResource SystemControlForegroundBaseLowBrush}">
                                <PivotHeaderPanel x:Name="BottomHeaderPanel">
                                    <PivotHeaderPanel.RenderTransform>
                                        <TranslateTransform x:Name="HeaderTranslateTransform"/>
                                    </PivotHeaderPanel.RenderTransform>
                                </PivotHeaderPanel>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Pivot
        Style="{StaticResource BottomPivotStyle}"
        HeaderTemplate="{StaticResource BottomPivotHeaderItemStyle}">
        <!-- 第一个Pivot项 -->
        <PivotItem>
            <PivotItem.Header>
                <local:NavItemModel IconSymbol="Home" Content="首页"/>
            </PivotItem.Header>
            <Grid Background="White">
                <TextBlock Text="首页内容区域" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </PivotItem>
        <!-- 第二个Pivot项 -->
        <PivotItem>
            <PivotItem.Header>
                <local:NavItemModel IconSymbol="Library" Content="收藏"/>
            </PivotItem.Header>
            <Grid Background="White">
                <TextBlock Text="收藏内容区域" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </PivotItem>
        <!-- 第三个Pivot项 -->
        <PivotItem>
            <PivotItem.Header>
                <local:NavItemModel IconSymbol="Settings" Content="设置"/>
            </PivotItem.Header>
            <Grid Background="White">
                <TextBlock Text="设置内容区域" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </PivotItem>
    </Pivot>
</Page>

3. 补充说明 #

• 上面用到了一个简单的NavItemModel类，用来绑定图标和文字，你需要在代码后台创建这个类：

public class NavItemModel
{
    public Symbol IconSymbol { get; set; }
    public string Content { get; set; }
}

• 如果你不想用代码绑定，也可以直接在PivotItem.Header里写死Icon和Text，比如：

<PivotItem.Header>
    <StackPanel Orientation="Vertical">
        <SymbolIcon Symbol="Home"/>
        <TextBlock Text="首页" Margin="0,4,0,0"/>
    </StackPanel>
</PivotItem.Header>

• 样式里的颜色、高度、动画都可以根据你的需求调整，比如修改SelectedIndicator的颜色，或者HeaderItem的高度，适配不同的设计风格。

这样就能实现和微软页面类似的底部Pivot菜单啦，要是有细节需要微调，直接改对应的样式资源就行～

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