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

  • [アーティクル]

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

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

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

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

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

    tip noteヒント :

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

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

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

    Cc295336.38211dc1-69d4-46bd-acd2-d7f9b48102bb(ja-jp,Expression.40).png

    tip noteヒント :

    アートボードにコントロールを追加するには、[ツール] パネルでコントロールを選択してアートボードをクリックし、マウスをドラッグしてコントロールの境界ボックスを描く方法もあります。
    tip noteヒント :

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

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

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

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

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

    Cc295336.fb639649-9e46-4aef-960f-d0b40e9e8aff(ja-jp,Expression.40).png

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

    tip noteヒント :

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

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

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

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

    tip noteヒント :

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

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

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

    Cc295336.12af719b-02a4-4334-801d-9dedeebec030(ja-jp,Expression.40).png

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

Copyright ©2011 by Microsoft Corporation. All rights reserved.