次の方法で共有

GridView の概要

  • [アーティクル]

GridView 表示モードは、ListView コントロールの表示モードの 1 つです。 GridView クラスおよびそのサポート クラスを使用すると、一般的にボタンを対話型列ヘッダーとして使用するテーブルに項目コレクションを表示することができます。 ここでは、GridView クラスについて説明し、その使用方法を示します。

このトピックは、次のセクションで構成されています。

  • GridView ビューとは
  • GridView レイアウトおよびスタイル
  • GridView でのユーザーの操作
  • その他のカスタム ビューの取得
  • GridView のサポート クラス
  • 関連トピック

GridView ビューとは

GridView 表示モードでは、データ フィールドを列にバインドし、列ヘッダーを表示してフィールドを識別することによって、データ項目のリストを表示します。 既定の GridView スタイルは、列ヘッダーとしてボタンを実装します。 列ヘッダーにボタンを使用すると、重要なユーザー操作機能を実装できます。たとえば、ユーザーは列ヘッダーをクリックして、特定の列のコンテンツに従って GridView データを並べ替えることができます。

メモメモ

GridView で列ヘッダーに使用されるボタン コントロールは、ButtonBase から派生します。

ListView コンテンツの GridView ビューを次の図に示します。

ListView コンテンツの GridView ビュー

スタイル設定された ListView

GridView の列は GridViewColumn オブジェクトによって表されます。このオブジェクトのサイズは、コンテンツのサイズに自動的に設定されます。 必要に応じて、GridViewColumn を特定の幅に明示的に設定できます。 列ヘッダー間のグリッパーをドラッグすることによって、列のサイズを変更できます。 また、列の追加、削除、置換、および並べ替え機能が GridView に組み込まれているため、この機能を動的に実行することができます。 ただし、GridView では、表示されるデータを直接更新することはできません。

従業員データを表示する GridView を定義する方法を次の例に示します。 この例では、ListView で EmployeeInfoDataSource が ItemsSource として定義されています。 DisplayMemberBinding のプロパティ定義によって、GridViewColumn のコンテンツが EmployeeInfoDataSource データ カテゴリにバインドされます。


<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>

前述の例で作成したテーブルを次の図に示します。

ItemsSource のデータを表示する GridView

GridView 出力を含む ListView

GridView レイアウトおよびスタイル

GridViewColumn の列のセルおよび列ヘッダーの幅は同じです。 既定では、各列の幅は、そのコンテンツに合わせて設定されます。 必要に応じて、列を固定幅に設定できます。

関連するデータ コンテンツは、水平行に表示されます。 たとえば、前の図では、各従業員の氏名および ID 番号が水平行に示されているため、これらが 1 つのセットとして表示されています。

GridView の列の定義およびスタイル設定

GridViewColumn に表示するデータ フィールドを定義する場合は、DisplayMemberBinding、CellTemplate、または CellTemplateSelector プロパティを使用します。 DisplayMemberBinding プロパティは、他の 2 つのテンプレート プロパティよりも優先されます。

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

列ヘッダーのテンプレート プロパティとスタイル プロパティを指定するには、GridView、GridViewColumn、および GridViewColumnHeader クラスを使用します。 詳細については、「GridView の列ヘッダー スタイルおｙびテンプレートの概要」を参照してください。

GridView へのビジュアル要素の追加

CheckBox コントロールや Button コントロールなどのビジュアル要素を GridView 表示モードに追加するには、テンプレートまたはスタイルを使用します。

ビジュアル要素をデータ項目として明示的に定義した場合、その要素は GridView に一度しか表示できません。 この制限は、要素は親を 1 つしか持つことができず、ビジュアル ツリーに一度しか表示されないために適用されます。

GridView の行のスタイル設定

GridViewRowPresenter および GridViewHeaderRowPresenter クラスを使用して、GridView の行を書式設定して表示します。 GridView 表示モードの行のスタイルを設定する方法の例については、「方法 : GridView を実装する ListView で行のスタイルを設定する」を参照してください。

ItemContainerStyle を使用する際の配置の問題

