ListView の概要

[アーティクル]
08/09/2011

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 を定義する方法を次の例に示します。


<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 という名前のデータコレクションに設定します。

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

GridView では、GridViewColumn オブジェクトが指定したデータフィールドにバインドされます。次の例では、DisplayMemberBinding プロパティに Binding を指定することで、GridViewColumn オブジェクトをデータフィールドにバインドします。

Dim gvc1 As New GridViewColumn()
gvc1.DisplayMemberBinding = New Binding("FirstName")
gvc1.Header = "FirstName"
gvc1.Width = 100

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 によって指定されているバインディングがオーバーライドされます。

<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"
      CellTemplate="{StaticResource myCellTemplateMonth}"/>

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 を定義します。