WP7開発日記(5) ListBoxで検索結果を表示する

今回は、前回の記事で、楽天のWeb APIから取得した施設情報をListBoxを使って表示するところを紹介します。

SilverlightのListBoxはXAMLの記述だけで、柔軟に表示する項目をカスタマイズできるとても便利な機能を持っています。
現時点でのアプリの画面はこんな感じになっています。



まず、PageのXAMLにListBoxを配置します。

  <ListBox x:Name="resultList" HorizontalAlignment="Stretch" Margin="12,0,12,0" >

そして、コード側で、ObservableCollectionクラスのオブジェクトをインスタンス変数として、
宣言し、ListBoxのItemsSourceに設定します。ObservableCollectionクラスは
リストの項目が追加、削除された時に通知を行なってくれるコレクションで、
これをListBoxにバインドしておけば、後から、要素の追加と削除を行なった際に
それがListBoxに反映されます。

   private ObservableCollection hotelList;

   public MainPage()
   {
      ・・・・・・・・・・・・・・・・・・・・・

      //ListBoxにバインドする
      hotelList = new ObservableCollection<HotelInfo>();
      resultList.ItemsSource = hotelList;
   }

ホテルの情報を管理するエンティティクラスの「HotelInfo」は以下のような項目を持っています。

  public class HotelInfo
  {
      //施設No
      public String HotelNo { get; set; }

      //施設名
      public String HotelName { get; set; }

      //アクセス
      public String Access { get; set; }

      //施設特徴
      public String HotelSpecial { get; set; }
  }

そして、ListBoxのItemTemplateをXAMLで定義します。

  <ListBox x:Name="resultList" HorizontalAlignment="Stretch" Grid.Row="2"
                  Margin="12,0,12,0" SelectionChanged="resultList_SelectionChanged">

     <!-- ListBoxの項目に対して、設定するスタイル -->
     <ListBox.ItemContainerStyle>
          <Style TargetType="ListBoxItem">
              <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
          </Style>
      </ListBox.ItemContainerStyle>

      <ListBox.ItemTemplate>
          <DataTemplate>
              <Border BorderBrush="Black" BorderThickness="0,0,0,1">
                  <StackPanel Orientation="Vertical">
                      <TextBlock TextWrapping="Wrap" FontSize="20" 
                                     Text="{Binding HotelName}" Foreground="Blue"/>
                      <TextBlock TextWrapping="Wrap" FontSize="18" 
                                     Text="{Binding HotelSpecial}" Foreground="Black"/>
                      <Grid>
                          <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="20"/>
                              <ColumnDefinition/>
                          </Grid.ColumnDefinitions>
                          <Image Grid.Column="0" Margin="0,3,0,0" VerticalAlignment="Top" 
                                                   Height="16" Width="16" Source="Images/train.png"/>
                          <TextBlock Grid.Column="1" TextWrapping="Wrap" 
                                         FontSize="16" VerticalAlignment="Top" 
                                         Margin="3,0,0,0" Text="{Binding Access}" Foreground="Black"/>
                      </Grid>
                  </StackPanel>
              </Border>
          </DataTemplate>
      </ListBox.ItemTemplate>
  </ListBox>

まず、最初の重要な部分は、ItemContainerStyleで、項目全体の「HorizontalContentAlignment」を
「Stretch」に設定している部分です。これを記述しておかないと、ItemTemplate内部の要素で、
HorizontalContentAlignmentを設定しても、「Stretch」が反映されず、
項目毎に枠線などを表示する仕様にしていても、枠線が画面の途中で終わってしまったりします。

次に「ItemTemplate」に対して、DataTemplateを設定します。ここで各項目に表示する内容を記述します。
DataTemplate内で、マークアップ拡張「Binding」を使用すると、ListBoxにバインドされているコレクションの
各要素のプロパティを参照することが出来ます。

具体的には、以下のように記述することで、各HotelInfoクラスのインスタンスのHotelNameを参照することが出来ます。

  <TextBlock Text="{Binding HotelName}"/>

ListBoxに限った話では無いのですが、<image>と<TextBlock>を横に並べる際に
Gridを使用しています。通常、StackPanelを水平方向で使用すれば良いのですが、
その場合、TextBlockのTextWrappingに「Wrap(折り返し)」を設定しても、
それが効かなくなります。そのため、Gridを使用して横に並べています。