Modification de l'arrière-plan du titre et de l'en-tête dans le contrôle du pivot

Question

Dans mon application Phone 7, j'utilise un contrôle de pivot. Maintenant, j'aimerais changer l'arrière-plan de son titre et de sa zone d'en-tête. Comment puis-je atteindre cet objectif?

Existe-t-il un modèle global pour le contrôle de pivot qui peut être personnalisé?

J'ai déjà essayé de définir l'arrière-plan de la grille contenant le contrôle du pivot sur la couleur de l'en-tête, puis de définir l'arrière-plan de chaque élément pivot sur la couleur d'arrière-plan d'origine. Ça a l'air bien à première vue. Mais lorsque vous essuyez l'élément de pivotement vers la gauche pour afficher le deuxième élément, une zone colorée dans la couleur de l'en-tête apparaît entre les deux éléments de pivot. Donc, cette approche ne fonctionne pas.

En outre, j'ai essayé de personnaliser le modèle du titre et de l'en-tête. Mais ces modèles ne couvrent que la zone du texte elle-même, et non toute la zone de l'en-tête et du modèle.

Answer 1

Voici la variante de modification du modèle de contrôle. Changez l'arrière-plan = "Rouge" à n'importe quel pinceau que vous voulez.

<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

Vous avez raison de dire que les modèles Titre et En-tête ne sont que les zones de texte réelles. Il peut être possible de remplacer le modèle entier du contrôle Pivot, mais un moyen plus simple serait d'ajouter simplement un rectangle de couleur derrière lui.

<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

Vous pouvez modifier le modèle d'en-tête, ce qui est généralement une meilleure option, car vous ne serez pas à vous soucier de positionnement sur mesure et l'alignement:

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

Cela étant dit, vous postulez l'arrière-plan à une grille de redimensionnement automatique - bien sûr, vous pouvez le redimensionner vous-même pour l'ajuster à la bonne taille. La même chose s'applique à chaque PivotItem, si c'est là que vous voulez changer le titre - il suffit de lier ceux-ci à un DataTemplate similaire.