連載
» 2013年10月11日 14時55分 公開

連載:Windowsストア・アプリ開発入門:第3回 画面は「XAML」で作る(後編) (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回で説明予定)。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。