TreeView コントロールを使用する
[TreeView] コントロールは、展開可能なノード ツリーにデータの階層コレクション (または入れ子になったコレクションか、再帰的なコレクション) を表示することができます。
詳細については、MSDNの「TreeView クラス」を参照してください。
[TreeView] コントロール内に表示するサンプル データを作成するには
[TreeView] コントロールではどのようなタイプのコレクションも使用することができますが、[TreeView] コントロールの機能が最大限に生かされるのは階層コレクションです。下の「[TreeView] コントロールにデータを表示するには」で使用するデータがない場合は、次の手順に従って、[TreeView] コントロールの機能を確認するためのサンプル データを準備してください。
[データ] パネルが表示されていない場合は、[ウィンドウ] メニューの [データ] をクリックします。
[データ] パネルで、[サンプル データ ソースの追加]
.png "Ee371155.30540d76-7256-43ce-b5d9-4b2edf3d339f(JA-JP,Expression.30).png")
、[新しいサンプル データの定義] の順にクリックします。[新しいサンプル データの定義] ダイアログ ボックスで、データ セットの既定の名前を変更し、データを使用できるようにするプロジェクトの場所を選択します。
[アプリケーションの実行中にサンプル データを有効化] チェック ボックスをオンにします。
.gif "ヒント")
ヒント :[アプリケーションの実行中にサンプル データを有効化] チェック ボックスをオンにすると、アプリケーションを実行したときにサンプル データが表示されます。このチェック ボックスをオフにすると、サンプル データがアートボードだけに表示されます。
詳細については、「アプリケーション実行時のサンプル データ表示」を参照してください。
[OK] をクリックします。
3 つのプロパティ (文字列
.png "Ee371155.0baebca0-a722-4aa2-ad58-a96325a0536d(JA-JP,Expression.30).png")
、数値 .png "Ee371155.3a9d424b-3e04-443e-8c96-2bcb744fd037(JA-JP,Expression.30).png")
、ブール型 .png "Ee371155.b09651ed-c8ae-4f66-b10c-d8478c5337c7(JA-JP,Expression.30).png")
) を持つコレクション .png "Ee371155.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(JA-JP,Expression.30).png")
のサンプル データが作成されます。.png "Ee371155.496d7ebc-fe46-42f6-95a8-57b0e5be5d49(JA-JP,Expression.30).png")
- [コレクション] の横で、[シンプル プロパティの追加]
.png "Ee371155.203a14a5-0db2-486e-9b94-4fdf658d531b(JA-JP,Expression.30).png")
の横にあるドロップダウン矢印をクリックし、[階層コレクションに変換] をクリックします。コレクションが変換され、プロパティが 5 階層の入れ子になります。
これで、[TreeView] コントロールに表示するサンプル データの準備ができました。
サンプル データの変更とデータ プロパティの追加の詳細については、「サンプル データの変更」を参照してください。
[TreeView] コントロールにデータを表示するには
アートボードのコントロールにデータをバインドするには、さまざまな方法があります。ここでは、[TreeView] コントロールを使用している場合にすばやくバインドできる方法を示します。
その他の方法については、「データへのオブジェクトのバインド」を参照してください。
[ツール] パネルの [アセット]
.png "Ee371155.0d8b8d29-1af9-418f-8741-be3097d76eab(JA-JP,Expression.30).png")
をクリックします。ヒント :または、[ウィンドウ] メニューの [アセット] をクリックして、ドッキングされた [アセット] パネルを表示します。
[アセット] パネルで [コントロール] を展開して [All] をクリックし、[TreeView]
.png "Ee371155.7ecbf7de-e46f-44e9-b931-98c8c12c0b2a(JA-JP,Expression.30).png")
コントロールをクリックします。[ツール] パネルの [アセット]
の下に、[TreeView] コントロールを示すアイコンが、選択された状態で表示されます。マウスを使用して、メイン ドキュメントのアートボードに大きな [TreeView] コントロールを描きます。
[データ] パネルで、最上位のコレクション (
コレクション) を新しい [TreeView] オブジェクトにドラッグします。[TreeView] オブジェクトに、サンプル データ ソースにあるコレクションが表示されます。このとき、イメージ プロパティがイメージ オブジェクトに、ブール型プロパティがチェック ボックスに変換されます。
F5 キーを押してアプリケーションを実行します。
上の手順に従ってサンプル データを作成し、[アプリケーションの実行中にサンプル データを有効化] をオンにしていると、次のように表示されるはずです。
.png "Ee371155.b4ccdfe0-38ac-486f-a617-bd0044bce42b(JA-JP,Expression.30).png")
[TreeView] コントロールの外観の変更
コントロールの外観を変えるには、そのプロパティを変更するか、スタイルを設定するために使用するテンプレートを変更します。全体的なテンプレートや各行にアイテムを配置するテンプレートなどを変更することができます。
詳細については、「テンプレートの作成または変更」を参照してください。
各行のアイテムのレイアウトや外観を変更するには
[オブジェクトとタイムライン] パネルまたはアートボードで、[TreeView]オブジェクトを右クリックし、[追加テンプレートの編集]、[ItemTemplate] の順にポイントし、[コピーして編集] をクリックします。
[データ テンプレート リソースの作成] ダイアログ ボックスで [OK] をクリックします。
Expression Blend がテンプレート編集モードになります。アートボードの上端にある階層リンク バーに、[TreeView] オブジェクト内のテンプレートを編集していることが示されます。テンプレート編集モードを終了するには、階層リンク バーで [TreeView] ボタンをクリックします。
[オブジェクトとタイムライン] パネルに、[StackPanel] オブジェクトに配置されているアイテムが表示されます。積み重ねの方向と順序を変更することができます。また、[StackPanel] を、[Grid] レイアウト パネルや[Canvas] レイアウト パネルなどの別のレイアウト パネルに変更することもできます。
詳細については、次のトピックを参照してください。
[オブジェクトとタイムライン] パネルで、テンプレートにオブジェクトを追加したり、[プロパティ] パネルで既存のオブジェクトのプロパティを変更したりします。
選択したアイテムの色を変更するには
[オブジェクトとタイムライン] パネルまたはアートボードで、[TreeView]オブジェクトを右クリックし、[追加テンプレートの編集]、[ItemContainerStyle] の順にポイントし、[コピーして編集] をクリックします。
[スタイル リソースの作成] ダイアログ ボックスで [OK] をクリックします。
Expression Blend がテンプレート編集モードになります。アートボードの上端にある階層リンク バーに、[TreeView] オブジェクト内のテンプレートを編集していることが示されます。テンプレート編集モードを終了するには、階層リンク バーで [TreeView] ボタンをクリックします。
ヒント :最初にテンプレートの編集モードに入ったときのテンプレートにあるコントロールは、ユーザーがコントロールをまったく操作していないときの外観になっています。ユーザーが操作したときのコントロールの外観を変更するには、テンプレートの編集モードになっているときにトリガー (WPF (Windows Presentation Foundation) プロジェクトの場合) または状態 (Microsoft Silverlight プロジェクトの場合) を選択する必要があります。たとえば、ユーザーが [TreeView] コントロール内でアイテムを選択すると、コントロールを操作していることになり、Selected イベントが発生します。アイテムが選択されているときのコントロールの外観を変更するには、Selected イベントに対応するトリガーまたは状態が選択されているときのテンプレートを変更する必要があります。
次のいずれかの操作を行います。
WPF プロジェクトの場合は、[トリガー] パネルで [IsSelected = True] トリガーをクリックし、Selected イベントのテンプレートの編集モードに切り替えます。[オブジェクトとタイムライン] パネルで、[Bd] オブジェクトを選択します。[プロパティ] パネルの [ブラシ] で、[Bd] オブジェクトの背景色を変更します。必要な変更が終わったら、[トリガー] パネルで [既定] をクリックして、トリガーの記録をオフにします。
Silverlight プロジェクトの場合は、[状態] パネルで [Selected] 状態をクリックして、選択されたイベントのテンプレートの編集モードに切り替えます。[オブジェクトとタイムライン] パネルで、[Selection] オブジェクトを選択します。[プロパティ] パネルの [ブラシ] で、[Selection] オブジェクトの [塗りつぶし] と [ストローク] 用の色を変更します。必要な変更が終わったら、[状態] パネルで [ベース] をクリックして、トリガーの記録をオフにします。
パネルを開く方法の詳細については、「ワークスペース パネルの追加または削除」を参照してください。
ブラシの色を変更する方法の詳細については、「色、ブラシ、およびマスクの設定」を参照してください。
F5 キーを押してアプリケーションを実行し、ツリー内のアイテムを選択します。
展開ボタンの外観を変更するには
[オブジェクトとタイムライン] パネルまたはアートボードで、[TreeView]オブジェクトを右クリックし、[追加テンプレートの編集]、[ItemContainerStyle] の順にポイントし、[コピーして編集] をクリックします。
ヒント :このテンプレートが既に作成されているときは [現在のテンプレートの編集] コマンドが有効になっているため、[コピーして編集] ではなく [現在のテンプレートの編集] を選択することができます。
[スタイル リソースの作成] ダイアログ ボックスで [OK] をクリックします。
Expression Blend がテンプレート編集モードになります。アートボードの上端にある階層リンク バーに、[TreeView] オブジェクト内のテンプレートを編集していることが示されます。テンプレート編集モードを終了するには、階層リンク バーで [TreeView] ボタンをクリックします。
[オブジェクトとタイムライン ] パネルで [Expander] オブジェクト (WPF プロジェクト) か [ExpandButton] オブジェクト (Silverlight プロジェクト) を右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。
[オブジェクトとタイムライン] パネルでノードを展開すると、[TreeView] コントロールの展開ボタンを表す [Path] オブジェクトが表示されます。WPF プロジェクトでは、[Path] オブジェクトに [ExpandPath] という名前が付いています。Silverlight プロジェクトには、[UncheckedVisual] および [CheckedVisual] という名前 の2 つの [Path] オブジェクトがあります。[ペン] ツール
.png "Ee371155.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(JA-JP,Expression.30).png")
と [個別選択] ツール.png "Ee371155.6dd6571f-c116-451d-8dd2-1f88b8406362(JA-JP,Expression.30).png")
を使用してこれらのパスの形を変更することができます。WPF では、[ExpandPath] オブジェクトの名前と種類はこれに依存するトリガーがあるため、保存しておく必要があります。詳細については、「トリガーを使用した WPF コントロールのビヘイビアーの定義」を参照してください。
Silverlight プロジェクトでは、Path オブジェクトが [Checked] 状態になると外観がどのように変化するかを変更できます。
詳細については、「コントロール用ビジュアル状態の定義」を参照してください。