Pivotコントロールのヘッダー外観をカスタマイズしたい

Question

いつもお世話になってます。Pivotコントロールのヘッダー部分の外観をカスタマイズする方法で教えて下さい。 

Pivot.HeaderTemplateで、Borderで囲ったTextを表示するように設定しています。

<Pivot x:Name="CustomPivot" Style="{StaticResource CustomPivotStyle}">
         <Pivot.Resources>
                 <Style TargetType="PivotHeaderItem" BasedOn="{StaticResource CustomPivotHeaderItemStyle}"/>
                 <DataTemplate x:Key="PivotHeaderTemplate">
                         <Border x:Name="HeaderBorder" BorderBrush="#FFFF5A5F" BorderThickness="0,0,0,2" Margin="5,0,5,6" Padding="5,0">
                                 <TextBlock x:Name="HeaderText" Text="{Binding}" FontSize="22" FontFamily="Yu Gothic Medium"/>
                         </Border>
                 </DataTemplate>
         </Pivot.Resources>
         <Pivot.HeaderTemplate>
                 <StaticResource ResourceKey="PivotHeaderTemplate"/>
         </Pivot.HeaderTemplate>
 </Pivot>

 

このTemplate内の各コントロールのプロパティを、選択状態によって切り替えるため、PivotHeaderItem のデフォルトスタイルをVisualStateManagerでカスタマイズしています。

 

（参考）Pivotのヘッダーをカスタマイズする

http://qiita.com/shigezo/items/0b9bab3c57071b1b3b15

 

たとえば、選択中の文字の色を変える場合は、下記のような記述で実現できました。

<VisualState x:Name="Selected">
         <VisualState.Setters>
                 <Setter Target="ContentPresenter.Foreground" Value="#FFFF5A5F"/>
         </VisualState.Setters>
 </VisualState>

ここで、自分で設定したHeaderTemplate内のPivotHeaderTemplateや、HeaderBorderのプロパティを変えようと下記のような書き方をしたもの、Exceptionで止まってしまいました。

<Setter Target="HeaderText.(TextBlock.FontSize)" Value="60"/>

（例外の内容）"The target object with name 'HeaderText' could not be resolved for a Setter."

 

 

自分で設定したHeaderTemplateを、選択状態のStateに合わせて変更するにはどのように設定すればよろしいでしょうか。よろしくお願いいたします。

（参考）PivotHeaderItemのデフォルトスタイル
https://msdn.microsoft.com/ja-jp/library/windows/apps/mt299142.aspx

Answer 1

PivotHeaderItemのテンプレートから、その中で表示されるHeaderTemplate(DataTemplate)が見えるわけでは無いので設定はできません。

Stateによって変更されるだけで後からHeaderTemplateによる変更をしないのであれば、PivotHeaderItemのVisualStateでDataTemplateを入れ替えてやるとできます。

<VisualState x:Name="Selected">
    <VisualState.Setters>
        <Setter Target="ContentPresenter.Foreground" Value="Green"/>
        <Setter Target="ContentPresenter.(TextElement.FontSize)" Value="20"/>

        <Setter Target="ContentPresenter.ContentTemplate" >
            <Setter.Value>
                <DataTemplate>
                    <Border x:Name="HeaderBorder" BorderBrush="#FFFF5A5F" BorderThickness="0,0,0,2" Margin="5,0,5,6" Padding="5,0">
                        <TextBlock x:Name="HeaderText" Text="{Binding}" >
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="-90" />
                            </TextBlock.RenderTransform>
                        </TextBlock>
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </VisualState.Setters>
</VisualState>
                        

---

個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

Answer 2

gekkaさん、早速のご返信ありがとうございました。

なるほど、丸ごと置き換えてしまうということですね。それなら何でもできますね。

試してみたところ、どのStateでもやりたい放題ですね（笑）

ちょっとStyleのコード量が多くなりますが、こちらの方法で対応したいと思います。

ありがとうございました。