ピボットコントロールのタイトルとヘッダーの背景を変更します

Question

私の電話7アプリケーションでは、ピボットコントロールを使用しています。今、タイトルとヘッダ領域の背景を変更したいと思います。どうすればこれを達成できますか？

カスタマイズ可能なピボットコントロールのテンプレート全体がありますか？

ピボットコントロールを含むグリッドの背景をヘッダーカラーに設定し、各ピボットアイテムの背景を元の背景色に設定しようとしました。それは一見すると良く見える。しかし、ピボットアイテムを左に拭いて2番目のアイテムを表示すると、2つのピボットアイテムの間にヘッダーカラーで色付けされた領域が表示されます。そのアプローチは機能していません。

さらに、タイトルとヘッダーアイテムのテンプレートをカスタマイズしようとしました。しかし、これらのテンプレートは、ヘッダーとテンプレート領域全体ではなく、テキスト自体の領域のみをカバーします。

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コントロールのテンプレート全体をオーバーライドすることは可能かもしれませんが、簡単な方法は、色付きの四角形を後ろに追加することです。

言われていること

<controls:Pivot> 
    <controls:Pivot.HeaderTemplate> 
    <DataTemplate> 
     <Grid Background="White"><TextBloc>Your Header Here</TextBlock></Grid> 
    </DataTemplate> 
    </controls:Pivot.HeaderTemplate> 
</controls: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

あなたはカスタムポジショニングとアライメントについて心配する必要はありませんので、通常より良いオプションであるヘッダテンプレートを修正することができます自動サイズ変更グリッドにはもちろん、サイズを変更して適切なサイズに調整することができます。同様のDataTemplateにバインドするだけで、タイトルを変更したい場合は、各PivotItemに同じことが適用されます。