DataTemplate-ListBox

DataTemplate?の説明として一番簡単と思われるListBox?を利用して説明していきます。
DataTemplate?の説明なので、XmlDataProvider、Bindingなどの説明は割愛させていただきます。

リストボックスを配置した比較できるプログラム bookmark

まずは、DataTemplate?を利用した場合の比較ができるように、リストボックスを２つ配置したフォームを作成します。
リストボックスのItemsSource?には、modelフィールドをバインドしています。

デザイン時でも、既に上段のリストボックスには、アイテムが表示されています。(リアルですね)
下段のリストボックスは、配置しただけなので、アイテムは表示されていません。これから、DataTemplate?を利用して下段のリストボックスにアイテムが表示されるようにしていきます。

XmlDataProviderのSourceを表示の関係上改行していますが、実際のコードでは改行しないで下さい。

DataTemplate?の実装 bookmark

では、実際にDataTemplate?を実装したXAMLを見てみます。

14-16行目がDataTemplate?の定義部分です。14行目のx:Keyでテンプレートの名前を指定、15行目で実際に表示される内容を指定しています。
ここでは、上段のリストボックスと同じになるように、TextBlock?を用いて、modelフィールドを表示するようにしています。
36行目でリストボックスのアイテムに摘要されるテンプレートを指定しています。ListItemTemplate?は、14行目で定義した名前を指定します。

このように上下のコンボボックスが同じようになりました。この事から、DataTemplate?の定義(14-16行目)を変えれば、表示されるアイテムの外観を変更できるのが分かります。

複数列表示してみる bookmark

上記XAMLの、14-16行目を以下のように変えるだけで、複数列表示が行えます。

と言う事は、アイテム個々の表示の仕方は自由にカスタマイズできると言う事です。（便利！）
じゃぁ、もっと格好良くするとどうなるか・・・

画像や色々な情報を表示する bookmark

DataTemplate?の内容を変更するだけで・・・

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="DataTemplateサンプル" Height="500" Width="410"
    >
  <Window.Resources>
    
    <XmlDataProvider x:Key="CarsData" 
                     Source="http://www.carsensorlab.net/webapi/V1/usedCarSearch/?
                     word=%e8%b5%a4%20%e6%9d%b1%e4%ba%ac%e9%83%bd
                             &summary=0&count=30&sort=31" 
                     XPath="response" />
    
    <DataTemplate x:Key="ListItemTemplate">
      <Border BorderBrush="Black" BorderThickness="2" CornerRadius="5" Margin="3">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="80" />
            <ColumnDefinition Width="180" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
            <RowDefinition Height="30" />
          </Grid.RowDefinitions>
          <Border Background="LightYellow" BorderBrush="Black" BorderThickness="1" 
                  CornerRadius="5" Margin="3" Grid.Column="0" Grid.RowSpan="4">
            <Image Source="{Binding XPath=image_link/size_s}" Stretch="Uniform" 
                   Grid.Column="0" Margin="2,2,2,2" />
          </Border>
          <TextBlock Grid.Row="0" Grid.Column="1">メーカー：</TextBlock>
          <TextBlock Grid.Row="1" Grid.Column="1">車名：</TextBlock>
          <TextBlock Grid.Row="2" Grid.Column="1">ボディタイプ：</TextBlock>
          <TextBlock Grid.Row="3" Grid.Column="1">走行距離：</TextBlock>
          <TextBlock Text="{Binding XPath=maker}" Grid.Row="0" Grid.Column="2" />
          <TextBlock FontSize="16" Foreground="Orange" Text="{Binding XPath=model}" 
                     Grid.Row="1" Grid.Column="2" />
          <TextBlock Text="{Binding XPath=type}" Grid.Row="2" Grid.Column="2"/>
          <TextBlock Text="{Binding XPath=meter}" Grid.Row="3" Grid.Column="2">Km</TextBlock>
          <TextBlock Text="{Binding XPath=description}" Grid.Row="4" 
                     Grid.ColumnSpan="3" TextWrapping="Wrap" />
        </Grid>
      </Border>
    </DataTemplate>
  </Window.Resources>

クリックされた関連URLを表示してみる bookmark

上記のリストボックスを利用して、アイテムがクリックされたら関連するURLを表示するようにしてみます。

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="DataTemplateサンプル" Height="500" Width="600"
    >
  <Window.Resources>
    
    <XmlDataProvider x:Key="CarsData" 
                     Source="http://www.carsensorlab.net/webapi/V1/usedCarSearch/?
                     word=%e8%b5%a4%20%e6%9d%b1%e4%ba%ac%e9%83%bd
                             &summary=0&count=30&sort=31" 
                     XPath="response" />
    
    <DataTemplate x:Key="ListItemTemplate">
      <Border BorderBrush="Black" BorderThickness="2" CornerRadius="5" Margin="3">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="80" />
            <ColumnDefinition Width="180" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
            <RowDefinition Height="30" />
          </Grid.RowDefinitions>
          <Border Background="LightYellow" BorderBrush="Black" BorderThickness="1" 
                  CornerRadius="5" Margin="3" Grid.Column="0" Grid.RowSpan="4">
            <Image Source="{Binding XPath=image_link/size_s}" Stretch="Uniform" 
                   Grid.Column="0" Margin="2,2,2,2" />
          </Border>
          <TextBlock Grid.Row="0" Grid.Column="1">メーカー：</TextBlock>
          <TextBlock Grid.Row="1" Grid.Column="1">車名：</TextBlock>
          <TextBlock Grid.Row="2" Grid.Column="1">ボディタイプ：</TextBlock>
          <TextBlock Grid.Row="3" Grid.Column="1">走行距離：</TextBlock>
          <TextBlock Text="{Binding XPath=maker}" Grid.Row="0" Grid.Column="2" />
          <TextBlock FontSize="16" Foreground="Orange" Text="{Binding XPath=model}" 
                     Grid.Row="1" Grid.Column="2" />
          <TextBlock Text="{Binding XPath=type}" Grid.Row="2" Grid.Column="2"/>
          <TextBlock Text="{Binding XPath=meter}" Grid.Row="3" Grid.Column="2">Km</TextBlock>
          <TextBlock Text="{Binding XPath=description}" Grid.Row="4" 
                     Grid.ColumnSpan="3" TextWrapping="Wrap" />
        </Grid>
      </Border>
    </DataTemplate>
  </Window.Resources>

58行目のIsSynchronizedWithCurrentItem?="True"は、選択されたアイテムとの同期を取る為で、これが無ければ、リストボックスのアイテムが選択されても、関連URL(linkフィールド)は表示されません。

DataTemplate-ListBox