UWP的Pivot控件动画效果和以前Windows 8, Windows Phone 8的Pivot不一样,在切换PivotItem的时候,当前选择的Item的Header并不会跑到第一个去,而是单纯的像Tab选项卡那样高亮当前的Tab而已。

我个人喜欢Windows 8的Pivot,即下面这个GIF这样的(这是我正在开发的一个UWP应用)。如果你也喜欢传统风格的Pivot,可以参考以下方法。

实现方法特别简单,只要拿Blend从WP8.1 Runtime的Pivot里把默认样式导出来,稍微改下就行:

<Style x:Key="Windows8PivotStyle" TargetType="Pivot">
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Foreground" Value="{ThemeResource PivotForegroundThemeBrush}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <Grid/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Pivot">
                <Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="Orientation">
                            <VisualState x:Name="Portrait">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Landscape">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
                    <ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
                        <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
                            <PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">
                                <PivotHeaderPanel.RenderTransform>
                                    <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
                                </PivotHeaderPanel.RenderTransform>
                            </PivotHeaderPanel>
                            <ItemsPresenter x:Name="PivotItemPresenter">
                                <ItemsPresenter.RenderTransform>
                                    <TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
                                </ItemsPresenter.RenderTransform>
                            </ItemsPresenter>
                        </PivotPanel>
                    </ScrollViewer>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

把这个style塞在App.xaml的Resources下面就可以全局使用了。

我改了这么几个地方:

一个是所有的PhoneOOXXBrush,我都换成了对应的UWP的Bursh比如PivotForegroundThemeBrush不然运行时候直接爆炸。

另一个是

<PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">

给Background绑定了一个BorderBrush,这是为了偷懒给Pivot的Header部分整个加个背景色。

所以调用的时候就可以这样:

<Pivot Style="{StaticResource Windows8PivotStyle}" BorderBrush="#222222">

背景色绑定到了边框属性上,这代码就有坑了,会误导别人,但这确实是个最偷懒的做法:)