次の方法で共有

TreeView コントロールを使用する

  • [アーティクル]

TreeView コントロールは、展開可能なノード ツリーにデータの階層コレクション (または入れ子になったコレクションか、再帰的なコレクション) を表示することができます。

TreeView コントロールの詳細については、MSDN の「TreeView クラス (System.Windows.Controls) Ee371155.xtlink_newWindow(ja-jp,Expression.40).png」を参照してください。

[TreeView] コントロール内に表示するサンプル データを作成するには

TreeView コントロールではどのようなタイプのコレクションも使用することができますが、TreeView コントロールの機能が最大限に生かされるのは階層コレクションです。下の「[TreeView] コントロールにデータを表示するには」で使用するデータがない場合は、次の手順に従って、TreeView コントロールの機能を確認するためのサンプル データを準備してください。

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

  2. [データ] パネルで、[サンプル データの作成] Ee371155.30540d76-7256-43ce-b5d9-4b2edf3d339f(ja-jp,Expression.40).png、[新しいサンプル データ] の順にクリックします。

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

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

    tip noteヒント :

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

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

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

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

    Ee371155.496d7ebc-fe46-42f6-95a8-57b0e5be5d49(ja-jp,Expression.40).png

  6. Ee371155.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(ja-jp,Expression.40).png [コレクション] の横で、[シンプル プロパティの追加] Ee371155.203a14a5-0db2-486e-9b94-4fdf658d531b(ja-jp,Expression.40).png の横にあるドロップダウン矢印をクリックし、[階層コレクションに変換] をクリックします。

    フラット コレクションが入れ子になったコレクションに変換されると、コレクションは 5 階層の入れ子のプロパティを提供します。コレクションの 2 レベル目の名前が編集可能になります。

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

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

[TreeView] コントロールにデータを表示するには

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

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

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

    tip noteヒント :

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

  2. [アセット] パネルで [コントロール] を展開して [すべて] をクリックし、TreeView コントロール Ee371155.7ecbf7de-e46f-44e9-b931-98c8c12c0b2a(ja-jp,Expression.40).png をクリックします。

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

  3. マウス ポインターを使用して、メイン ドキュメントのアートボードに大きな TreeView オブジェクトを描きます。

  4. [データ] パネルで、最上位のコレクション (Ee371155.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(ja-jp,Expression.40).png コレクション) を新しい TreeView オブジェクトにドラッグします。

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

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

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

    Ee371155.b4ccdfe0-38ac-486f-a617-bd0044bce42b(ja-jp,Expression.40).png

[TreeView] コントロールの外観の変更

コントロールの外観を変えるには、そのプロパティを変更するか、スタイルを設定するために使用するテンプレートを変更します。全体的なテンプレートや各行にアイテムを配置するテンプレートなどを変更することができます。

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

各行のアイテムのレイアウトや外観を変更するには

  1. [オブジェクトとタイムライン] パネルまたはアートボードで、TreeView オブジェクトを右クリックし、[追加テンプレートの編集]、[生成されたアイテムの編集 (ItemTemplate)] の順にポイントし、[コピーして編集] をクリックします。

  2. [データ テンプレート リソースの作成] ダイアログ ボックスで [OK] をクリックします。

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

  3. [オブジェクトとタイムライン] パネルに、StackPanel オブジェクトに配置されているアイテムが表示されます。積み重ねの方向と順序を変更することができます。StackPanel を、Grid や Canvas などの、別のレイアウト パネルに変更することもできます。

    詳細については、次のトピックを参照してください。

  4. [オブジェクトとタイムライン] パネルで、テンプレートにオブジェクトを追加したり、[プロパティ] パネルで既存のオブジェクトのプロパティを変更したりします。

