Windows Phone 8.1 ,如何自定义Pivot头部样式?用Pivot控件完成这样的效果。
网上找了好久,只找到了windows phone 8的解决方案。 终于一个大神给支了招,我觉得我有必要跟诸位开发者分享一下经验。Windows Phone 8.1的开发资料实在太少了。我决定,用一个假期把我知道的都分享出来。
如果,你支持我的做法。请点赞或者评论本条博客、或者去 windows phone 应用商店 下载一个叫【有点意思】的app、再或者遥祝大黑兔减肥成功。 大黑兔将非常高兴。有点意思:http://www.windowsphone.com/zh-cn/store/app/%e6%9c%89%e7%82%b9%e6%84%8f%e6%80%9d/f2e705b4-5fd6-4c69-826b-c2f05c825ef0
好了,扯淡结束,开始工作。
1. 在App.xaml里定义自己的Pivot控件样式。下面的代码加在Application.Resources节点下,这样你的每一个页面就都能用到这个样式了。
<Style TargetType="Pivot">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid
x:Name="RootElement"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Background="Red">
<ContentControl x:Name="TitleContentControl"
Style="{StaticResource PivotTitleContentControlStyle}"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"/>
</Border>
<ScrollViewer
x:Name="ScrollViewer"
Margin="{TemplateBinding Padding}"
Grid.Row="1"
HorizontalSnapPointsType="MandatorySingle"
HorizontalSnapPointsAlignment="Center"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Disabled"
VerticalSnapPointsType="None"
VerticalContentAlignment="Stretch"
ZoomMode="Disabled"
Template="{StaticResource ScrollViewerScrollBarlessTemplate}">
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<PivotHeaderPanel x:Name="Header" Background="Red">
<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>
2.在调用Pivot的页面中定义,primitives的namespace,加入以下代码。
xmlns:primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone"
3.在要使用Pivot的页面里,给Pivot指定这个样式:
<Pivot Style="{StaticResource DiaosbookPivotStyle}">
收工,走人~