atelier:mitsuba

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

Windows Phone 7 のはてなフォトライフビューワを作る (後編)その2ー画像の縦横比を崩さないー

次に、ImagePage.xamlで表示される画像の比率がおかしいので、それを直しましょう。

まず、オブジェクトパネルからimageを選択します。

次に共通プロパティを見てみましょう。
StretchがFillになっていますね。

Fillっていうのは、縦横比を保持せずにその領域を埋める設定ですね。
これをUniformに変更します。

Uniformは縦横比を維持しながら、領域に収まるようにコンテンツのサイズを変更するプロパティですね。

一応Uniformの最初のサイズが領域を超えないように制限をかけておきます。
Uniformだと収まるように変更してくれるはずですが、なぜか付けてました。
なくてもいいと思います。

最後にレイアウトを編集して、imageがContentPanelの真ん中に表示されるように設定します。
触るのはHorizonAlignmentとVerticalAlignmentを触ればいいですね。

これで、縦横比が崩れずに綺麗な画像が表示されるようになりますね。