次の方法で共有

アイテム コントロールの描画

  • [アーティクル]

アイテム コントロールには、子オブジェクトのコレクションを含む [Items] プロパティがあります。アイテムのコレクションに子オブジェクトを追加したり、オブジェクトをデータ ソースにあるデータにバインドして、アイテムの配列を表示したりできます。アイテム コントロールには、コンテンツ プロパティとヘッダー プロパティはありません。子オブジェクトは、アイテム コントロールのアイテム ホストに追加されます。たとえば、[ListBox] の場合は、アイテムを縦に並べて配置する Stack パネルがアイテム ホストになります。アイテム コントロールのテンプレートを編集するとき以外は、Microsoft Expression Blend の [オブジェクトとタイムライン] パネルにアイテム ホストは表示されません。

次に、アイテム コントロール (ListBox) を作成して、そのアイテム コレクションにオブジェクトを追加する方法を示します。この手順は、MSDN の「ItemsControl 型」の「型」一覧にある他のアイテム コントロールにも当てはまります。

データ ソースからアイテムの配列を表示する場合は、「試してみよう : RSS ニュース リーダーの作成」を参照してください。

詳細については、「StackPanel レイアウト パネルの使用」を参照してください。

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

  1. Expression Blend の左側にある [ツール] パネルで [アセット] Cc294882.0d8b8d29-1af9-418f-8741-be3097d76eab(JA-JP,Expression.30).png をクリックします。[コントロール] カテゴリの一覧から [ListBox] Cc294882.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(JA-JP,Expression.30).png を選択します。[アセット] ボタンの下に、[ListBox] コントロールのアイコンが選択された状態で表示され、アートボードに [ListBox] を追加できるようになります。

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

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

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

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

    Cc294882.cd6e2b8c-8640-474d-81b3-5c476113947a(JA-JP,Expression.30).png

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

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

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

  3. [オブジェクトとタイムライン] パネルで [ListBox] オブジェクトをクリックしてアクティブにします。オブジェクトに黄色い枠が付きます。オブジェクトをアクティブにしたら、子オブジェクトを追加できるようになります。

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

    [ツール] パネルの [選択内容] Cc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(JA-JP,Expression.30).png を選択してから、アートボードのオブジェクトをダブルクリックしても、オブジェクトがアクティブになります。

  4. [ツール] パネルにあるオブジェクト ([TextBlock]Cc294882.42165963-00f7-4a33-abcd-b0849edebada(JA-JP,Expression.30).png、[Button]Cc294882.05df1779-a68f-436b-b834-a91b7995a3ec(JA-JP,Expression.30).png、[Rectangle]Cc294882.ae750268-92e8-403a-9e07-b662da4e9e1e(JA-JP,Expression.30).png) を使用して、[ListBox] オブジェクト内に図形を描きます。これらの子オブジェクトが縦に並んで配置されることに注意してください。

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

    Cc294882.926bd9e5-e1d9-47a3-a37a-33cd351984b4(JA-JP,Expression.30).png

    Cc294882.alert_note(JA-JP,Expression.30).gifメモ :

    追加したオブジェクトがアイテム コントロールに入りきらない場合は、アプリケーションを実行したときにスクロール バーが表示され、隠れているオブジェクトを表示できるようになります。
    Cc294882.alert_tip(JA-JP,Expression.30).gifヒント :

    リストに表示されるオブジェクトの順序を変更するには、[オブジェクトとタイムライン] パネルでオブジェクトをドラッグ アンド ドロップするか、[選択内容] Cc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(JA-JP,Expression.30).png を選択し、アートボードのオブジェクトをドラッグします。

  5. ListBox のアイテムを表示したり、[コレクション エディター] ウィンドウに他のアイテムを追加したりできます。[コレクション エディター] を開くには、[プロパティ] パネルの [Items (Collection)] プロパティの横にある [このコレクション内のアイテムを編集] Cc294882.3f9fe48b-caf8-4989-8a91-017ba1e0cb77(JA-JP,Expression.30).png をクリックします。

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