次の方法で共有

GridView の概要

  • [アーティクル]

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

GridView ビューとは

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

手記

GridViewが列ヘッダーに使用するボタンコントロールはButtonBaseから派生しています。

次の図は、ListView コンテンツの GridView ビューを示しています。

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 出力を含む ListView を示すスクリーンショット。

GridView のレイアウトとスタイル

GridViewColumn の列セルと列ヘッダーの幅は同じです。 既定では、各列はコンテンツに合わせて幅のサイズを設定します。 必要に応じて、列を固定幅に設定できます。

関連するデータ コンテンツは、水平方向の行に表示されます。 たとえば、前の図では、各従業員の姓、名、ID 番号は、横の行に表示されるため、セットとして表示されます。

GridView での列の定義とスタイル設定

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

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

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

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

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

ビジュアル要素をデータ項目として明示的に定義した場合、GridViewでは 1 回だけ表示できます。 この制限は、要素に親を 1 つだけ含めることができるため、ビジュアル ツリーに 1 回だけ出現できるためです。

GridView での行のスタイル設定

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

ItemContainerStyle を使用するときの配置の問題

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

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

GridView を使用したユーザー操作

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

次の一覧では、ユーザー操作に GridView を使用する機能について詳しく説明します。

  • ドラッグ アンド ドロップメソッドを使用して列を並べ替えます。

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

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

  • コンテンツに合わせて列のサイズを調整します。

    ユーザーは、列ヘッダーの右側にあるグリッパーをダブルクリックして、内容に合わせて列のサイズを変更できます。

    手記

    Width プロパティを Double.NaN に設定して、同じ効果を生成できます。

  • 行項目を選択します。

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

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

  • スクロールすると、画面に最初に表示されないコンテンツが表示されます。

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

  • 列ヘッダー ボタンをクリックして列を操作します。

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

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

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

ViewBase 抽象クラスから派生した GridView クラスは、ListView クラスで使用できるビュー モードの 1 つに過ぎません。 ViewBase クラスから派生することで、ListView の他のカスタム ビューを作成できます。 カスタム ビュー モードの例については、「ListViewのカスタム ビュー モードを作成する」を参照してください。

GridView サポート クラス

次のクラスは、GridView ビュー モードをサポートしています。

こちらもご覧ください