WP8.1 Windows Phone 8.1开发：何如定义Pivot头部样式、定义Pivot头部颜色

Windows Phone 8.1 ，如何自定义Pivot头部样式？用Pivot控件完成这样的效果。

                   image

网上找了好久，只找到了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节点下，这样你的每一个页面就都能用到这个样式了。

  1 <Style TargetType="Pivot">
  2 
  3     <Setter Property="Template">
  4 
  5         <Setter.Value>
  6 
  7             <ControlTemplate TargetType="Pivot">
  8 
  9                 <Grid 
 10 
 11                     x:Name="RootElement" 
 12 
 13                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
 14 
 15                     VerticalAlignment="{TemplateBinding VerticalAlignment}"
 16 
 17                     Background="{TemplateBinding Background}">
 18 
 19                     <VisualStateManager.VisualStateGroups>
 20 
 21                         <VisualStateGroup x:Name="Orientation">
 22 
 23                             <VisualState x:Name="Portrait">
 24 
 25                                 <Storyboard>
 26 
 27                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
 28 
 29                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}" />
 30 
 31                                     </ObjectAnimationUsingKeyFrames>
 32 
 33                                 </Storyboard>
 34 
 35                             </VisualState>
 36 
 37                             <VisualState x:Name="Landscape">
 38 
 39                                 <Storyboard>
 40 
 41                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
 42 
 43                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}" />
 44 
 45                                   </ObjectAnimationUsingKeyFrames>
 46 
 47                               </Storyboard>
 48 
 49                           </VisualState>
 50 
 51                       </VisualStateGroup>
 52 
 53                   </VisualStateManager.VisualStateGroups>
 54 
 55                   <Grid.RowDefinitions>
 56 
 57                               <RowDefinition Height="Auto" />
 58 
 59                               <RowDefinition Height="*" />
 60 
 61                           </Grid.RowDefinitions>
 62 
 63                   <Border Background="Red">
 64 
 65                       <ContentControl x:Name="TitleContentControl"
 66 
 67                                       Style="{StaticResource PivotTitleContentControlStyle}"
 68 
 69                                       Content="{TemplateBinding Title}"
 70 
 71                                       ContentTemplate="{TemplateBinding TitleTemplate}"/>
 72 
 73                   </Border>
 74 
 75                   <ScrollViewer
 76 
 77                       x:Name="ScrollViewer"
 78 
 79                       Margin="{TemplateBinding Padding}"
 80 
 81                       Grid.Row="1"
 82 
 83                       HorizontalSnapPointsType="MandatorySingle"
 84 
 85                       HorizontalSnapPointsAlignment="Center"
 86 
 87                       HorizontalScrollBarVisibility="Hidden"
 88 
 89                       VerticalScrollMode="Disabled"
 90 
 91                       VerticalScrollBarVisibility="Disabled"
 92 
 93                       VerticalSnapPointsType="None"
 94 
 95                       VerticalContentAlignment="Stretch"
 96 
 97                       ZoomMode="Disabled"
 98 
 99                       Template="{StaticResource ScrollViewerScrollBarlessTemplate}">
100 
101                       <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
102 
103                           <PivotHeaderPanel x:Name="Header" Background="Red">
104 
105                               <PivotHeaderPanel.RenderTransform>
106 
107                                   <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0" />
108 
109                               </PivotHeaderPanel.RenderTransform>
110 
111                           </PivotHeaderPanel>
112 
113                           <ItemsPresenter x:Name="PivotItemPresenter">
114 
115                               <ItemsPresenter.RenderTransform>
116 
117                                   <TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0" />
118 
119                               </ItemsPresenter.RenderTransform>
120 
121                           </ItemsPresenter>
122 
123                       </PivotPanel>
124 
125                   </ScrollViewer>
126 
127               </Grid>
128 
129           </ControlTemplate>
130 
131       </Setter.Value>
132 
133   </Setter>
134 
135 </Style>

 

2.在调用Pivot的页面中定义，primitives的namespace，加入以下代码。

xmlns:primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone"

 

3.在要使用Pivot的页面里，给Pivot指定这个样式：

<Pivot Style="{StaticResource DiaosbookPivotStyle}">
 
等等别走，点个赞再走~
posted @ 2014-11-26 20:02  大黑兔  阅读(831)  评论(1)  编辑  收藏  举报