atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

Windows Phone 7 のはてなフォトライフビューワを作る (後編)その4ーDataBindingをタイルっぽく

サンプルデータをPanelにぽいっちょすると、ListBoxで一覧が表示されますよね。
今回はその辺のXAMLを編集して、タイルっぽく見せようと思います。
伊勢さんが用意してくれた最初の画面はこんなかんじですね。

newPhotoListBox選択して右クリック、現在のテンプレートを編集を選択します。
すると、Bindingされたデータのレイアウトを編集することができます。

まずは画像のサイズをそれっぽくしましょう。
200*200にして、StretchをUniformToFillにします。

次にタイトルの位置を画像と重ねるように調整します。
スタックパネルでコントロールが縦積みになっているので、マージンで調整します。
今回は、Margin="5,-27,0,0"で調整してみました。

この文字のOpacityを0.7にして、文字色をPhoneAccentColorにしてみました。
あとWidth="195"としておくと、タイトルが長すぎることはなくなります。

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

しかし、このままだと、画像が縦に並んでるだけで、WP7のタイルっぽくないですね。
次に画像を2列に並べてみましょう。
newPhotoListBoxを右クリックで選択して、ItemsPanelを選択します。

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

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

このStackPanelをtoolkitのWrapPanelに変えます。
直接XAMLをいじってもいいですし、StackPanelを削除してからWrapPanelをおいてもいいでしょう。
すると、2列になりますね。

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

で、ビルドしてみましょう。
どうでしょう?タイルっぽくなったんじゃないでしょうか?