#Windows10 – 2 lines of C# code to handle maps using a #SurfaceDial


Today’s post will also describe an scenario on how to use a Surface Dial in a UWP App. In this case, in a view with a Map control. The first scenario to work is simple, control the zoom of the map display with the spin of the Surface Dial. Something similar to the following animation


2017 10 11 SurfaceDial Maps 03

As in the previous example, to create the map menu button I used a char based on the [Segoe MDL2 Assets] font. In the RotationChanged() event, I change the zoom value of the map using the spin change of the Surface Dial

readonly RadialController _controller;
public MapPagePage()
locationService = new LocationService();
Center = new Geopoint(defaultPosition);
ZoomLevel = DefaultZoomLevel;
_controller = RadialController.CreateForCurrentView();
_controller.RotationResolutionInDegrees = 0.2;
_controller.UseAutomaticHapticFeedback = false;
var myItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Maps", "\xE128", "Segoe MDL2 Assets" );
_controller.ButtonClicked += ControllerButtonClicked;
_controller.RotationChanged += ControllerRotationChanged;
private void ControllerRotationChanged(RadialController sender, RadialControllerRotationChangedEventArgs args)
Debug.WriteLine($"{mapControl.ZoomLevel} – {args.RotationDeltaInDegrees}");
mapControl.ZoomLevel = mapControl.ZoomLevel + args.RotationDeltaInDegrees;

In the animation we can see how the Output window displays the change of the zoom value and the delta that is passed from the dial in each event. It is important to remember that if we turn the Surface Dial quickly, an event will not be triggered for each degree of rotation but an event where the delta value of the change of spin is greater.

That’s why it’s important to understand the definition in line 11, where I define that the value passed in the RotationChanged() event is 0.2. If we need another type of scale, the property RotationResolutionInDegrees is the one that will allow us to change this value.

Happy Coding!

Source Code GitHub

Greetings @ Burlington

El Bruno



Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: