次の方法で共有

DataGrid コントロールの使用

  • [アーティクル]

DataGrid コントロールは、行と列の形式でデータを表示します。列を基準にしてデータを並べ替える機能も付いています。

DataGrid コントロールの詳細については、MSDN の「DataGrid クラス」を参照してください。

DataGrid コントロールに表示するサンプル データを作成するには

DataGrid コントロールには、どのような種類のデータでも表示できます。下の「DataGrid コントロールにデータを表示するには」で使用するデータがない場合は、次の手順に従って、DataGrid コントロールの機能を確認するためのサンプル データを準備してください。

  1. [データ] パネルが表示されていない場合は、[ウィンドウ] メニューの [データ] をクリックします。

  2. [データ] パネルで [サンプル データ ソースの追加]Ee341396.30540d76-7256-43ce-b5d9-4b2edf3d339f(JA-JP,Expression.30).png をクリックし、[新しいサンプル データの定義] をクリックします。

  3. [新しいサンプル データの定義] ダイアログ ボックスで、データ セットの既定の名前を変更し、データを使用できるようにするプロジェクトの場所を選択します。

  4. [アプリケーションの実行中にサンプル データを有効化] チェック ボックスをオンにします。

    Ee341396.alert_tip(JA-JP,Expression.30).gifヒント :

    [アプリケーションの実行中にサンプル データを有効化] チェック ボックスをオンにすると、アプリケーションを実行したときにサンプル データが表示されます。このチェック ボックスをオフにすると、サンプル データがアートボードだけに表示されます。

    詳細については、「アプリケーション実行時のサンプル データ表示」を参照してください。

  5. [OK] をクリックします。

    3 つのプロパティ (文字列 Ee341396.0baebca0-a722-4aa2-ad58-a96325a0536d(JA-JP,Expression.30).png、数値 Ee341396.3a9d424b-3e04-443e-8c96-2bcb744fd037(JA-JP,Expression.30).png、ブール型 Ee341396.b09651ed-c8ae-4f66-b10c-d8478c5337c7(JA-JP,Expression.30).png) を持つコレクション Ee341396.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(JA-JP,Expression.30).png のサンプル データが作成されます。

    Ee341396.496d7ebc-fe46-42f6-95a8-57b0e5be5d49(JA-JP,Expression.30).png

    次に、サンプル データと DataGrid コントロールの機能を確認するために、コレクションにイメージ プロパティを追加します。

  6. [コレクション] Ee341396.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(JA-JP,Expression.30).png の横にある [シンプル プロパティの追加] Ee341396.203a14a5-0db2-486e-9b94-4fdf658d531b(JA-JP,Expression.30).png をクリックして、コレクションに新しいプロパティを追加します。

    Ee341396.alert_tip(JA-JP,Expression.30).gifヒント :

    [シンプル プロパティの追加] ボタン Ee341396.203a14a5-0db2-486e-9b94-4fdf658d531b(JA-JP,Expression.30).png の横にあるドロップダウン矢印をクリックすると、別のプロパティ (シンプル、複合、コレクション) を選択できます。

  7. 新しく追加したプロパティ ([Property4]) の横にある [プロパティの種類の変更]Ee341396.c4968582-0dae-407e-961b-80ffa2838f3b(JA-JP,Expression.30).png をクリックします。表示されたエディターで、[種類] の横にあるドロップダウン矢印をクリックして、[イメージ] をクリックします。

  8. エディターの外側をクリックして、エディターを閉じます。

    [Property4] の横にあるアイコンが、イメージ プロパティを示す形 Ee341396.675c8aad-5da1-4df3-8a7a-b26418c4e8cf(JA-JP,Expression.30).png に変わります。

これで、DataGrid コントロールに表示するサンプル データの準備ができました。

サンプル データの変更とデータ プロパティの追加の詳細については、「サンプル データの変更」を参照してください。

DataGrid コントロールにデータを表示するには

アートボードのコントロールにデータをバインドするには、さまざまな方法があります。ここでは、DataGrid コントロールを使用している場合にすばやくバインドできる方法を示します。

その他の方法については、「データへのオブジェクトのバインド」を参照してください。

  1. [ツール] パネルの [アセット] Ee341396.0d8b8d29-1af9-418f-8741-be3097d76eab(JA-JP,Expression.30).png をクリックします。

    Ee341396.alert_tip(JA-JP,Expression.30).gifヒント :

    または、[ウィンドウ] メニューの [アセット] をクリックして、ドッキングされた [アセット] パネルを表示します。

  2. [アセット] パネルで [コントロール] を展開して [すべて] をクリックし、[DataGrid] Ee341396.55bfb0df-05d2-4b58-8312-24a3aed103e3(JA-JP,Expression.30).png コントロールをクリックします。

    [ツール] パネルの [アセット] Ee341396.0d8b8d29-1af9-418f-8741-be3097d76eab(JA-JP,Expression.30).png の下に、DataGrid コントロールを示すアイコンが、選択された状態で表示されます。

  3. マウスを使用して、メイン ドキュメントのアートボードに大きな DataGrid コントロールを描きます。

  4. [データ] パネルで、サンプル データ コレクション (Ee341396.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(JA-JP,Expression.30).png [コレクション]) を、新しい DataGrid オブジェクトにドラッグします。

    DataGrid オブジェクトに、サンプル データ ソースにあるコレクションが表示されます。このとき、イメージ プロパティがイメージ オブジェクトに、ブール型プロパティがチェック ボックスに変換されます。

  5. F5 キーを押してアプリケーションを実行します。

    上の手順に従ってサンプル データを作成し、[アプリケーションの実行中にサンプル データを有効化] をオンにしていると、次のように表示されるはずです。

    Ee341396.c5466ecc-fe83-4d23-96c0-ca058daa29d0(JA-JP,Expression.30).png

    Ee341396.alert_tip(JA-JP,Expression.30).gifヒント :

    表示されるサンプル データを変更した後で、アートボードにある DataGrid オブジェクトを更新するには、個々のデータ プロパティをコントロールにドラッグして新しい列を追加するか、コレクション全体をドラッグします。[オブジェクトとタイムライン] パネルで、[DataGrid] オブジェクトの [Columns] ノードを展開すると、列を削除したり並べ替えたりできます。

