Panorama を個人的に治してみる

  • Article

#wp7dev_jp

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

normal1Normal2

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

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

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

fixedfixed2

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

実装方法

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

<phone:PhoneApplicationPage.Resources>
<Style TargetType="controls:Panorama">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <controlsPrimitives:PanoramaPanel x:Name="panel"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:Panorama">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <controlsPrimitives:PanningBackgroundLayer x:Name="BackgroundLayer" HorizontalAlignment="Left" Grid.RowSpan="2">
                        <Border x:Name="background" Background="{TemplateBinding Background}" CacheMode="BitmapCache"/>
                    </controlsPrimitives:PanningBackgroundLayer>
                    <controlsPrimitives:PanningTitleLayer x:Name="TitleLayer" CacheMode="BitmapCache" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" FontSize="108" FontFamily="{StaticResource PhoneFontFamilyLight}" HorizontalAlignment="Left" Margin="10,-6,0,9" Grid.Row="0"/>
                    <controlsPrimitives:PanningLayer x:Name="ItemsLayer" HorizontalAlignment="Left" Grid.Row="1">
                        <ItemsPresenter x:Name="items"/>
                    </controlsPrimitives:PanningLayer>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<DataTemplate x:Key="DataTemplate1" >
    <Grid>
        <TextBlock TextWrapping="Wrap" Text="{Binding}" d:LayoutOverrides="Width, Height" FontSize="52"/>
    </Grid>
</DataTemplate>
<Style TargetType="controls:PanoramaItem">
    <Setter Property="CacheMode" Value="BitmapCache"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:PanoramaItem">
                <Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <ContentControl x:Name="header" ContentTemplate="{StaticResource DataTemplate1}" Content="{TemplateBinding Header}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" Margin="10,-2,0,26">
                        <ContentControl.RenderTransform>
                            <TranslateTransform x:Name="headerTransform"/>
                        </ContentControl.RenderTransform>
                    </ContentControl>
                    <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
</phone:PhoneApplicationPage.Resources>

次は、Pivot かな。