Real-time rotation of the Windows Phone 8 Map Control

Jump to: navigation, search

This article explains how to rotate the Windows Phone 8 Map Control object real-time. The provided solution uses the Touch class to react on FrameReported events. It also shows a relatively simple way to test multi touch behavior using the Windows Phone 8 emulator.

Note: This is an "internal" entry in the Windows Phone 8 Wiki Competition 2012Q4. The author is a Nokia / Microsoft employee.

Motivation

Windows Phone 8 comes with a new Maps framework, and provides extended functionality compared to the Windows Phone 7.1 Maps components. One of these new features is that the developer can set the "Heading" property of the Map control. This property is described on the Maps and navigation for Windows Phone 8 page as: This parameter specifies the directional heading that is pointing “up” on the map. It is represented in geometric degrees by a value that is between 0 and 360, indicating the number of degrees to rotate the map.

Preparation

New features in Windows Phone 8 Maps API

Here are just a few new features for the Location framework I found interesting:

Improved ability for one-shot location acquisition
Map control, Map tasks can make use of the downloaded offline maps (no data connection required)
Background task support for location tracking applications

Tip: For a comprehensive introduction to the new capabilities of the Location API, watch this excellent video from channel 9.

Since these features are covered quite well in various tutorials in the internet, in this article I will concentrate only on the map view setting feature.

How to test multi touch in the emulator

But before we could start to work on our problem, we have to come over an obstacle: what if you (like me) doesn't have the hardware to test multi touch events on a real device. Luckily there is help on the internet. The Multi-Touch Vista project on codeplex provides a Windows service which emulates a touch screen, with multiple touch points (at least if you happen to have at least 2 pointing devices).

To install this service, follow the steps from the download page.

Note The driver worked for me correctly only when I installed it as a Windows service. Make sure to block the native Windows mouse input in the configuration utility (Multitouch.Configuration.WPF.exe)

The multi touch service installed as Windows service.

The configuration tool with the blocking native mouse option. The red dots represent my two usb mice connected to the computer.

How the easy way should look like...

At this point we are ready to implement our Windows Phone app with multi-touch. For this, I have created a basic sample app, following the instructions from the How to handle manipulation events for Windows Phone msdn page.

The idea was simple, I assign a RotateTransform object to my rectangle, and catch the PinchManipulation event's contact points' location. When the event starts (i.e. two fingers touch the display), I save the initial points as the base line, then on every manipulation delta, I compute the angle between the original line and the current line.

Initialization:

        public MainPage()
        {
            InitializeComponent();
 
            this.ManipulationDelta += this.PhoneApplicationPage_ManipulationDelta;
            this.ManipulationCompleted += this.PhoneApplicationPage_ManipulationCompleted;
 
            TransformGroup transformGroup = new TransformGroup();
            this.rotate = new RotateTransform();
 
            transformGroup.Children.Add(this.rotate);
            rectangle.RenderTransform = transformGroup;
        }

The manipulation handler methods:

        private void PhoneApplicationPage_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
        {
            lastAngle = this.rotate.Angle;
        }
 
        void PhoneApplicationPage_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            if (e.PinchManipulation != null)
            {
                double angle = angleBetween2Lines(e.PinchManipulation.Original, e.PinchManipulation.Current);
                this.rotate.Angle = lastAngle-angle;
            }
        }

I store the last angle in a separate field, in order to know where to start from when the user decides to rotate the object once again. Otherwise it would always "jump" back to its original position, because initially the difference between the base and current lines is 0.

Finally, the method to calculate the angle between the point sets (the formula can be found on the internet):

        public static double angleBetween2Lines(PinchContactPoints line1, PinchContactPoints line2)
        {
            if (line1 != null && line2 != null)
            {
                double angle1 = Math.Atan2(line1.PrimaryContact.Y - line1.SecondaryContact.Y,
                                           line1.PrimaryContact.X - line1.SecondaryContact.X);
                double angle2 = Math.Atan2(line2.PrimaryContact.Y - line2.SecondaryContact.Y,
                                           line2.PrimaryContact.X - line2.SecondaryContact.X);
                return (angle1 - angle2) * 180 / Math.PI;
            }
            else { return Double.NaN; }
        }

With these changes, I am able to rotate my rectangle by "pinching" the emulator display:

Tip: This simple method can be applied to any type of UIElement objects supporting Manipulation events. Try out to move the name tag to the "page name" text's object in the xaml code. The rotation will be applied on this text without any modification in the C# code.

Unfortunately, this method can't be applied to the Map Control object. I guess the manipulation is marked as completed as soon as the zoom value is calculated and set. So to achieve my goal, I needed to dig a bit deeper...