列ヘッダーとセル間の配置の問題を回避するため、ItemContainerStyle の項目の幅に影響を与えるプロパティを設定したりテンプレートを指定したりしないようにしてください。 たとえば、Margin プロパティを設定したり、ListView コントロールで定義されている ItemContainerStyle に CheckBox を追加する ControlTemplate を指定したりしないでください。 代わりに、列の幅に影響を与えるプロパティおよびテンプレートを、GridView 表示モードを定義するクラスで直接指定してください。

たとえば、CheckBox を GridView 表示モードの行に追加するには、CheckBox を DataTemplate に追加して、CellTemplate プロパティをその DataTemplate に設定します。

GridView でのユーザーの操作

アプリケーションで GridView を使用する場合、ユーザーは GridView の書式設定を操作および変更できます。 たとえば、ユーザーは列の並べ替え、列のサイズ変更、テーブルでの項目の選択、コンテンツのスクロールなどを実行できます。 また、ユーザーが列ヘッダー ボタンをクリックしたときに応答するイベント ハンドラーを定義することもできます。 イベント ハンドラーは、列のコンテンツに従って GridView に表示されるデータを並べ替える操作などを実行できます。

GridView を使用したユーザー操作のための機能の詳細を次に示します。

  • ドラッグ アンド ドロップを使用した列の並べ替え。

    ユーザーは、マウスが列ヘッダー上にあるときにその左ボタンを押してその列を新しい位置にドラッグすることで、GridView の列を並べ替えることができます。 ユーザーが列ヘッダーをドラッグするとき、フローティング バージョンのヘッダーと、列を挿入する位置を示す黒い実線が表示されます。

    フローティング バージョンのヘッダーの既定のスタイルを変更する場合は、Role プロパティが Floating に設定されているときにトリガーされる GridViewColumnHeader 型の ControlTemplate を指定します。 詳細については、「方法 : ドラッグされた GridView 列ヘッダーのスタイルを作成する」を参照してください。

  • コンテンツに合わせた列のサイズ変更。

    ユーザーは、列ヘッダーの右にあるグリッパーをダブルクリックして、列のサイズをそのコンテンツに合わせて変更することができます。

    メモメモ

    Width プロパティを Double.NaN に設定して、同じ効果を得ることができます。

  • 行項目の選択。

    ユーザーは、GridView の 1 つ以上の項目を選択できます。

    選択された項目の Style を変更する場合は、「方法 : トリガーを使用して、ListView で選択された項目のスタイルを設定する」を参照してください。

  • 最初に画面に表示されていないコンテンツを表示するためのスクロール。

    GridView のサイズがすべての項目を表示できる十分な大きさではない場合、ユーザーは、ScrollViewer コントロールによって提供されるスクロール バーを使用して水平方向または垂直方向にスクロールできます。 特定の方向ですべてのコンテンツが表示可能な場合、ScrollBar は非表示になります。 列ヘッダーは垂直スクロール バーでスクロールされませんが、水平方向にはスクロールされます。

  • 列ヘッダー ボタンをクリックすることによる列の操作。

    並べ替えアルゴリズムが提供されている場合、列ヘッダー ボタンをクリックすると、ユーザーは列に表示されるデータを並べ替えることができます。

    並べ替えアルゴリズムなどの機能を提供するには、列ヘッダー ボタンの Click イベントを処理します。 単一の列ヘッダーの Click イベントを処理するには、GridViewColumnHeader に対してイベント ハンドラーを設定します。 すべての列ヘッダーの Click イベントを処理するイベント ハンドラーを設定するには、ListView コントロールに対してハンドラーを設定します。

その他のカスタム ビューの取得

ViewBase 抽象クラスから派生した GridView クラスは、ListView クラスの使用可能な表示モードの一例です。 ViewBase クラスから派生させて、ListView のその他のカスタム ビューを作成できます。 カスタム表示モードの例については、「方法 : ListView のカスタム表示モードを作成する」を参照してください。

GridView のサポート クラス

次のクラスは GridView 表示モードをサポートします。

参照

処理手順

方法 : ヘッダーがクリックされたときに GridView 列を並べ替える

参照

ListView

ListViewItem

GridViewColumn

GridViewColumnHeader

GridViewRowPresenter

GridViewHeaderRowPresenter

ViewBase

概念

ListView の概要

その他の技術情報

ListView に関する「方法」トピック