アイテム コントロールの作成

  • [アーティクル]

このページは WPF および Silverlight 2 に適用されます

アイテム コントロールには、子要素のコレクションを含めることができる Items プロパティがあります。任意の種類の子要素をアイテム コレクションに追加したり、データ バインドを使用してデータ ソースからアイテムの配列を表示したりできます。アイテム コントロールには、コンテンツ プロパティとヘッダー プロパティはありません。子要素は、アイテム コントロールのアイテム ホストに追加されます。ListBox の場合、垂直方向に積み重ねてアイテムを配置するスタック パネルが "アイテム ホスト" になります。アイテム コントロールのテンプレートを編集していないと、Microsoft Expression Blend の [オブジェクトとタイムライン] にアイテム ホストは表示されません。

次の手順では、アイテム コントロール (ListBox) を作成し、このアイテム コレクションに要素を追加する方法について説明します。この手順は、MSDN の「ItemsControl 型」のトピックで「型」の項に記載されているアイテム コントロールで使用できます。データ ソースからの項目の配列を表示する場合は、「試してみよう : RSS ニュース リーダーの作成」を参照してください。

Cc294882.alert_note(ja-jp,Expression.10).gifメモ :

アイテム コントロールは Microsoft Silverlight 1.0 プロジェクトでは使用できません。ただし、[キャンバス] レイアウト パネルで TextBlock オブジェクトを重ね合わせた後、JavaScript イベントをフックすることで、アイテムの表示または非表示を制御できます。JavaScript の詳細については、Silverlight でのスクリプト作成とマウス イベントの説明 (英語の可能性あり) を参照してください。

アイテム コントロールを作成するには

  1. Expression Blend の左側にあるツールボックスの [アセット ライブラリ] Cc294882.0224cabd-5da1-4e01-bddd-4a647401a098(ja-jp,Expression.10).png ボタンをクリックします。[コントロール] タブで、[システム コントロール] をクリックし (まだ選択していない場合)、一覧の [ListBox] Cc294882.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(ja-jp,Expression.10).png をクリックします。[アセット ライブラリ] ボタンの上部に、ListBox コントロールのアイコンが選択された状態で表示され、アートボードに ListBox を追加できるようになります。

    Cc294882.alert_tip(ja-jp,Expression.10).gifヒント :

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

  2. アートボードにボタンを追加するには、ListBox コントロールの [ツールボックス] アイコンをダブルクリックします。

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

    Cc294882.cd6e2b8c-8640-474d-81b3-5c476113947a(ja-jp,Expression.10).png

    Cc294882.alert_tip(ja-jp,Expression.10).gifヒント :

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

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

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

    Cc294882.alert_tip(ja-jp,Expression.10).gifヒント :

    アートボードのオブジェクトをアクティブにする別の方法として、ツールボックスの [選択内容] Cc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.10).png ツールを選択してから、アートボードのオブジェクトをダブルクリックすることもできます。

  4. ツールボックスの TextBlock Cc294882.42165963-00f7-4a33-abcd-b0849edebada(ja-jp,Expression.10).png、Button Cc294882.05df1779-a68f-436b-b834-a91b7995a3ec(ja-jp,Expression.10).png、Rectangle Cc294882.ae750268-92e8-403a-9e07-b662da4e9e1e(ja-jp,Expression.10).png などの要素を使用して、ListBox 内にさまざまな形状を描画します。リスト ボックスには、これらの子要素が垂直方向に積み重なるように配置されます。

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

    Cc294882.926bd9e5-e1d9-47a3-a37a-33cd351984b4(ja-jp,Expression.10).png

    Cc294882.alert_note(ja-jp,Expression.10).gifメモ :

    アイテム コントロールのサイズに合わない数の要素を追加すると、アプリケーションの実行時にスクロール バーが表示されます。これにより、すべての要素を表示できます。
    Cc294882.alert_tip(ja-jp,Expression.10).gifヒント :

    [オブジェクトとタイムライン] でオブジェクトをドラッグ アンド ドロップして一覧内の要素の順序を変更したり、[選択内容] Cc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.10).png ツールを選択してアートボードに要素をドラッグしたりできます。

  5. ListBox のアイテムを表示したり、[コレクション エディタ] ウィンドウに他のアイテムを追加したりできます。[コレクション エディタ] を開くには、[プロパティ] パネルの [Items (コレクション)] プロパティの横にある [このコレクション内のアイテムを編集] Cc294882.180d50dc-77e2-4d23-a353-1822e9056f2f(ja-jp,Expression.10).png ボタンをクリックします。

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