ListView の概要

[アーティクル]
09/17/2008

更新 : 2007 年 11 月

ListView コントロールは、一連のデータ項目を異なるレイアウトまたはビューで表示するためのインフラストラクチャを提供します。たとえば、データ項目をテーブルで表示し、さらに列の並べ替えも行う場合です。

このトピックには次のセクションが含まれています。

ListView とは
ListView の表示モードの定義
ListView へのデータのバインド
GridView を実装する ListView へのスタイルの設定
同じ表示モードの共有
カスタム表示モードの作成
関連トピック

ListView とは

ListView コントロールは、ListBox から派生した ItemsControl です。通常、その項目はデータコレクションのメンバであり、ListViewItem オブジェクトとして表されます。ListViewItem は ContentControl であり、格納できる子要素は 1 つだけです。ただし、その子要素はどのようなビジュアル要素でもかまいません。

ListView の表示モードの定義

ListView コントロールのコンテンツの表示モードを指定するには、View プロパティを設定します。Windows Presentation Foundation (WPF) に用意されている表示モードの 1 つに GridView があります。このモードでは、カスタマイズ可能な列を持つテーブルにデータ項目のコレクションが表示されます。

従業員情報を表示する ListView コントロールの GridView を定義する方法を次の例に示します。サンプル全体については、「GridView を使用する ListView のサンプル」を参照してください。

<ListView ItemsSource="{Binding Source=
                       {StaticResource EmployeeInfoDataSource}}">

  <ListView.View>

    <GridView AllowsColumnReorder="true"
              ColumnHeaderToolTip="Employee Information">

      <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=FirstName}" 
                      Header="First Name" Width="100"/>

                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=LastName}" 
                      Width="100">
                      <GridViewColumnHeader>Last Name
                          <GridViewColumnHeader.ContextMenu>
                          <ContextMenu  MenuItem.Click="LastNameCM_Click"  
                                        Name="LastNameCM">
                              <MenuItem Header="Ascending" />
                              <MenuItem Header="Descending" />
                          </ContextMenu>
                          </GridViewColumnHeader.ContextMenu>
                      </GridViewColumnHeader>
                  </GridViewColumn>

                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=EmployeeNumber}" 
                      Header="Employee No." Width="100"/>
    </GridView>

  </ListView.View>
</ListView>

次の図は、前の例でデータがどのように表示されるのかを示したものです。

GridView 出力を含む ListView

ViewBase クラスを継承するクラスを定義することで、カスタム表示モードを作成できます。ViewBase クラスは、カスタムビューを作成するために必要なインフラストラクチャを提供します。カスタムビューの作成方法の詳細については、「方法 : ListView のカスタム表示モードを作成する」を参照してください。

ListView へのデータのバインド

Items プロパティと ItemsSource プロパティを使用して、ListView コントロールの項目を指定します。次の例では、ItemsSource プロパティを EmployeeInfoDataSource という名前のデータコレクションに設定します。サンプル全体については、「GridView を使用する ListView のサンプル」を参照してください。

<ListView ItemsSource="{Binding Source=
                       {StaticResource EmployeeInfoDataSource}}">

GridView では、GridViewColumn オブジェクトが指定したデータフィールドにバインドされます。次の例では、DisplayMemberBinding プロパティに Binding を指定することで、GridViewColumn オブジェクトをデータフィールドにバインドします。サンプル全体については、「GridView を使用する ListView のサンプル」を参照してください。

GridViewColumn gvc1 = new GridViewColumn();
gvc1.DisplayMemberBinding = new Binding("FirstName");
gvc1.Header = "FirstName";
gvc1.Width = 100;

<GridViewColumn DisplayMemberBinding=
                    "{Binding Path=FirstName}" 
                Header="First Name" Width="100"/>

また、列のセルにスタイルを設定するために使用する DataTemplate 定義の一部として、Binding を指定することもできます。次の例では、ResourceKey で識別される DataTemplate で、GridViewColumn に Binding を設定します。この例では、DisplayMemberBinding を定義していないことに注意してください。これを定義すると、DataTemplate によって指定されているバインディングがオーバーライドされます。サンプル全体については、「GridView およびテンプレートを使用する ListView のサンプル」を参照してください。

<DataTemplate x:Key="myCellTemplateMonth">
  <DockPanel>
    <TextBlock Foreground="DarkBlue" HorizontalAlignment="Center">
      <TextBlock.Text>
        <Binding Path="Month"/>
      </TextBlock.Text>
    </TextBlock>
  </DockPanel>
</DataTemplate>

<GridViewColumn Header="Month" Width="80"
      HeaderContainerStyle="{StaticResource myHeaderStyle}"
      HeaderTemplate="{StaticResource myHeaderTemplate}"
      DisplayMemberBinding="{Binding Path=Month}"/>

GridView を実装する ListView へのスタイルの設定

ListView コントロールに含まれる ListViewItem オブジェクトは、表示されるデータ項目を表します。次のプロパティを使用して、データ項目のコンテンツとスタイルを定義できます。

ListView コントロールでは、ItemTemplate、ItemTemplateSelector、および ItemContainerStyle プロパティを使用します。
ListViewItem コントロールでは、ContentTemplate および ContentTemplateSelector プロパティを使用します。

GridView におけるセル間の配置の問題を回避するため、ItemContainerStyle を使用して ListView の項目の幅に影響を与えるプロパティやコンテンツを設定または追加しないようにしてください。たとえば、ItemContainerStyle で Margin プロパティを設定すると、配置の問題が発生する可能性があります。GridView 内の項目の幅に影響を与えるプロパティやコンテンツを指定または定義するには、GridView クラスのプロパティ、およびそれに関連するクラス (GridViewColumn など) を使用してください。

GridView およびそのサポートクラスの使用方法について、詳しくは「GridView の概要」を参照してください。

ListView コントロールの ItemContainerStyle を定義し、さらに ItemTemplate も定義する場合、ItemTemplate が正しく動作するには、スタイルに ContentPresenter を含める必要があります。

GridView を使用して表示する ListView のコンテンツには、HorizontalContentAlignment および VerticalContentAlignment プロパティを使用しないでください。GridView の列のコンテンツの配置を指定するには、CellTemplate を定義します。

同じ表示モードの共有

2 つの ListView コントロールが同じ表示モードを同時に共有することはできません。複数の ListView コントロールで同じ表示モードを使用しようとすると、例外が発生します。

複数の ListView で同時に使用できる表示モードを指定するには、テンプレートまたはスタイルを使用します。Resources としてビューを定義する方法の例については、「複数のビューを持つ ListView のサンプル」を参照してください。

カスタム表示モードの作成

GridView のようなカスタマイズされたビューは、ViewBase 抽象クラスから派生します。この抽象クラスは、ListViewItem オブジェクトとして表されるデータ項目を表示するためのツールを提供します。

カスタム表示モードの例については、「複数のビューを持つ ListView のサンプル」を参照してください。

参照

次の方法で共有