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">
背景色绑定到了边框属性上,这代码就有坑了,会误导别人,但这确实是个最偷懒的做法:)
载入了你这个style调用以后,选中ListViewItem左右滑动时有很大几率导致程序闪退...
用了这个样式后,键盘控制左右切换会出现PivotItem Header变多或者变少的情况