選択したアイテムの色を変更するには

  1. [オブジェクトとタイムライン] パネルまたはアートボードで、TreeView オブジェクトを右クリックし、[追加テンプレートの編集]、[生成されたアイテム コンテナーの編集 (ItemContainerStyle)] の順にポイントし、[コピーして編集] をクリックします。

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

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

    tip noteヒント :

    最初にテンプレートの編集モードに入ったときのテンプレートにあるコントロールは、ユーザーがコントロールをまったく操作していないときの外観になっています。ユーザーが操作したときのコントロールの外観を変更するには、テンプレートの編集モードになっているときにトリガー (WPF (Windows Presentation Foundation) プロジェクトの場合) または状態 (Microsoft Silverlight プロジェクトの場合) を選択する必要があります。たとえば、ユーザーが TreeView コントロール内でアイテムを選択すると、コントロールを操作していることになり、Selected イベントが発生します。アイテムが選択されているときのコントロールの外観を変更するには、Selected イベントに対応するトリガーまたは状態が選択されているときのテンプレートを変更する必要があります。

  3. 次のいずれかの操作を行います。

    • WPF プロジェクトの場合は、[トリガー] パネルで IsSelected = True トリガーをクリックし、Selected イベントのテンプレートの編集モードに切り替えます。[オブジェクトとタイムライン] パネルで、Bd オブジェクトをクリックします。[プロパティ] パネルの [ブラシ] で、Bd オブジェクトの [背景] の色を変更します。必要な変更が終わったら、[トリガー] パネルで [既定] をクリックして、トリガーの記録をオフにします。

    • Silverlight プロジェクトの場合は、[状態] パネルで Selected 状態をクリックし、Selected イベントのテンプレートの編集モードに切り替えます。[オブジェクトとタイムライン] パネルで、Selection オブジェクトをクリックします。[プロパティ] パネルの [ブラシ] で、Selection オブジェクトの [Fill] と [Stroke] の色を変更します。必要な変更が終わったら、[状態] パネルで [ベース] をクリックして、トリガーの記録をオフにします。

    パネルを開く方法の詳細については、「ワークスペース パネルの追加または削除」を参照してください。

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

  4. F5 キーを押してアプリケーションを実行し、ツリー内のアイテムを選択します。

展開ボタンの外観を変更するには

  1. [オブジェクトとタイムライン] パネルまたはアートボードで、TreeView オブジェクトを右クリックし、[追加テンプレートの編集]、[生成されたアイテム コンテナーの編集 (ItemContainerStyle)] の順にポイントし、[コピーして編集] をクリックします。

    tip noteヒント :

    このテンプレートが既に作成されているときは [現在のテンプレートの編集] コマンドが有効になっているため、[コピーして編集] ではなく [現在のテンプレートの編集] を選択することができます。

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

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

  3. [オブジェクトとタイムライン ] パネルで Expander オブジェクト (WPF プロジェクト) か ExpandButton オブジェクト (Silverlight プロジェクト) を右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。

  4. [オブジェクトとタイムライン] パネルでノードを展開すると、TreeView コントロールの展開ボタンを表す Path オブジェクトが表示されます。WPF プロジェクトでは、Path オブジェクトに ExpandPath という名前が付いています。Silverlight プロジェクトには、UncheckedVisual および CheckedVisual という名前 の2 つの Path オブジェクトがあります。[ペン] ツール Ee371155.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ja-jp,Expression.40).png と [個別選択] ツールEe371155.6dd6571f-c116-451d-8dd2-1f88b8406362(ja-jp,Expression.40).png を使用してこれらのパスの形を変更することができます。WPF では、ExpandPath オブジェクトの名前と種類はこれに依存するトリガーがあるため、保存しておく必要があります。

    詳細については、「トリガーを使用した WPF コントロールのビヘイビアーの定義」を参照してください。

    Silverlight プロジェクトでは、Path オブジェクトが Checked 状態になると外観がどのように変化するかを変更できます。

    詳細については、「コントロール用ビジュアル状態の定義」を参照してください。

関連項目

その他のリソース

サンプル データの作成
ライブ データへの接続
コントロールでのデータ表示

Copyright ©2011 by Microsoft Corporation. All rights reserved.