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

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

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

その3-ジェスチャーを実装しよう-

次に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を使います。

インストールしてない人はインストールしてください。

https://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;
        }
    }
}

これで、こんな風に画像が動かせるようになりましたね。

f:id:c-mitsuba:20110311223727j:image

今回のImagePage.xamlの編集は以上です。

次回からはMainPage.xamlを触っていきます。

INDEX

コメント

▲このページのトップへ