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

  • [アーティクル]

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

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

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

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

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

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

    tip noteヒント :

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

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

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

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

    tip noteヒント :

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

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

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

    tip noteヒント :

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

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

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

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

    Noteメモ :

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

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

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

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

Copyright ©2011 by Microsoft Corporation. All rights reserved.