#Windows10 – Working with Multiple Menus with #SurfaceDial in a UWP View


Today I follow the example of maps and Surface Dial in a UWP App. In today’s scenario, I will add a new functionality to the application with the map

  • Use the Surface Dial spin to control the map zoom
  • Use the Surface Dial spin to rotate the current view on the map
  • Disable Surface Dial Spin

In this case I have created 3 different menu items that can be selected using the click of the Surface Dial.


Each of these elements is added to the menu items collection associated with this view in the Surface Dial. The next step is to subscribe to the Invoked() event of each menu item. In each Invoke action I’ll change the working mode of the view. The code that implements this functionality is as follows

enum ControllerMode { Zoom, Rotate, Disable };
ControllerMode _controllerMode;
public MapPagePage()
_locationService = new LocationService();
Center = new Geopoint(_defaultPosition);
ZoomLevel = DefaultZoomLevel;
var controller = RadialController.CreateForCurrentView();
controller.RotationResolutionInDegrees = 0.2;
controller.UseAutomaticHapticFeedback = false;
var mapZoomItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Maps Zoom", "\xE128", "Segoe MDL2 Assets");
var mapRotationItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Map Rotation", "\xE128", "Segoe MDL2 Assets");
var disableDialItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Disable Dial", "\xE128", "Segoe MDL2 Assets");
mapZoomItem.Invoked += MapZoomItem_Invoked;
mapRotationItem.Invoked += MapRotationItem_Invoked;
disableDialItem.Invoked += DisableDialItem_Invoked;
controller.RotationChanged += ControllerRotationChangedAsync;
private void DisableDialItem_Invoked(RadialControllerMenuItem sender, object args)
_controllerMode = ControllerMode.Disable;
private void MapRotationItem_Invoked(RadialControllerMenuItem sender, object args)
_controllerMode = ControllerMode.Rotate;
private void MapZoomItem_Invoked(RadialControllerMenuItem sender, object args)
_controllerMode = ControllerMode.Zoom;
private async void ControllerRotationChangedAsync(RadialController sender, RadialControllerRotationChangedEventArgs args)
switch (_controllerMode)
case ControllerMode.Zoom:
mapControl.ZoomLevel = mapControl.ZoomLevel + args.RotationDeltaInDegrees;
case ControllerMode.Rotate:
await mapControl.TryRotateAsync(args.RotationDeltaInDegrees);
Debug.WriteLine($"No action!");

Happy Coding!

Source Code en GitHub

Greeting @ Toronto

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: