次の方法で共有

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

  • [アーティクル]

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

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

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

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

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

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

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

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

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

    Cc295310.b5763b4e-3032-468e-bbdf-42057fd0cb08(JA-JP,Expression.30).png

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

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

  3. アートボード上で Ctrl キーを押しながら [TabControl] オブジェクトの右下のサイズ変更ハンドルをドラッグして、上端にタブを 3 つ表示できるだけの大きさに拡大します。

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

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

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

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

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

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

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

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

    TabControl オブジェクトに追加された子オブジェクト

    Cc295310.f20233a8-3a71-46a5-863b-57a0f5b54f0b(JA-JP,Expression.30).png

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

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

    TabControl オブジェクトを GroupBox オブジェクトにドラッグ

    Cc295310.bbfefd21-01bb-4725-bfb0-30e55de6c4df(JA-JP,Expression.30).png

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

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

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