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

次に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;
        }
    }
}