Windows Phone 8: 如何自定义Pivot头部样式

WP的Pivot控件很牛逼，但想要调整样式没有什么比较直观的方法。许多少年只会改HeaderTemplate，但要做到下面这种效果，HeaderTemplate是不够的。

首先，正确的方法是通过模板的样式来做。比如上面这张图的样式，就需要在App.xaml里定义自己的Pivot控件样式。下面的代码加在Application.Resources节点下，这样你的每一个页面就都能用到这个样式了。

<Style x:Key="DiaosbookPivotStyle" TargetType="phone:Pivot">
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <Grid/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="phone:Pivot">
                        <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
      VerticalAlignment="{TemplateBinding VerticalAlignment}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <Grid Background="#FF2B579A" CacheMode="BitmapCache" Grid.RowSpan="2" />

                            <Grid Background="{TemplateBinding Background}" 
                                  CacheMode="BitmapCache"
                                  Grid.Row="2" />

                            <ContentPresenter Grid.Row="0" 
                                              ContentTemplate="{TemplateBinding TitleTemplate}"
                                              Content="{TemplateBinding Title}"
                                              Margin="17,10,0,7" />

                            <primitives:PivotHeadersControl 
                                x:Name="HeadersListElement"
                                Grid.Row="1" Margin="-3,0,0,13"/>

                            <ItemsPresenter x:Name="PivotItemPresenter"
                                            Margin="{TemplateBinding Padding}" 
                                            Grid.Row="2"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

别忘了把primitives的namespace定义好：

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

代码里面的TitleTemplate对应“diaosbook 阅读器”这一行，也就是Pivot的Title属性。PivotHeadersControl就是各Tab页的位置，里面的模板可以通过Pivot.HeaderTemplate定义。

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

<phone:Pivot Foreground="White" FontSize="28" Margin="0,0,0,10" Style="{StaticResource DiaosbookPivotStyle}">...

这时候你会发现，Tab的字体变得超大，这时候可以通过Pivot.HeaderTemplate设置指定大小的字体：

<phone:Pivot.HeaderTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding}"
       Foreground="White"
       FontSize="56"/>
    </DataTemplate>
</phone:Pivot.HeaderTemplate>

如果你想控制Title的字体，也有办法，就是把Title属性单独拉出来：

<phone:Pivot.Title>
    <TextBlock Text="diaosbook 阅读器" FontSize="22"/>
</phone:Pivot.Title>

至此，你就得到了一个和截图上一样的Pivot控件。

Microsoft MVP for Azure