Изменить фон заголовка и заголовка в сводном управлении

Question

В приложении Phone 7 я использую элемент управления pivot. Теперь я хотел бы изменить фон своего заголовка и области заголовка. Как мне этого добиться?

Существует ли общий шаблон для элемента управления, который можно настроить?

Я уже пытался установить фон сетки, содержащей элемент управления pivot, в цвет заголовка, а затем установить фон каждого элемента сводки в исходный цвет фона. Это выглядит хорошо с первого взгляда. Но когда вы стираете элемент поворота влево, чтобы отобразить второй элемент, область, окрашенная в цвет заголовка, появляется между двумя элементами поворота. Так что этот подход не работает.

Кроме того, я попытался настроить шаблон заголовка и элемента заголовка. Но эти шаблоны охватывают только область самого текста, а не весь заголовок и область шаблона.

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

Вы можете изменить шаблон заголовка, который обычно является лучшим вариантом, так как вам не нужно беспокоиться о пользовательском позиционировании и выравнивании:

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

При этом вы применяете фон кавтоматическое изменение размера сетки - конечно, вы можете изменить его размер самостоятельно, чтобы настроить его до нужного размера.То же самое относится к каждому PivotItem, если вы хотите изменить заголовок - просто привяжите их к аналогичному шаблону данных.

Answer 3

Вы правы, что шаблоны Заголовок и Заголовок являются только фактическими текстовыми областями. Возможно, можно переопределить весь шаблон элемента управления 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>