Panorama Template Jp

  • Article

#wp7dev_jp

panoramaどうしても日本語のタイトルにするとバランスが取れないパノラマ。テンプレートでちょっと修正を入れてみる。

以下のソース２は簡単な修正を入れたパノラマテンプレート。App.xaml の<Application.Resources>に入れて定義。パノラマ側はソース１のようにパノラマにスタイルを適応するだけ。パノラマアイテムは名前なしテンプレートなので自動的に適応されることになる。

とりあえず、タイトルが2文字しか表示できない状況は防げる。ただ、このままでは面白くはないのでやはりタイトルに工夫を入れたい。それはまた次回。

ソース１

        <controls:Panorama Style="{StaticResource PanoramaTemplateJP}" >

ソース２

<Application
    x:Class="PanoramaApp4.App"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:controlsPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls"
    >

   <!--アプリケーション リソース-->
   <Application.Resources>

       <Style x:Key="PanoramaTemplateJP" 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="160"/>
<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="112"
HorizontalAlignment="Left"
Margin="10,-20,0,-9" Grid.Row="0"
FontFamily="Yu Gothic"/>
<controlsPrimitives:PanningLayer
x:Name="ItemsLayer" HorizontalAlignment="Left" Grid.Row="1">
<ItemsPresenter x:Name="items"/>
</controlsPrimitives:PanningLayer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<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="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
HorizontalAlignment="Left"
Margin="10,-2,0,0"
FontFamily="Yu Gothic"
FontSize="64">
<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>

   </Application.Resources>