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

質問
-
いつもお世話になってます。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
- 編集済み NIM5 2016年7月10日 5:50
回答
-
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!)
- 回答としてマーク NIM5 2016年7月10日 13:16
すべての返信
-
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!)
- 回答としてマーク NIM5 2016年7月10日 13:16