ホーム > Expression Blend > 0からはじめるExpression Blend再入門

その15:Bindingで生成したItemをレイアウトしてみよう

0からはじめるExpression Blend再入門
蜜葉 優@Silverlight Square[著], わにちゃん@ExpressionTech.jp[編集]
2011年5月13日 from Atelier:Mitsuba

はじめに

その14ではSample Dataを使って、Data BindingしたListBoxを生成しました。

今回はその中身をレイアウトしましょう。

操作方法

  1. まずはこんなSapmle Dataを作って表示します。

    上から、Image、String(Lorem ipsum)、String(Price)ですね。
    f:id:c-mitsuba:20110429160339p:image
  2. 生成したListBoxを右クリックして、Eddit Additional Templates > Edit Generated Items > Edit Copyを選択します。
    f:id:c-mitsuba:20110429160338p:image
  3. ダイアログが出てくるのOK
    f:id:c-mitsuba:20110429160337p:image
  4. すると、オブジェクトパネルがListBoxの中身に変更されました。
    f:id:c-mitsuba:20110429160336p:image
  5. アートボードの上のパンくずも変化しています。

    つまり、いまは、ItemTemplateを編集する画面になってるってことですね。
    f:id:c-mitsuba:20110429160335p:image
  6. オブジェクトパネルからStackPanelを選択して、OrientationをHorizontalに変更します。
    f:id:c-mitsuba:20110429160332p:image
  7. すると、StackPanel以下のItemが横並びになりました。
    f:id:c-mitsuba:20110429160331p:image
  8. 次にTextBox2つを選択して右クリック、Group Into > StackPanelをクリックします。

    すると、TextBox2つが新しいStackPanelに包まれました。
    f:id:c-mitsuba:20110429160330p:image
  9. いま出来たStackPanelのOrientationをVerticalにします。
    f:id:c-mitsuba:20110429160400p:image
  10. 今度はテキストが縦に並びましたね。
    f:id:c-mitsuba:20110429160359p:image
  11. あとはTextBlockを右寄せにしたり、Widthを固定値にしたり、ListBoxのサイズを調整します。

    こんなかんじに出来上がりました。
    f:id:c-mitsuba:20110429160358p:image

次の記事

0からはじめるExpression Blend再入門』最新記事

コメント

▲このページのトップへ