ヘッダー付きコントロールの描画

  • [アーティクル]

ヘッダー付きコントロールには、コントロールのラベルを指定するためのヘッダー プロパティがあります。ヘッダー プロパティは、テキスト文字列のように単純になることも、Microsoft .NET Framework オブジェクトのように複雑になることもあります。また、ヘッダー付きコントロールの中には、アイテムのコンテンツやコレクションを表示するものもあります。たとえば、TabControl 内の TabItem は、ヘッダー付きコンテンツ コントロールです。ToolBar と MenuItem は、どちらもヘッダー付きアイテム コントロールです。

次の手順では、アイテム コントロール (TabItem) 内にヘッダー付きコンテンツ コントロール (TabControl コントロール) を作成する方法について説明します。この手順は、MSDN の「HeaderedContentControl 型 Cc295310.xtlink_newWindow(ja-jp,Expression.40).png」の「型」一覧にあるヘッダー付きコンテンツ コントロールにも当てはまります。ヘッダー付きアイテム コントロールは、MSDN の「HeaderedItemsControl 型 Cc295310.xtlink_newWindow(ja-jp,Expression.40).png」に一覧表示されています。

ヘッダー付きコンテンツ コントロールを作成するには

  1. Microsoft Expression Blend アプリケーション ウィンドウの左側にある [ツール] パネルで、[アセット] Cc295310.0d8b8d29-1af9-418f-8741-be3097d76eab(ja-jp,Expression.40).png をクリックします。[コントロール] カテゴリの一覧から、TabControlCc295310.f13847cd-7fdf-4757-a648-d5ece98fcaea(ja-jp,Expression.40).png を選択します。

    [アセット] ボタンの下に TabControl コントロールのアイコンが選択された状態で表示され、アートボードに TabControl コントロールを追加できるようになります。

    tip noteヒント :

    頻繁に使用されるユーザー インターフェイス (UI) の要素 (Button コントロールなど) は、すばやく追加できるように、[アセット] ボタンの下のドロップダウン リストに表示されます。

  2. アートボードに TabControl オブジェクトを追加するには、TabControl コントロールのアイコンをダブルクリックします。既定では、TabControl には 2 つの TabItem オブジェクトが含まれます。

    アートボードの既定の場所 (左上) に既定のサイズで作成した TabControl オブジェクト

    Cc295310.b5763b4e-3032-468e-bbdf-42057fd0cb08(ja-jp,Expression.40).png

    tip noteヒント :

    必要に応じて、他の TabItem オブジェクトを TabControl オブジェクトに追加できます。このためには、[オブジェクトとタイムライン] パネルで TabControl オブジェクトを右クリックして、[TabItem の追加] をクリックします。

  3. アートボード上で、CTRL キーを押しながら右下のサイズ変更ハンドルをドラッグし、タブ コントロールを大きくします。3 つのタブが上部に表示されるように、TabControl のサイズを拡大します。

    tip noteヒント :

    TabControl のサイズを変更する別の方法として、[プロパティ] パネルの [レイアウト] カテゴリにある Height と Width のプロパティを設定することもできます。

  4. TabItem オブジェクトの 1 つに名前を付けるには、[オブジェクトとタイムライン] パネルでそのオブジェクトを選択し、[プロパティ] パネルの [共通プロパティ] カテゴリにある Header プロパティの名前を入力します。たとえば、最初の TabItem オブジェクトに「個人情報」という名前を付けます。

    tip noteヒント :

    または、Image などの別のコントロールを、TabItem のヘッダーとして使用することもできます。まず、[オブジェクトとタイムライン] パネルで [TabItem] オブジェクトを展開し、Header オブジェクトをクリックしてアクティブにします。[ツール] パネルか、[プロジェクト] パネルから Image コントロールを追加します。

  5. TabItem オブジェクトの 1 つにコンテンツを追加するには、[オブジェクトとタイムライン] パネルでそのオブジェクトをクリックしてアクティブにします。

  6. [ツール] パネルの StackPanelCc295310.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(ja-jp,Expression.40).png をダブルクリックして、[StackPanel] オブジェクトを TabItem オブジェクトに追加します。

  7. [オブジェクトとタイムライン] パネルで StackPanel オブジェクトをクリックしてアクティブにします。これで、TabItem オブジェクトにいくつでもオブジェクトを追加できるようになります。たとえば、[ツール] パネルから TextBlock コントロールや ListBox コントロールを追加できます。

  8. TabControl 全体に罫線とヘッダーを追加する場合は、他のヘッダー付きコンテンツ コントロールである GroupBox コントロールを使用できます。まず、[オブジェクトとタイムライン] パネルで LayoutRoot オブジェクトをアクティブにしてから、[アセット] パネルの GroupBox コントロールを選択します。次に、マウスを使ってアートボードに TabControl オブジェクトよりやや大きめのコントロールを描画します。

  9. TabControl オブジェクトを GroupBox オブジェクトの子オブジェクトにするには、[オブジェクトとタイムライン] パネルで TabControl オブジェクトを GroupBox オブジェクトにドラッグします。

  10. GroupBox オブジェクトのタイトルを変更するには、[オブジェクトとタイムライン] パネルでそのオブジェクトを選択し、[プロパティ] パネルの [共通プロパティ] カテゴリにある Header プロパティを変更します。

  11. F5 キーを押してプロジェクトをビルドし、作成されたアプリケーションを確認します。

    [ListBox] オブジェクトで選択されたアイテムに反応するためのコードの例については、MSDN の「GroupBox のサンプル Cc295310.xtlink_newWindow(ja-jp,Expression.40).png」を参照してください。サンプル コードは、「Windows SDK .NET Framework 3.0 Samples (Windows SDK .NET Framework 3.0 サンプル) Cc295310.xtlink_newWindow(ja-jp,Expression.40).png」から入手できる "WPFSamples.exe" パッケージに含まれています。

Copyright ©2011 by Microsoft Corporation. All rights reserved.