表示ページ（簡易縦書き表示）の実装

表示ページ（簡易縦書き表示）の実装

最後に、表示ページを作成します。

このページは、メインページで選択された季節の俳句が一句でも記録されていた場合、入力ページにある「一覧」ボタンがタップされた時に、表示します。その際、入力ページから英語季節名が渡されるので、「英語季節名.xml」のデータを表示します。

このページの処理のポイントは、スクリーンの右から左へと表示する簡易縦書き表示です。コンテンツが一画面を超える場合の左右フリックによる表示を実現するために、Panoramaコントロールを使います。ソリューションエクスプローラーのプロジェクト名を右クリックして表示される「追加/新しい項目」でPanorama Pageを追加してください。名前は、haikuShow.xamlとします（図16）。

表示ページのデザイン(xaml）

まず、MainPage.xaml同様、LayoutRootのGridのBackgroundに” #FFFFFFFA”を指定します。

図17のように、計算した座標値を格納しておくためのTextBlock コントロールを1個配置します、その前面にPanorama コントロールを配置し、その中にCanvas コントロールを1個、配置します。

ページ送り用のButtonを3個配置し、名前を付けます。「forwardButton」は1つ前の句を表示し、「backButton」は次の句を表示し、「headButton」は1句目を表示します。これらのボタンには画像を貼り、先の入力ページの「一覧」ボタン同様、App.xamlの中にスタイルを追加します。

このアプリでは、俳句の数によって、表示に必要な領域の幅が変わります。また、画面の左上隅から表示領域の左上隅までの距離も変わります。登録された句が増えるほど、表示領域の幅は広くなり、画面の左上隅からの距離も長くなります。

そこで、表示領域の幅を計算してCanvas コントロールに適用し、これをその祖先であるPanorama コントロールの Width プロパティに一方向でバインドすることにより、Panoramaの幅を変えます。

また、画面の左上隅原点からコンテンツの左上隅までの左マージンを算出してTextBlock に格納し、この値を Panorama コントロールの Marginプロパティに一方向でバインドします。

図17のようにレイアウトした各コントロールのプロパティを調整し、完成したデザイン・コードは、リスト7になります。

リスト7　表示ページのデザイン・コード（haikuShow.xaml）

<phone:PhoneApplicationPage 
  x:Class="DailyHaiku.haikuShow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="Portrait"  Orientation="Portrait"
  shell:SystemTray.IsVisible="False" Language="ja-JP" IsEnabled="True">
 
  <!--LayoutRoot contains the root grid where all other page content is placed-->
  <Grid x:Name="LayoutRoot" Background="#FFFFFFFA">
  
    <Image Height="80" HorizontalAlignment="Left" Margin="15,670,0,0" Name="createHaikuPage" Stretch="Fill" VerticalAlignment="Top" Width="80" Source="/DailyHaiku;component/Image/CreateButton.png" />
    <Button Height="80" Style="{StaticResource BackButtonStyle}"  HorizontalAlignment="Left" Margin="110,670,0,0" Name="backButton" VerticalAlignment="Top" Width="80" IsEnabled="False" />
    <Button Style="{StaticResource HeadButtonStyle}"  Height="80" HorizontalAlignment="Left" Margin="200,670,0,00" Name="headButton" VerticalAlignment="Top" Width="80" IsEnabled="False" />
    <Button Style="{StaticResource ForwardButtonStyle}"  Height="80" HorizontalAlignment="Left" Margin="290,670,0,00" Name="forwardButton" VerticalAlignment="Top" Width="80" IsEnabled="False" />
    <Image Height="80" HorizontalAlignment="Left" Margin="385,670,0,0" Name="toMainPage" Stretch="Fill" VerticalAlignment="Top" Width="80" Source="/DailyHaiku;component/Image/toMainPageButton.png" />
  
    <TextBlock Height="20" Name="TextBlock1" />
    <controls:Panorama Name="Panorama1" Height="660" VerticalAlignment="Top" Width="{Binding Path=Width, Mode=OneWay, ElementName=Canvas1}" Margin="{Binding Path=Margin, Mode=OneWay, ElementName=TextBlock1}">
      <controls:PanoramaItem>
        <Grid>
          <Canvas Name="Canvas1" Margin="0,0,0,0"></Canvas>
        </Grid>
      </controls:PanoramaItem>
    </controls:Panorama>
  
  </Grid>
</phone:PhoneApplicationPage>

このページでレイアウトしたButtonコントロールには、前掲の図12の手順に従って、スタイルを指定してください。App.xamlのコード内の要素の子としてリスト8のように、