Windows 10 UWP开发:如何实现WP8的Pivot效果

2015-11-04 13:21:57来源:作者:edi.wang人点击

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">

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

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台