次の方法で共有

コンテンツ コントロールの描画

  • [アーティクル]

コンテンツ コントロールには、そのコントロールに表示される内容を定義するコンテンツ プロパティが 1 つあります。コンテンツ プロパティは、テキスト文字列のように単純な場合も、Microsoft .NET Framework オブジェクトのように複雑な場合もあります。コンテンツ コントロールにレイアウト パネル コントロールを追加すると、そのパネル コントロールがコンテンツとなり、そこに複数の子オブジェクトを追加できます。そのため、コンテンツ オブジェクトのプロパティが 1 つだけであるという制約に対処できます。

次に、コンテンツ コントロール ([Button]) を作成し、そのコンテンツ プロパティをレイアウト パネル ([StackPanel]) に設定する手順を説明します。この手順は、MSDN の「ContentControl 型」の「型」一覧にある他のコンテンツ コントロールにも当てはまります。

コンテンツ コントロールを作成するには

  1. Microsoft Expression Blend アプリケーション ウィンドウの左側にある [ツール] パネルで、[アセット] Cc295336.0d8b8d29-1af9-418f-8741-be3097d76eab(JA-JP,Expression.30).png をクリックします。[アセット] パネルの [コントロール] カテゴリで、一覧から [Button] Cc295336.05df1779-a68f-436b-b834-a91b7995a3ec(JA-JP,Expression.30).png を選択します。

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

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

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

  2. アートボードにボタンを追加するには、[Button] コントロールの [ツール] パネル アイコンをダブルクリックします。[Button] コントロールの既定のコンテンツは、"Button" という文字列です。

    既定のサイズと場所 (左上) でアートボード上に作成された [Button] オブジェクト

    Cc295336.38211dc1-69d4-46bd-acd2-d7f9b48102bb(JA-JP,Expression.30).png

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

    アートボードにコントロールを追加するには、[ツール] パネルでコントロールを選択してアートボードをクリックし、マウスをドラッグしてコントロールの境界ボックスを描く方法もあります。
    Cc295336.alert_tip(JA-JP,Expression.30).gifヒント :

    アートボードに追加した ([Button] コントロールなどの) UI デザイン要素は、アプリケーションのオブジェクトになります。

  3. [アセット] パネルの [コントロール] カテゴリにある [パネル] で、一覧から [StackPanel] Cc295336.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(JA-JP,Expression.30).png を選択します。[StackPanel] コントロールのアイコンをダブルクリックすると、このコントロールがアートボードに追加されます。

  4. [オブジェクトとタイムライン] パネルで、[StackPanel] オブジェクトを [Button] オブジェクトの上にドラッグします。

    [Button] オブジェクトのコンテンツ文字列が、この [StackPanel] で置換されます。これを確認するには、[オブジェクトとタイムライン] パネルで [Button ] を選択し、[プロパティ] パネルの [共通プロパティ] カテゴリにある [Content] プロパティを表示します。

    アートボード上の [Button] 内の子オブジェクトとして追加された [StackPanel] オブジェクト

    Cc295336.fb639649-9e46-4aef-960f-d0b40e9e8aff(JA-JP,Expression.30).png

  5. [StackPanel] の高さと幅は 100 で、これが既定のサイズです。最小の高さと幅は 0 です。StackPanel を扱いやすくするには、まず、[オブジェクトとタイムライン] パネルで [StackPanel] を選択します。次に、[プロパティ] パネルの [レイアウト] カテゴリにある [Width] を 150 ピクセルに、[Height] を 75 ピクセルに変更します (ピクセルとはデバイスに依存しない単位であり、約 1/96 インチです)。

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

    アートボード上のオブジェクトのサイズを変更する別の方法として、境界ボックスの四隅にあるガイドをドラッグすることもできます。

  6. 子要素 ([StackPanel] オブジェクト) のサイズを変更すると、自動的に親のボタンのサイズも変更されるようにするには、[Button] オブジェクトを選択し、[プロパティ] パネルの [レイアウト] カテゴリで、[Width] プロパティと [Height] プロパティを [自動] に設定します。

  7. [オブジェクトとタイムライン] パネルで [StackPanel] を選択したままの状態で、[プロパティ] パネルの [レイアウト] カテゴリにある [Orientation] プロパティを [Horizontal] に設定します。これにより、[StackPanel] の子オブジェクトが水平方向に配置されるようになります。

  8. [オブジェクトとタイムライン] パネルで [StackPanel] オブジェクトをクリックしてアクティブにし、子オブジェクトを追加できるようにします。

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

    大半の UI 要素とは異なり、一部のレイアウト パネル (StackPanel や Grid など) には複数の子オブジェクトを含めることができます。この機能は、アプリケーション デザインを編成し、レイアウトするときに便利です。詳細については、「オブジェクトの配置」を参照してください。

  9. [ツール] パネルの [楕円]Cc295336.d7a04618-e35a-44f9-b78c-1f22e38016c1(JA-JP,Expression.30).png を選択し、アートボードにある [StackPanel] 内に円を描画します。次に、[ツール] パネルの [TextBox]Cc295336.343296b4-5c7d-4145-84cc-91b08ba67a1b(JA-JP,Expression.30).png を選択し、[StackPanel] 内にテキスト ボックスを描画します。親の [StackPanel] オブジェクトを水平方向に設定したので、これらの子オブジェクトは左から右に配置されます。子オブジェクト同士の間隔を広げるには、[プロパティ] パネルの [レイアウト] カテゴリで各オブジェクトの [Margin] プロパティを調整します。

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

    Cc295336.12af719b-02a4-4334-801d-9dedeebec030(JA-JP,Expression.30).png

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