2011-03-12

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

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

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

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

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

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

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

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

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

2011-03-12

Windows Phone 7 のはてなフォトライフビューワを作る (後編)その３ージェスチャーを実装しようー

Silverlight WindowsPhone7

次にImagePage.xamlのimageをジェスチャーに対応させましょう。

現在のImageコントロールはこんな感じだと思います。

ImagePage.xaml

<Image HorizontalAlignment="Center" x:Name="image" VerticalAlignment="Center" MaxWidth="456" RenderTransformOrigin="0.5,0.5" />

これを拡張します。
ジェスチャーに対応するには Silverlight toolkit for windowsphoneを使います。
インストールしてない人はインストールしてください。
http://silverlight.codeplex.com/releases/view/60291
インストールできたら、dllを参照してください。

次にimageコントロールにプロパティを追記します。
ここはBlendのプロパティタブにはないので、手書きになります。

        	<Image HorizontalAlignment="Center" x:Name="image" VerticalAlignment="Center" MaxWidth="456" RenderTransformOrigin="0.5,0.5">
        		<Image.Projection>
        			<PlaneProjection/>
        		</Image.Projection>
        		<Image.RenderTransform>
        			<CompositeTransform x:Name="transform"/>
        		</Image.RenderTransform>
        		<toolkit:GestureService.GestureListener>
        			<toolkit:GestureListener 
        				Hold="OnHold" DoubleTap="OnDoubleTap"
        				DragDelta="OnDragDelta"
        				PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta"/>
        		</toolkit:GestureService.GestureListener>
        	</Image>

解説です。
ジェスチャーで、画像の回転やサイズの変更を行うので、まずその下準備をしてやる必要があります。
それが以下ですね。 x:Name="transform"を書いているのは、あとでここをC#から呼んでくるので名前をつけています。

        		<Image.Projection>
        			<PlaneProjection/>
        		</Image.Projection>
        		<Image.RenderTransform>
        			<CompositeTransform x:Name="transform"/>
        		</Image.RenderTransform>

で、下のGesturelListenerが実際にジェスチャーのイベントを取得してるところですね。
ジェスチャの動作名="イベント名"でメソッドが走る仕組みになっています。
楽ですねぇ。

        		<toolkit:GestureService.GestureListener>
        			<toolkit:GestureListener 
        				Hold="OnHold" DoubleTap="OnDoubleTap"
        				DragDelta="OnDragDelta"
        				PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta"/>
        		</toolkit:GestureService.GestureListener>

では、今度はそのメソッドを書いていきましょう
ImagePage.xaml.csですね。
ごそっと載せてみます。
解説は/**/でコード内に書いていきます。

ImagePage.xaml.c

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Media.Imaging;

namespace FotolifeView
{
    public partial class ImagePage : PhoneApplicationPage
    {

       // double initialAngle;
        double initialScale;

        public ImagePage()
        {
            InitializeComponent();
        }

        /*ダブルタップすると、画像を初期位置初期サイズに戻します。*/
        private void OnDoubleTap(object sender, GestureEventArgs e)
        {
            transform.ScaleX = transform.ScaleY = 1;
            transform.TranslateX = transform.TranslateY = 0;
        }

        private void OnHold(object sender, GestureEventArgs e)
        {
            transform.TranslateX = transform.TranslateY = 0;
            transform.ScaleX = transform.ScaleY = 1;
            transform.Rotation = 0;
        }

        /*ドラッグで画像を移動させています。*/
        private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
        {
            transform.TranslateX += e.HorizontalChange;
            transform.TranslateY += e.VerticalChange;
        }

        /*ピンチアウトする前にサイズを保存しておきます、コメントアウトを外すと回転もできます。*/
        private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
        {
            //initialAngle = transform.Rotation;
            initialScale = transform.ScaleX;
        }

        /*ピンチアウト中ですね、倍率を見て拡大しています。コメントアウトを外すと回転もできます。*/
        private void OnPinchDelta(object sender, PinchGestureEventArgs e)
        {
            //transform.Rotation = initialAngle + e.TotalAngleDelta;
            transform.ScaleX = transform.ScaleY = initialScale * e.DistanceRatio;
        }
    }
}