ホーム > Expression Blend > Windows Phone 7 のはてなフォトライフビューワを作る

Windows Phone 7 のはてなフォトライフビューワを作る (後編)

蜜葉 優@Silverlight Square[著], わにちゃん@ExpressionTech.jp[編集]
2011年3月12日 from Atelier:Mitsuba

その4-DataBindingをタイルっぽく-

サンプルデータをPanelにぽいっちょすると、ListBoxで一覧が表示されますよね。

今回はその辺のXAMLを編集して、タイルっぽく見せようと思います。

伊勢さんが用意してくれた最初の画面はこんなかんじですね。

f:id:c-mitsuba:20110312105529p:image

newPhotoListBox選択して右クリック、現在のテンプレートを編集を選択します。

すると、Bindingされたデータのレイアウトを編集することができます。

f:id:c-mitsuba:20110312105828p:image

まずは画像のサイズをそれっぽくしましょう。

200*200にして、StretchをUniformToFillにします。

f:id:c-mitsuba:20110312114142p:image

次にタイトルの位置を画像と重ねるように調整します。

スタックパネルでコントロールが縦積みになっているので、マージンで調整します。

今回は、Margin="5,-27,0,0"で調整してみました。

f:id:c-mitsuba:20110312134326p:image

この文字のOpacityを0.7にして、文字色をPhoneAccentColorにしてみました。

あとWidth="195"としておくと、タイトルが長すぎることはなくなります。

f:id:c-mitsuba:20110312151811p:image

あとはこれを包んでいるStackPanelにMargin="10"を入れておきます。

しかし、このままだと、画像が縦に並んでるだけで、WP7のタイルっぽくないですね。

次に画像を2列に並べてみましょう。

newPhotoListBoxを右クリックで選択して、ItemsPanelを選択します。

f:id:c-mitsuba:20110312153016p:image

次の画面はOKでいいでしょう。

f:id:c-mitsuba:20110312153125p:image

すると、オブジェクトパネルにStackPanelが置かれています。

f:id:c-mitsuba:20110312153827p:image

このStackPanelをtoolkitのWrapPanelに変えます。

直接XAMLをいじってもいいですし、StackPanelを削除してからWrapPanelをおいてもいいでしょう。

すると、2列になりますね。

f:id:c-mitsuba:20110312154924p:image

で、パネルをもう少し右に置きましょう。

HorizontalAlignmentをRightにします。

f:id:c-mitsuba:20110312155053p:image

で、ビルドしてみましょう。

どうでしょう?タイルっぽくなったんじゃないでしょうか?

f:id:c-mitsuba:20110312155907p:image

INDEX

コメント

▲このページのトップへ