首页 > 代码库 > WP8.1 Windows Phone 8.1开发:何如定义Pivot头部样式、定义Pivot头部颜色

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节点下,这样你的每一个页面就都能用到这个样式了。

<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="http://www.mamicode.com/{ThemeResource PivotPortraitThemePadding}" />

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Landscape">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="http://www.mamicode.com/{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}">
 
收工,走人~

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