DataGrid コントロールの列見出しを変更するには

データのコレクションを DataGrid コントロールにドラッグすると、列見出しがプロパティの名前と同じになります。ただし、DataGrid コントロールにデータを表示した後で、列見出しを変更できます。

  1. [オブジェクトとタイムライン]パネルで [DataGrid] オブジェクトを展開して、[Column] オブジェクトを表示します。

  2. 一番上の [Column] オブジェクト ([DataGridTemplateColumn] "Property1") を選択します。[プロパティ] パネルで、[Header] プロパティの横にわかりやすい名前 (「説明」など) を入力して Enter キーを押します。

  3. 同じ要領で、残りの 2 つの [Column] オブジェクトの名前を変更します。

  4. F5 キーを押してアプリケーションを実行します。

    上の手順に従ってサンプル データを作成し、[アプリケーションの実行中にサンプル データを有効化] をオンにしていると、次のように表示されるはずです。

    Ee341396.749194f0-94df-4ceb-bdcb-30b35c6ae56b(JA-JP,Expression.30).png

DataGrid コントロールの外観の変更

コントロールの外観を変えるには、そのプロパティを変更するか、スタイルを設定するために使用するテンプレートを変更します。コントロール全体のテンプレート、空行のテンプレート、セルや見出し用のテンプレートなどがあります。

詳細については、「テンプレートの作成または変更」を参照してください。

列見出しの外観を変更するには

  1. [オブジェクトとタイムライン] パネルかアートボードで [DataGrid] オブジェクトを右クリックし、[追加テンプレートの編集]、[ColumnHeaderStyle の編集] の順にポイントして、[コピーして編集] をクリックします。

    Ee341396.976995f7-d28e-4af7-8bba-4b1555eaff54(JA-JP,Expression.30).png

  2. [スタイル リソースの作成] ダイアログ ボックスで、[OK] をクリックします。

    Expression Blend がテンプレート編集モードになります。アートボードの上端にある階層リンク バーに、DataGrid オブジェクト内のテンプレートを編集していることが示されます。

  3. [オブジェクトとタイムライン] パネルで、テンプレートにオブジェクトを追加したり、[プロパティ] パネルで既存のオブジェクトのプロパティを変更したりします。たとえば、[Grid] オブジェクトには、並べ替えボタンのアイコンを示す [SortIcon] というパスがあります。このパスをイメージに変更するか、パス自体を変更します。アプリケーションの実行時に列見出しをクリックすると、並べ替えボタンが表示されます。

    Ee341396.alert_tip(JA-JP,Expression.30).gifヒント :

    プロパティの中には、黄色い枠が付いているものがあります。これは、そのプロパティがデータにバインドされているか、テンプレートを使用するコントロールのプロパティにバインドされているという意味です。

    テンプレートのバインドの詳細については、「テンプレートをサポートするコントロールのスタイル処理」を参照してください。

イメージを含むセルの外観を変更するには

  1. アートボードで、イメージを表示している DataGrid オブジェクトのセルを右クリックし、[列テンプレートの編集]、[CellTemplate の編集] の順にポイントして、[現在のテンプレートの編集] をクリックします。

  2. [オブジェクトとタイムライン] パネルで、[StackPanel] レイアウト コンテナーに別のオブジェクト (著作権の記号など) を追加するか、[Image] オブジェクトを選択して [プロパティ] パネルでそのプロパティを変更します。

    ここで加えた変更が、イメージを含むすべてのセルに反映されます。

1 行おきに付ける色を変更するには

  1. [オブジェクトとタイムライン] パネルで、[DataGrid] オブジェクトを選択します。

  2. [プロパティ] パネルの [Rows] の下で、[AlternatingRowBackground] プロパティの横にある四角形の内側をクリックします。

    ブラシ エディターが表示されます。

  3. カラー エディターの上端にあるタブの 1 つをクリックして、ブラシの種類を選択します。既存のブラシ([単色ブラシ]Ee341396.b62aabb4-fad4-4a9b-a84c-16c98012cf27(JA-JP,Expression.30).png) を使用する場合は、[Alpha] プロパティの値を上げて不透明にします。

  4. 他の行の色を変更する場合は、[RowBackground] プロパティを変更します。

    ブラシの変更の詳細については、「色、ブラシ、およびマスクの設定」を参照してください。

関連項目

その他のリソース

サンプル データの作成

ライブ データへの接続

コントロールでのデータ表示