Question

在我的Phone 7应用程序中，我正在使用数据透视控件。现在我想改变其标题和标题区域的背景。我怎样才能做到这一点？

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

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

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

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

....

Answer 2

你是对的，标题和标题模板只是实际的文本区域。可能会覆盖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>

Answer 3

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

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

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

在枢轴控制中更改标题和标题的背景

3 个答案: