在枢轴控件中更改标题和标题的背景答案

【问题标题】：Change background of title and header in pivot control在枢轴控件中更改标题和标题的背景
【发布时间】：2010-11-22 11:43:59
【问题描述】：

在我的 Phone 7 应用程序中，我使用了枢轴控件。现在我想改变它的标题和标题区域的背景。我怎样才能做到这一点？

是否有可以自定义的枢轴控件的整体模板？

我已经尝试将包含枢轴控件的网格的背景设置为标题颜色，然后将每个枢轴项的背景设置为原始背景颜色。第一眼看起来不错。但是，当您将枢轴项目向左擦除以显示第二个项目时，会在两个枢轴项目之间出现一个以标题颜色着色的区域。所以这种方法行不通。

此外，我还尝试自定义标题和标题项的模板。但是这些模板只覆盖文本本身的区域，而不是整个页眉和模板区域。

【问题讨论】：

标签： silverlight windows-phone-7

【解决方案1】：

这是更改控件模板的变体。将 Background="Red" 更改为您想要的任何画笔。

<Style x:Key="PivotStyle1" TargetType="controls: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="controls:Pivot">
        <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
              VerticalAlignment="{TemplateBinding VerticalAlignment}">
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
          </Grid.RowDefinitions>
          <Grid Background="Red" 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"/>
          <controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement"
                                                  Grid.Row="1"/>
          <ItemsPresenter x:Name="PivotItemPresenter"
                          Margin="{TemplateBinding Padding}" Grid.Row="2"/>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

....

<controls:Pivot Title="MY APPLICATION" Style="{StaticResource PivotStyle1}">

....

【讨论】：

非常感谢，这正是我想要的。
@Ostemar 我知道这是一篇旧帖子，但您知道单独设置每个标题项目的样式吗？例如;我想为每个标题项设置不同的图像。

【解决方案2】：

Title 和 Header 模板只是实际的文本区域，这是对的。可能可以覆盖 Pivot 控件的整个模板，但更简单的方法是在其后面添加一个彩色矩形。

<Grid x:Name="LayoutRoot" Background="Transparent">
  <Rectangle 
    VerticalAlignment="Top" HorizontalAlignment="Stretch" 
    Height="150" Fill="Red" />
  <controls:Pivot Title="MY APPLICATION">
    <controls:PivotItem Header="item1">
        <Grid/>
    </controls:PivotItem>
    <controls:PivotItem Header="item2">
        <Grid/>
    </controls:PivotItem>
  </controls:Pivot>
</Grid>

【讨论】：

我今天也有同样的想法，并且成功了。但是，是否可以保证标题和标题的总高度始终为 150 像素（或者在我的情况下为 131）？
只要您的页面绑定到一个方向，就可以保证。如果没有，那么一旦用户旋转手机，该区域的宽度就会改变。
不，150 刚刚从空中取出。但如果你也支持横向，它也可以工作，因为轴标题+标题区域的高度在纵向和横向中似乎是相同的。
@Dennis - 宽度与它无关，因为我使用 HorizontalAlignment="Stretch"。唯一的问题是高度，纵向和横向都保持不变。

【解决方案3】：

您可以修改标题模板，这通常是更好的选择，因为您不必担心自定义定位和对齐：

<controls:Pivot>
  <controls:Pivot.HeaderTemplate>
    <DataTemplate>
       <Grid Background="White"><TextBloc>Your Header Here</TextBlock></Grid>
    </DataTemplate>
  </controls:Pivot.HeaderTemplate>
</controls:Pivot>

话虽如此，您正在将背景应用于自动调整大小的网格 - 当然，您可以自行调整其大小以将其调整为合适的大小。这同样适用于每个 PivotItem，如果您想更改标题 - 只需将它们绑定到类似的 DataTemplate。

【讨论】：

不，这根本行不通。正如我在我的问题中所写，标题模板仅涵盖文本，既不包括标题，也不包括标题和标题文本周围的区域。此外，您的代码示例还缺少标题文本的占位符。您的代码的最终结果是标题完全消失了。
已编辑 - 您只需要一个 TextBlock 即可。如果您确实需要，您可以通过进入 Expression Blend 并获取控件的原始模板来自定义基本模板。根据您的需要对其进行修改，然后在您的应用程序中将其用作自定义 DataTemplate。