Pivot も個人的に修正してみる

  • Article

#wp7dev_jp

やっぱり、標準のPivotページは文字サイズが大きい気がする。

pivotnormal

たぶん、英語と同じフォントサイズを使っているからかと。なので、自分で実装する際は、

英語フォントサイズ ｘ 0.75~0.8 ＝ 日本語フォントサイズ

でよく縮小している。尚、これは私の個人的な趣味と主観によるもの。そうやって作り直したPanoramaがこちら。

PivotFixed

この修正のソースコードは以下の通り。仰々しいがテンプレートは全部定義なのでどうしてもこうなってしまう。実際にタイトルと、Headerのフォントサイズを調整しているのは以下のピンクの部分だけ。

実装方法

以下のコードは名前なしTemplateになっているので、PhoneApplicationPage の Resource に定義（コピペ）するだけでOK。興味があったら一度試してみてください。

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="PivotHeaderItemStyle1" TargetType="controlsPrimitives:PivotHeaderItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Padding" Value="21,0,1,0"/>
        <Setter Property="CacheMode" Value="BitmapCache"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controlsPrimitives:PivotHeaderItem">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity=".4"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style 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="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.RowSpan="3"/>
                        <ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
                        <controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1"  ItemContainerStyle="{StaticResource PivotHeaderItemStyle1}" FontSize="53.333"/>
                        <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>