WP8.1 Windows Phone 8.1開發：何如定義Pivot頭部樣式、定義Pivot頭部顏色

標籤：style   blog   http   io   ar   color   os   使用   sp   

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

收工，走人~

WP8.1 Windows Phone 8.1開發：何如定義Pivot頭部樣式、定義Pivot頭部顏色