如何在 Windows Phone 8 中更改数据透视表头模板

Posted 2023-04-12

【中文标题】如何在 Windows Phone 8 中更改数据透视表头模板

【英文标题】：How to Change Pivot Header Template in Windows Phone 8

【发布时间】：2013-07-27 22:42:14

【问题描述】：

我希望能够在 Windows Phone 8 中更改 Pivot Headers 和 Application Title 的背景。据我所知，我必须创建一个针对 Pivot 控件的自定义样式。但是，我不确定是否只更改标题的背景？

我想以某种方式调整样式

<Style x:Key="MyPivotStyle" TargetType="phone:Pivot">
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="phone:Pivot">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid CacheMode="BitmapCache" Grid.RowSpan="2">
                    <Grid.Background>
                        <ImageBrush ImageSource="/Assets/bg_header.png"/>
                    </Grid.Background>
                </Grid>
                <Grid Background="TemplateBinding Background" CacheMode="BitmapCache" Grid.Row="2" />
                <ContentPresenter ContentTemplate="TemplateBinding TitleTemplate" Margin="24,17,0,-7">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/Assets/company_name.png" Width="213.75" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        <Button HorizontalAlignment="Right" VerticalAlignment="Top" Margin="140,-20,0,35" BorderThickness="0" x:Name="btnHome">
                            <Image Source="/Assets/btnHome.png" Width="48" Height="48" ></Image>
                        </Button>
                    </StackPanel>
                </ContentPresenter>
                <controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement" Foreground="White"  Grid.Row="1"/>
                <ItemsPresenter x:Name="PivotItemPresenter" Margin="TemplateBinding Padding" Grid.Row="2"/>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

【问题讨论】：

我建议this solution from 2012，但看起来 Iris 已经覆盖了它

【参考方案1】：

为 WinRT 编辑（抱歉延迟，感谢提醒更新此答案）： 要编辑完整模板，请在 Document Outline 中右键单击控件并选择 Edit Template - Current (in Visual Studio or Blend)，然后将为您生成模板，您可以根据需要进行编辑，see my answer here for screenshots.

以下是针对 Windows Phone Windows 运行时重做的两个示例（发布于 2013 年）：

<Grid Background="Transparent">
    <Pivot Title="Re-templating example">
        <Pivot.HeaderTemplate>
            <DataTemplate>
                <Grid Background="Blue">
                    <TextBlock Text="Binding" />
                </Grid>
            </DataTemplate>
        </Pivot.HeaderTemplate>
        <Pivot.TitleTemplate>
            <DataTemplate>
                <Grid Background="Green">
                    <TextBlock Text="Binding" />
                </Grid>
            </DataTemplate>
        </Pivot.TitleTemplate>
        <PivotItem Header="One">
            <TextBlock FontSize="35"
                        Text="This is item one" />
        </PivotItem>
        <PivotItem Header="Two">
            <TextBlock FontSize="35"
                        Text="This is item 2" />
        </PivotItem>
    </Pivot>
</Grid>

第二个例子，请注意我们将 ContentPresenter 包装在一个 Grid 中（您也可以使用边框或任何其他元素）：

<Page.Resources>
    <SolidColorBrush x:Key="PivotBackground" Color="#FFE46C08"/>

    <Style x:Key="PivotStyle" TargetType="Pivot">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Pivot">
                    <Grid x:Name="RootElement" HorizontalAlignment="TemplateBinding HorizontalAlignment" VerticalAlignment="TemplateBinding VerticalAlignment">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <!--Notice that ContentControl is wrapped in a Grid and Background set to resource furtehr up-->
                        <Grid VerticalAlignment="Center" Background="StaticResource PivotBackground">
                            <ContentControl x:Name="TitleContentControl" ContentTemplate="TemplateBinding TitleTemplate" Content="TemplateBinding Title" Style="StaticResource PivotTitleContentControlStyle"/>
                        </Grid>
                        <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">
                                <!--Background set to resource further up-->
                                <PivotHeaderPanel Background="StaticResource PivotBackground" x:Name="Header" >
                                    <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>
</Page.Resources>

使用上面的样式：

<Grid Background="Transparent">
    <Pivot Style="StaticResource PivotStyle"
            Title="Re-templating example">
        <PivotItem Header="One">
            <TextBlock FontSize="35" Text="This is item one" />
        </PivotItem>
        <PivotItem Header="Two">
            <TextBlock FontSize="35" Text="This is item 2"/>
        </PivotItem>
    </Pivot>
</Grid>

顺便说一下，通常最好将样式保存在单独的样式文件中——为了简单起见，我只将它们保存在同一页面上。如果删除 x:key 属性，样式将应用于设置目标类型的所有控件（本例中为 Pivot）。

2013 年对 Windows Phone 7.X 和 Windows Phone 8 的回答（WP Silverlight：

有几种方法可以做到这一点，但这里有一个例子：

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>  
    </Grid.RowDefinitions>

    <phone:Pivot Grid.Row="1">
        <phone:Pivot.HeaderTemplate>
            <DataTemplate>
                <Grid Background="Red" Height="200">
                    <TextBlock Text="Binding"/>
                </Grid>
            </DataTemplate>
        </phone:Pivot.HeaderTemplate>
        <phone:PivotItem Header="Test">
            <TextBlock Text="ghjgb"/>
        </phone:PivotItem>
        <phone:PivotItem Header="Test">
            <TextBlock Text="ghjgb"/>
        </phone:PivotItem>
    </phone:Pivot>

如果你想这样做：

您可以这样做，删除 x:key 以应用到所有枢轴，或使用该键为刚刚选定的枢轴元素设置样式，如下所示：

<controls:Pivot Title="The Marathon Runner" Style="StaticResource PivotStyle">
    <Style x:Key="PivotStyle" 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="#ff9000" CacheMode="BitmapCache" Grid.RowSpan="2" />
                        <Grid Background="TemplateBinding Background" CacheMode="BitmapCache"
        Grid.Row="2" />
                        <ContentPresenter ContentTemplate="TemplateBinding TitleTemplate"
                    Content="TemplateBinding Title" Margin="24,17,0,-7"/>
                        <Primitives:PivotHeadersControl x:Name="HeadersListElement"
                                          Grid.Row="1"/>
                        <ItemsPresenter x:Name="PivotItemPresenter"
                  Margin="TemplateBinding Padding" Grid.Row="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

别忘了使用：

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

【讨论】：

我的目标是使透视表头和应用程序标题的整个背景颜色相同，而文本前景保持不变。我认为描述它的最佳方式是上面的所有内容，包括枢轴标题，单一颜色，而每个枢轴项目的背景是另一种颜色。我已经测试了您的方法，但它只会更改每个数据透视表标题的背景。我从 Pivot 添加了一个样式示例，但我不确定如何更改它以调整标题背景？

看看我在帖子中添加的图像和代码，是不是你想要实现的目标？

是的，这就是我想要完成的。尽管您使用的是Controls:Pivot，但我设置了样式，我相信它适用于WP7，而我使用phone:Pivot 用于WP8。这引出了我的下一个问题，我在声明 controlsPrimitives:PivotHeadersControl 上收到错误消息。

这是相同的 xaml，但为了澄清我添加了您需要的命名空间。 phone: 和 Controls: 只是别名，您可以将它们设置为任何您想要的。这只是一种引用命名空间的简短方法。长期阅读：msdn.microsoft.com/en-us/library/aa468565.aspx

优秀。通过一些调整，我确信我可以得到我需要的东西。喜欢粉红色的头发。