.png "このページは WPF および Silverlight 2 に適用されます")
ヘッダー付きコントロールには、コントロールにラベルを指定するときに使用されるヘッダー プロパティがあります。ヘッダー プロパティは、テキスト文字列のように単純になることも、Microsoft .NET Framework オブジェクトのように複雑になることもあります。ヘッダー付きコントロールには、操作しているヘッダー付きコントロールの種類に応じて、アイテムのコンテンツやコレクションも表示されます。たとえば、TabControl 内の TabItem は、ヘッダー付きコンテンツ コントロールです。ToolBar と MenuItem はどちらもヘッダー付きアイテム コントロールです。
次の手順では、アイテム コントロール (TabControl) 内にヘッダー付きコンテンツ コントロール (TabItem コントロール) を作成する方法について説明します。この手順は、MSDN ライブラリの「HeaderedContentControl 型」のトピックで「型」のセクションに記載されている他のヘッダー付きコンテンツ コントロールでも使用できます。ヘッダー付きアイテム コントロールは、MSDN の「HeaderedItemsControl 型」に一覧表示されています。
.gif "メモ") メモ : |
|---|
ヘッダー付きコントロールは、Microsoft Silverlight 1.0 プロジェクトでは使用できません。ただし、TextBlock オブジェクトを含む [キャンバス] レイアウト パネルを階層化し、JavaScript イベント ハンドラをフックして、ユーザーがクリックしたタブに応じてアイテムの表示と非表示を切り替えることができます。JavaScript の詳細については、「Silverlight scripting and mouse events」(英語の可能性あり) を参照してください。 |
| メモ : |
|---|
Service Pack 1 が適用された Microsoft Expression Blend 2 には、Silverlight 2 バージョンのヘッダー付きコントロールは付属していません。ただし、Silverlight 2 SDK (Microsoft Silverlight Tools for Visual Studio (英語の可能性あり) に含まれています) には、TabControl などのヘッダー付きコントロールを含むアセンブリが付属しています。アセンブリをプロジェクトに組み込む方法の詳細については、「参照の追加によるカスタム コントロールのインポート」を参照してください。 |
ヘッダー付きコンテンツ コントロールを作成するには
Microsoft Expression Blend の左側にあるツールボックスの [アセット ライブラリ]
.png "Cc295310.0224cabd-5da1-4e01-bddd-4a647401a098(ja-jp,Expression.10).png")
ボタンをクリックします。[コントロール] タブの [システム コントロール] をクリックし (まだ選択していない場合)、一覧で TabControl .png "Cc295310.f13847cd-7fdf-4757-a648-d5ece98fcaea(ja-jp,Expression.10).png")
コントロールをクリックします。[アセット ライブラリ] ボタンの上部に [TabControl] コントロールのアイコンが表示され、アートボードに TabControl を追加できるようになっています。
.gif "ヒント")
ヒント :最も一般的なユーザー インターフェイス (UI) 要素 (Button コントロールなど) は [アセット ライブラリ] ボタンの上のドロップダウン リストに表示されているため、すぐに追加できます。
アートボードにボタンを追加するには、TabControl コントロールの [ツールボックス] アイコンをダブルクリックします。既定では、TabControl には 2 つの TabItem オブジェクトが含まれます。
既定のサイズと場所 (左上) で作成された、アートボード上の TabControl オブジェクト
.png "Cc295310.b5763b4e-3032-468e-bbdf-42057fd0cb08(ja-jp,Expression.10).png")
ヒント :必要に応じて、他の TabItem オブジェクトを TabControl に追加できます。[オブジェクトとタイムライン] で TabControl オブジェクトをダブルクリックすると、アクティブな要素になります。[ツールボックス] で、[アセット ライブラリ] から TabItem コントロールを選択します ([すべて表示] チェック ボックスをオンにします)。[TabItem] コントロールのアイコンをダブルクリックすると、TabControl 内に子要素として追加されます。
アートボード上で、右下のサイズ変更ハンドルをドラッグし、タブ コントロールを大きくします。ポインタが、サイズ変更操作を示す 2 方向矢印
.png "Cc295310.7d350cd4-6d4f-40bc-9d04-d46d2d54ebee(ja-jp,Expression.10).png")
に変わります。3 つのタブが上部に表示されるように、TabControl のサイズを拡大します。ヒント :TabControl のサイズを変更する別の方法として、[プロパティ] パネルの [レイアウト] カテゴリにある [Height] と [Width] のプロパティを設定することもできます。
いずれかの TabItem オブジェクトに名前を付けるには、[オブジェクトとタイムライン] でオブジェクトを選択し、[プロパティ] パネルの [共通プロパティ] カテゴリにある [Header] プロパティの名前を入力します。たとえば、最初の TabItem オブジェクトに "個人情報" という名前を付けます。
ヒント :Image コントロールなどの他のコントロールを TabItem のヘッダーとして使用することもできます。[オブジェクトとタイムライン] で TabItem オブジェクトを展開し、Header オブジェクトをダブルクリックすると、アクティブな要素になります。[ツールボックス] または [ファイル] パネルから Image コントロールを追加することもできます。
いずれかの TabItem オブジェクトにコンテンツを追加するには、[オブジェクトとタイムライン] でオブジェクトをダブルクリックしてアクティブにします。
[ツールボックス] の [StackPanel]
.png "Cc295310.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(ja-jp,Expression.10).png")
をダブルクリックし、TabItem に StackPanel を追加します。TabItem のコンテンツ プロパティは、既定の Grid オブジェクトから StackPanel オブジェクトに変更されます。ヒント :コンテンツ プロパティには 1 つのアイテムしか含めることができません。StackPanel や Grid などのパネル コントロールを 1 つのアイテムとして使用し、複数のアイテムをパネル コントロールに追加すると便利です。
[オブジェクトとタイムライン] で StackPanel オブジェクトをダブルクリックすると、アクティブな要素になります。これで、必要に応じて任意の数の要素を TabItem に追加できるようになりました。たとえば、[ツールボックス] から TextBlock コントロールや ListBox コントロールを追加できます。
TabControl オブジェクトに追加された子オブジェクト
.png "Cc295310.f20233a8-3a71-46a5-863b-57a0f5b54f0b(ja-jp,Expression.10).png")
TabControl 全体に罫線とヘッダーを追加する場合は、他のヘッダー付きコンテンツ コントロールである GroupBox コントロールを使用できます。[オブジェクトとタイムライン] で LayoutRoot オブジェクトがアクティブな状態で、[アセット ライブラリ] の GroupBox コントロールを選択し、マウスを使用してアートボードにコントロールを描画して、TabControl よりもやや大きくします。
TabControl を GroupBox の子要素にするには、[オブジェクトとタイムライン] で [TabControl] をクリックして GroupBox までドラッグします。
GroupBox に TabControl をドラッグ
.png "Cc295310.bbfefd21-01bb-4725-bfb0-30e55de6c4df(ja-jp,Expression.10).png")
[オブジェクトとタイムライン] で GroupBox のタイトルを選択して変更し、[プロパティ] パネルの [共通プロパティ] カテゴリある [Header] プロパティを変更します。
プロジェクトをビルドし (F5 キー)、生成されたアプリケーションを確認します。
メモ :ListBox で選択したアイテムに反応するコードを含む完全なサンプルについては、MSDN ライブラリの「GroupBox のサンプル」を参照してください。サンプル コードは、「Windows SDK .NET Framework 3.0 Samples」(英語の可能性あり) から入手できる "WPFSamples.exe" パッケージに含まれています。