Windows Phone 8.1 Pivot 自定义标题样式

Question

我的目标是模仿此处所见的类似效果：http://www.visuallylocated.com/post/2012/05/23/Changing-the-background-color-of-your-pivot-headers.aspx。 网上有资源描述如何做到这一点，但都适用于 Windows Phone 8。8.1 更新带来了严重的 API 更改，使代码无用。

那么，如何设置数据透视表头的样式？我找到了命名空间Windows.UI.Xaml.Controls.Primitives，其中包括类 PivotHeaderPanel，这在这种情况下可能会有所帮助，但我找不到从 XAML 访问此类的方法。 或者也许还有其他方法？

Answer 1

如果您只想更改所有标题的背景颜色，这就是您可以在 Window Phone 8.1 中执行的操作。

首先，使用 Expression Blend 生成Pivot 控件的默认样式。

<Thickness x:Key="PivotPortraitThemePadding">19,38,0,0</Thickness>
<Thickness x:Key="PivotLandscapeThemePadding">19,25,0,0</Thickness>
<Style x:Key="CustomPivotStyle" TargetType="Pivot">
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <Grid/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Pivot">
                <Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="Orientation">
                            <VisualState x:Name="Portrait">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Landscape">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
                    <ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
                        <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
                            <PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">
                                <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>

在下面找到这一行，我对默认样式所做的唯一更改是将Background="{TemplateBinding BorderBrush}" 添加到PivotHeaderPanel，这是托管所有标题的面板。

<PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">

我在这里使用TemplateBinding 的原因是因为这样做可以让我灵活地通过指定BorderBush 的Pivot 来更改标题背景。由于BorderBrush并没有在控件的任何地方使用，所以如果我们改变它不会有任何副作用。

所以，您在Pivot 中需要做的就是这个。

<Pivot x:Uid="Pivot" Title="MY APPLICATION" x:Name="pivot" CommonNavigationTransitionInfo.IsStaggerElement="True" Style="{StaticResource CustomPivotStyle}" BorderBrush="{StaticResource PhoneAccentBrush}">

这就是他们现在的样子。

希望这会有所帮助！

Answer 2

所以 8.1 杀死了我以前做 HeaderTemplates 的方式。

我现在的解决方案是在 PivotItem 的 Header 元素中放置一个自定义的 TextBlock 或 Control。

---

<Pivot>

    <PivotItem>
        <PivotItem.Header>
            <Grid Background="Red">
                <TextBlock Text="WHY DID YOU DO THIS MICROSOFT"/>
            </Grid>
        </PivotItem.Header>
    </PivotItem>
    ...
</Pivot>