GridView の概要
更新 : 2007 年 11 月
GridView 表示モードは、ListView コントロールの表示モードの 1 つです。GridView クラスおよびそのサポート クラスを使用すると、一般的にボタンを対話型列ヘッダーとして使用するテーブルに項目コレクションを表示することができます。ここでは、GridView クラスについて説明し、その使用方法を示します。
このトピックには次のセクションが含まれています。
- GridView ビューとは
- GridView レイアウトおよびスタイル
- GridView でのユーザーの操作
- その他のカスタム ビューの取得
- GridView のサポート クラス
- 関連トピック
GridView ビューとは
GridView 表示モードでは、データ フィールドを列にバインドし、列ヘッダーを表示してフィールドを識別することによって、データ項目のリストを表示します。既定の GridView スタイルは、列ヘッダーとしてボタンを実装します。列ヘッダーにボタンを使用すると、重要なユーザー操作機能を実装できます。たとえば、ユーザーは列ヘッダーをクリックして、特定の列のコンテンツに従って GridView データを並べ替えることができます。
.gif "メモ") メモ : |
|---|
GridView で列ヘッダーに使用されるボタン コントロールは、ButtonBase から派生します。 |
ListView コンテンツの GridView ビューを次の図に示します。
ListView コンテンツの GridView ビュー
.png "スタイル設定された ListView")
GridView の列は GridViewColumn オブジェクトによって表されます。このオブジェクトのサイズは、コンテンツのサイズに自動的に設定されます。必要に応じて、GridViewColumn を特定の幅に明示的に設定できます。列ヘッダー間のグリッパをドラッグすることによって、列のサイズを変更できます。また、列の追加、削除、置換、および並べ替え機能が GridView に組み込まれているため、この機能を動的に実行することができます。ただし、GridView では、表示されるデータを直接更新することはできません。
従業員データを表示する GridView を定義する方法を次の例に示します。この例では、ListView で EmployeeInfoDataSource が ItemsSource として定義されています。DisplayMemberBinding のプロパティ定義によって、GridViewColumn のコンテンツが EmployeeInfoDataSource データ カテゴリにバインドされます。サンプル全体については、「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>
前述の例で作成したテーブルを次の図に示します。
ItemsSource のデータを表示する GridView
.jpg "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 つしか持つことができず、ビジュアル ツリーに一度しか表示されないために適用されます。CheckBox を GridView 表示モードの列に追加する方法の例については、「GridView と CheckBox を持つ ListView のサンプル」を参照してください。
GridView の行のスタイル設定
GridViewRowPresenter および GridViewHeaderRowPresenter クラスを使用して、GridView の行を書式設定して表示します。GridView 表示モードの行のスタイルを設定する方法の例については、「方法 : GridView を実装する ListView で行のスタイルを設定する」を参照してください。
ItemContainerStyle を使用する際の配置の問題
列ヘッダーとセル間の配置の問題を回避するため、ItemContainerStyle の項目の幅に影響を与えるプロパティを設定したりテンプレートを指定したりしないようにしてください。たとえば、Margin プロパティを設定したり、ListView コントロールで定義されている ItemContainerStyle に CheckBox を追加する ControlTemplate を指定したりしないでください。代わりに、列の幅に影響を与えるプロパティおよびテンプレートを、GridView 表示モードを定義するクラスで直接指定してください。
たとえば、CheckBox を GridView 表示モードの行に追加するには、CheckBox を DataTemplate に追加して、CellTemplate プロパティをその DataTemplate に設定します。CheckBox を GridView 表示モードの列に追加する方法の例については、「GridView と CheckBox を持つ ListView のサンプル」を参照してください。
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 コントロールに対してハンドラを設定します。詳細および使用例については、「データを並べ替える ListView のサンプル」を参照してください。
その他のカスタム ビューの取得
ViewBase 抽象クラスから派生した GridView クラスは、ListView クラスの使用可能な表示モードの一例です。ViewBase クラスから派生させて、ListView のその他のカスタム ビューを作成できます。カスタム表示モードの例については、「方法 : ListView のカスタム表示モードを作成する」を参照してください。
GridView のサポート クラス
次のクラスは GridView 表示モードをサポートします。
参照
処理手順
方法 : ヘッダーがクリックされたときに GridView 列を並べ替える