第3回 画面は「XAML」で作る（後編）：連載：Windowsストア・アプリ開発入門（6/7 ページ）

[山本康彦（http://www.bluewatersoft.jp/），BluewaterSoft]

重複したスタイル指定をスタイル・リソースにまとめる

　目次の表示はできたが、3つのListViewItemコントロールに全く同じスタイル指定を書いているのが気になる。この重複をなくせないだろうか？

　それには、複数のスタイルを設定したStyleオブジェクト（Windows.UI.Xaml名前空間）をリソースとして別の場所に定義して、ListViewItemコントロールのStyle属性にセットしてやればよい。次のコードのように書ける。

<ListView Background="Transparent" Width="500">
  <ListView.Resources>
    <Style TargetType="ListViewItem" x:Key="IndexItemStyle1">
      <Setter Property="FontSize" Value="30" />
      <Setter Property="Background" Value="#88FFFFFF" />
      <Setter Property="Margin" Value="0,0,0,10" />
      <Setter Property="BorderThickness" Value="15,10" />
    </Style>
  </ListView.Resources>
  <ListViewItem Content="Insider .NET フォーラム"
                Style="{StaticResource IndexItemStyle1}" />
  <ListViewItem Content="NEWS 最新記事一覧"
                Style="{StaticResource IndexItemStyle1}" />
  <ListViewItem Content="お気に入り"
                Style="{StaticResource IndexItemStyle1}" />
</ListView>

ListViewItemコントロールに共通のスタイル・リソースを定義した（XAML）
前述したタイトルのText属性と同様に「XAMLマークアップ拡張」を使ってListViewItemコントロールのStyle属性を設定している。そのキーで識別されるリソースは、このListViewコントロールのResources属性に設定されているStyleオブジェクトである。

　なお、Styleオブジェクトには、キー（＝「x:Key」属性）のほかに、TargetType属性も必須だ。この例の「TargetType="ListViewItem"」は、このスタイル・リソースがListViewItemコントロールに適用されるものであることを示している。

　タイトルのText属性で使ったリソースは別ファイル（「App.xaml」ファイル）に定義されていた。上の例では、同じコントロールの中に定義されている。このように、リソースはいろいろな場所で定義できる。違いは、リソースを利用できるスコープだ。「App.xaml」ファイルに定義したリソースは、アプリ内のどこからでも使える。上の例では、定義したListViewコントロールの中でしか使えない。

アプリの説明を追加する

　目次の下端には、アプリの説明文を追加する（次のコード）。

<Grid>
  ……省略……
  <!-- ここに目次を作り込む -->
  <ListView Background="Transparent" Width="500">
  ……省略……
  </ListView>

  <!-- 説明 -->
  <Border Grid.Row="1" Background="#88FFFFFF" Width="500" Padding="10,5">
    <RichTextBlock FontSize="15">
      <Paragraph FontWeight="Bold">@ITのRSSフィードを読むツールです。</Paragraph>
      <Paragraph>記事タイトルのタイルをタップすると、記事が読めます。
        <LineBreak />記事タイトルの上のセクション・ヘッダをタップすると、そのセクションの記事リストに切り替わります。
        <LineBreak />「お気に入り」に登録するには、記事タイトルのタイルを長押し（右クリック）します。
      </Paragraph>
      <Paragraph FontSize="12" Margin="0,10" TextAlignment="Right">Copyright © 2013 BluewaterSoft
      </Paragraph>
    </RichTextBlock>
  </Border>
</Grid>

アプリの説明文を定義（XAML）
RichTextBlockコントロールには背景色を付けられないので、背景色を付けたBorderコントロールの中に入れた。Borderコントロールの属性「Grid.Row="1"」は、親のGridコントロールの2行目に配置する指定。

　説明文には、上のコードのようにRichTextBlockコントロールを使った。TextBlockコントロールより多彩な表現ができる。

フィード・セクションとお気に入りセクションを作る

　目次セクションと同様にして、フィード・セクションとお気に入りセクションを作っていこう。目次セクションに続く<HubSection>要素は全て削除してしまって、次のコードに置き換える（削除するとき、<Hub>要素の閉じタグまで誤って消してしまわないように注意）。

　目次とは違って、1つのタイルの中に記事のタイトルと日付という2つのものを表示したいので、ListViewItemコントロールのコンテンツとしてStackPanelコントロールを置き、その中に2つのTextBlockコントロールを配置した。

  ……省略（目次セクション）……
  </HubSection>
  <HubSection Padding="0,35,80,68" IsHeaderInteractive="True">
    <HubSection.Header>
      <TextBlock Text="Insider .NET フォーラム"/>
    </HubSection.Header>
    <DataTemplate>
      <ListView Width="500">
        <!-- このListViewItemは、第5回でテンプレートに置き換える -->
        <ListViewItem Background="DodgerBlue"
                      Margin="0,0,0,10" BorderThickness="15,10">
          <StackPanel>
            <TextBlock Foreground="White" FontSize="24" TextWrapping="Wrap">記事タイトルその1 ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・</TextBlock>
            <TextBlock Foreground="White" FontSize="12">20XX/XX/XX</TextBlock>
          </StackPanel>
        </ListViewItem>
        ……省略（複数のListViewItem）……
      </ListView>
    </DataTemplate>
  </HubSection>

  <HubSection Padding="0,35,80,68" IsHeaderInteractive="True" >
    <HubSection.Header>
      <TextBlock Text="NEWS 最新記事一覧"/>
    </HubSection.Header>
    ……省略（2つめのフィード・セクションの<DataTemplate>要素）……
  </HubSection>

  <HubSection Padding="0,35,80,68" IsHeaderInteractive="True" >
    <HubSection.Header>
      <TextBlock Text="お気に入り"/>
    </HubSection.Header>
    ……省略……
        <ListViewItem Background="BlueViolet"
                      Margin="0,0,0,10" BorderThickness="15,10">
    ……省略（背景色が違う以外、フィード・セクションと同じ）……
  </HubSection>
</Hub>

フィード・セクションとお気に入りセクションの定義（XAML）
HubSectionの開始タグで特徴的なのは、目次セクションにはなかった属性「IsHeaderInteractive="True"」だ。この指定があると、HubSection.Headerに指定した要素がタップできる外見（＝右側に「>」印が付く）になる。

　ここでは、スタイル定義だけでなく、コンテンツの定義（StackPanelコントロールとその中のTextBlockコントロール）も重複している。それを解決するには「データ・テンプレート」を使う（第5回で説明予定）。