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节点下,这样你的每一个页面就都能用到这个样式了。
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}">
等等别走,点个赞再走~