コンテンツ コントロールの作成

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

次に、コンテンツ コントロール (Button) を作成し、そのコンテンツ プロパティをレイアウト パネル (StackPanel) に設定する手順を説明します。この手順は、MSDN の「ContentControl 型」のトピックで「型」のセクションに記載されている他のコンテンツ コントロールでも使用できます。

メモ :
コンテンツ コントロールは Microsoft Silverlight 1.0 プロジェクトでは使用できません。ただし、[Canvas] レイアウト パネル内のオブジェクトを重ねて TextBlock オブジェクトを一番上にし、JavaScript イベント ハンドラをフックして、Canvas 要素をボタンなどのコンテンツ コントロールと同様に動作させることができます。例については、「Silverlight アプリケーションのストーリーボードを制御するボタンの作成」を参照してください。

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

1. Microsoft Expression Blend の左側に表示されるツールボックスで、[アセット ライブラリ]  ボタンをクリックします。[コントロール] タブで [システム コントロール] をクリックし (選択されていない場合)、リスト内の Button  をクリックします。

   [アセット ライブラリ] ボタンの上に Button コントロールのアイコンが表示されます。このアイコンは、アートボードに Button を追加しやすいように、選択された状態で表示されます。

   ヒント :
   最も一般的なユーザー インターフェイス (UI) 要素 (Button コントロールなど) は [アセット ライブラリ] ボタンの上のドロップダウン リストに表示されているため、すぐに追加できます。

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

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

   

   ヒント :
   アートボードにコントロールを追加する別の方法として、ツールボックスでコントロールを選択し、アートボードをクリックして、マウスをドラッグしながらコントロールの境界ボックスを指定することもできます。

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

3. [オブジェクトとタイムライン] で Button オブジェクトをダブルクリックすると、アクティブな要素になります。アクティブな要素は、周囲が黄色でハイライトされます。オブジェクトをアクティブにすると、子要素を追加できるようになります。

   ヒント :
   アートボードのオブジェクトをアクティブにする別の方法として、ツールボックスの [選択内容] ツールを選択してから、アートボードのオブジェクトをダブルクリックすることもできます。

4. [アセット ライブラリ] または共通コントロールのいずれかのドロップダウン リストを使用して、ツールボックスで StackPanel コントロールを選択します。StackPanel コントロールのアイコンをダブルクリックすると、このコントロールがアクティブなボタン内に子要素として追加されます。

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

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

   

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

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

6. [オブジェクトとタイムライン] で [StackPanel] を選択したままの状態で、[プロパティ] パネルの [レイアウト] カテゴリにある Orientation プロパティを Horizontal に設定します。これにより、StackPanel の子要素が水平方向に配置されるようになります。このプロパティを変更しても、アイテムを StackPanel に追加しない限り、アートボードに表示される StackPanel は一切変化しません。

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

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

8. ツールボックスから楕円 ツールを選択し、アートボード上の StackPanel 内に円を描画します。次に、ツールボックスから TextBox コントロールを選択し、StackPanel 内にテキスト ボックスを描画します。親の StackPanel を水平方向に設定したため、これらの子要素は左から右に並べて配置されます。子要素間の間隔を広げるには、[プロパティ] パネルの [レイアウト] カテゴリで各要素の Margin プロパティを調整します。

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

   

9. プロジェクトをビルドし (F5 キー)、生成されたアプリケーションを確認します。