GridView の概要
GridView ビュー モードは、ListView コントロールのビュー モードの 1 つです。 GridView クラスおよびそのサポート クラスでは、通常、ボタンを対話型の列ヘッダーとして使用するテーブルに項目のコレクションを表示できます。 このトピックでは、GridView クラスをご紹介し、その用途の概要をご説明します。
GridView のビューとは?
GridView ビュー モードでは、データ フィールドを列にバインドして、列ヘッダーを表示してそのフィールドを識別することによってデータ項目の一覧を表示します。 既定値の GridView スタイルでは、ボタンを列ヘッダーとして実装します。 列ヘッダーにボタンを使用することで、重要なユーザー対話機能を実装することができます。たとえば、ユーザーは列ヘッダーをクリックして、その列の内容に従って GridView データを並べ替えることができます。
注意
GridView が列ヘッダーに使用するボタン コントロールは、ButtonBase から得られます。
次の図は、ListView コンテンツの GridView ビューを示したものです。
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>
次の図は、前の例により作成されるテーブルを示しています。 GridView コントロールには、ItemsSource オブジェクトからのデータが表示します。
GridView のレイアウトとスタイル
GridViewColumn の列セルと列ヘッダーの幅は同じです。 既定では、各列の幅がコンテンツに合わせて調整されます。 列を固定幅に設定することもできます。
関連するデータのコンテンツは水平方向の行に表示されます。 たとえば前の図では、各従業員の姓と名と ID 番号が横一列に並ぶため 1 つのセットとして表示されています。
GridView の列の定義およびスタイル設定
GridViewColumn に表示するデータ フィールドを定義するときには、DisplayMemberBinding プロパティ、CellTemplate プロパティ、または CellTemplateSelector プロパティを使用します。 DisplayMemberBinding プロパティはいずれのテンプレート プロパティよりも優先されます。
GridViewの列のコンテンツの配置を指定するには、CellTemplate を定義します。 GridView を使用して表示される ListView コンテンツには、HorizontalContentAlignment プロパティと VerticalContentAlignment プロパティを使用しないでください。
列ヘッダーのテンプレートとスタイルのプロパティを指定するには、GridView クラスと GridViewColumn クラスと GridViewColumnHeader クラスを使用します。 詳細については、GridView の列ヘッダーのスタイルとテンプレートの概要を参照してください。
GridView への視覚的要素の追加
CheckBox コントロールや Button コントロールなどといった視覚的要素を GridView ビュー モードに追加するには、テンプレートまたはスタイルを使用します。
視覚的要素をデータ項目として明示的に定義する場合、GridView でそれを 1 回だけ表示できます。 この制限が存在する理由は 1 つの要素は 1 つの親しか持てないためです。したがって視覚的要素をビジュアル ツリーに 1 回だけ表示できます。
GridView での行のスタイル設定
GridViewRowPresenter クラスと GridViewHeaderRowPresenter クラスを使用して、GridView の行の書式設定と表示を行います。 GridView ビュー モードの行のスタイル設定方法については、「GridView を実装する ListView で行のスタイルを設定する」を参照してください。
ItemContainerStyle 使用時の配置問題
列ヘッダーとセルの配置の問題を防ぐには、ItemContainerStyle 内の項目の幅に影響するプロパティの設定や、そのようなテンプレートの指定は行わないでください。 たとえば、ListView コントロールで定義されている ItemContainerStyle に CheckBox を追加する Margin プロパティの設定や、そのような 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 イベントを処理して、並べ替えアルゴリズムなどの機能を提供することができます。 1 つの列ヘッダーの Click イベントを処理するには、GridViewColumnHeader でイベント ハンドラーを設定します。 すべての列ヘッダーに対して Click イベントを処理するようにイベント ハンドラーを設定するには、ListView コントロールにそのハンドラーを設定します。
その他のカスタム ビューの取得
GridView クラスは、ViewBase 抽象クラスから派生しており、ListView クラスに使用できるビュー モードの 1 つです。 ViewBase クラスから派生させることで、ListView に対して別のカスタム ビューを作成できます。 カスタム ビュー モードの例については、ListView のカスタム ビュー モードを作成するを参照してください。
GridViewサポート クラス
次のクラスは GridView ビュー モードをサポートしています。
関連項目
.NET Desktop feedback