眠るシーラカンスと水底のプログラマー

　GestureServiceはコントロールではないですが、ピンチやダブルタップといった操作を取得できる非常にありがたい機能です。

　画像の回転、拡大縮小などを簡単に実現できます。

導入

　GestureServiceの使い方もこれまでのコントロールと同様に「参照の追加」「xmlnsの追加」です。

　参照の追加

NuGetで楽々追加だ

　ｘｍｌnsの追加

   xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

画像にGesture効果を付ける場合

            <Image Source="/GestureServiceSample;component/search_result_bg.png" Name="image1">
                <Image.RenderTransform>
                    <CompositeTransform x:Name="ImageTransformation" />
                </Image.RenderTransform>
                <toolkit:GestureService.GestureListener>
                    <toolkit:GestureListener
                        DoubleTap="GestureListener_DoubleTap"
                        Flick="GestureListener_Flick"
                        PinchStarted="GestureListener_PinchStarted"
                        PinchDelta="GestureListener_PinchDelta"
                        DragDelta="GestureListener_DragDelta"
                    />
                </toolkit:GestureService.GestureListener>
            </Image>

XAMLコードに対応したコードビハインドは以下、

        /// <summary>
        /// ダブルタップを取得(コンソールに書き出すだけで何もしない)
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void GestureListener_DoubleTap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
        {
            System.Diagnostics.Debug.WriteLine("GestureListener_DoubleTap");
        }

        /// <summary>
        /// フリックを取得(コンソールに書き出すだけで何もしない)
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
        {
            System.Diagnostics.Debug.WriteLine("GestureListener_Flick");
        }

        /// <summary>
        /// ピンチ開始
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void GestureListener_PinchStarted(object sender, PinchStartedGestureEventArgs e)
        {
            System.Diagnostics.Debug.WriteLine("GestureListener_PinchStarted");

            _initialAngle = ImageTransformation.Rotation;
            _initialScale = ImageTransformation.ScaleX;

            Point firstTouch = e.GetPosition(image1, 0);
            Point secondTouch = e.GetPosition(image1, 1);

            Point center = new Point(firstTouch.X + (secondTouch.X - firstTouch.X) / 2.0,
                                        firstTouch.Y + (secondTouch.Y - firstTouch.Y) / 2.0);

            ImageTransformation.CenterX = center.X;
            ImageTransformation.CenterY = center.Y;
        }

        /// <summary>
        /// ピンチ操作中　操作に合わせて回転させる
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void GestureListener_PinchDelta(object sender, PinchGestureEventArgs e)
        {
            System.Diagnostics.Debug.WriteLine("GestureListener_PinchDelta");

            ImageTransformation.Rotation = _initialAngle + e.TotalAngleDelta;
            ImageTransformation.ScaleX = _initialScale * e.DistanceRatio;
            ImageTransformation.ScaleY = ImageTransformation.ScaleX;
        }

        /// <summary>
        /// ドラッグ中　移動させる
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
        {
            System.Diagnostics.Debug.WriteLine("GestureListener_DragDelta");

            ImageTransformation.TranslateX += e.HorizontalChange;
            ImageTransformation.TranslateY += e.VerticalChange;
        }

　動きはサンプルを動かしてみると良いと思います。

　サンプルをダウンロードする(SDK7.1)

これまでの記事を読む

Tweet