ListView - Windows Presentation Foundation Station

ListView

DataTemplate?の説明というよりは、ListViewの表示方法の説明になります。
DataTemplate?の説明は、簡単ですが、ListBoxを参考にして頂ければ、ListViewにも応用できます。

基本的なリストビューを表示するプログラム bookmark

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ListViewサンプル" Height="300" Width="580"
    >

<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" />
  </Window.Resources>

<Grid>
    <ListView Name="lstView" ItemsSource="{Binding Source={StaticResource CarsData}, XPath=used_car}" >
      <ListView.View>
        <GridView>
          <GridViewColumn Header="メーカー"
                          DisplayMemberBinding="{Binding XPath=maker}" />
          <GridViewColumn Header="車名"
                          DisplayMemberBinding="{Binding XPath=model}" />
          <GridViewColumn Header="走行距離"
                          DisplayMemberBinding="{Binding XPath=meter}" />
          <GridViewColumn Header="詳細"
                          DisplayMemberBinding="{Binding XPath=description}" />
        </GridView>
      </ListView.View>
    </ListView>
  </Grid>
</Window>

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

基本的なリストビューを表示した画面

このようにGridViewColumn?を設定することにより、簡単にリストビューにデータを表示することができます。
列の移動も制御することなく行えます。

DataTemplate?を利用して列をカスタマイズ bookmark

<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="300" Width="400"
    >
  <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="myHeaderTemplate">
      <StackPanel Margin="0,0,0,0" >
        <TextBlock FontSize="16" Foreground="DarkBlue" Text="{Binding}" />
      </StackPanel>
    </DataTemplate>

<DataTemplate x:Key="myItemTemplate1">
      <Border Width="100" Height="50" BorderBrush="Black" BorderThickness="2" CornerRadius="5" Margin="3">
        <TextBlock Text="{Binding XPath=maker}" FontSize="16" VerticalAlignment="Center" 
                                                  HorizontalAlignment="Center" Foreground="Orange"/>
      </Border>
    </DataTemplate>

<DataTemplate x:Key="myItemTemplate2">
      <Border Width="100" Height="50" BorderBrush="Gray" BorderThickness="2" CornerRadius="5" Margin="3">
        <Image Source="{Binding XPath=image_link/size_s}" Stretch="Uniform" ></Image>
      </Border>
    </DataTemplate>
  </Window.Resources>

<Grid>
    <ListView ItemsSource="{Binding Source={StaticResource CarsData}, XPath=used_car}" >
      <ListView.View>
        <GridView>
          <GridViewColumn Header="メーカー"
                          HeaderTemplate="{StaticResource myHeaderTemplate}"
                          CellTemplate="{StaticResource myItemTemplate1}"/>
          <GridViewColumn Header="車名"
                          DisplayMemberBinding="{Binding XPath=model}" />
          <GridViewColumn Header="走行距離"
                          DisplayMemberBinding="{Binding XPath=meter}" />
          <GridViewColumn Header="画像"
                          CellTemplate="{StaticResource myItemTemplate2}"/>
        </GridView>
      </ListView.View>
    </ListView>
  </Grid>
</Window>

14-31行目がDataTemplate?の定義部分です。14-18行ではListViewのヘッダー部分のテンプレート、20-25、27-31行では、ListViewのアイテム部分のテンプレート。
これらのテンプレートを、38-46行の列定義部分でHeaderTemplate?、CellTemplate?として利用することにより、カスタマイズされた列を表示しています。

DataTemplateを利用して列をカスタマイズした画面

トップページ

はじめに bookmark

実行環境準備
- 実行環境準備200606
XAML
- XAMLとは？
- XAMLPadを使ってみよう
Microsoft Expression
- Expressionとは？
- 使ってみる
- Binding
- RSSリーダを作る

サンプル bookmark

サンプル解説
- 基本
MS提供サンプル
- SDK付属サンプル
- Web公開サンプル

InkCanvas?
- 一番簡単な例
- 操作機能の実装
- ストロークの保存・読込
- BMPで保存
- 文字認識
- 図形認識

Animation

Effects

DataBinding?
- 概要
- DataContextとBinding?
- ObservableCollection
- DataTemplate?
  - 概要
  - ListBox
  - ListView
  - TreeView?
- HierarchicalDataTemplate?
- ObjectDataProvider?
  - ConstructorParameters
  - MethodParameters?
- XmlDataProvider
- CollectionView?

音声合成(Synthesis)
- 概要
- 基本
- 応用１
- 応用２

音声認識(Recognition)
- 概要
- 基本
- SpeechRecognizer?
  - SpeechUI
- SpeechRecognitionEngine
  - Recognize
  - SetInputToWaveFile?
- Grammar(文法)
  - Choices
  - SemanticResultKey?
- SRGS
  - SrgsGrammar?
- 応用１
- 応用２

Northwindを利用して

Resources
- 概要

XPS
- 概要

TIPS bookmark

ValidationRule?
IValueConverter?

リンク bookmark

Visual Developer - Visual Basic
Apr 2005-Mar 2008