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

Hello!

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;
	InitializeComponent();

	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");
	controller.Menu.Items.Add(mapZoomItem);
	controller.Menu.Items.Add(mapRotationItem);
	controller.Menu.Items.Add(disableDialItem);

	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)
	{
	Debug.WriteLine($"{args.RotationDeltaInDegrees}");
	switch (_controllerMode)
	{
	case ControllerMode.Zoom:
	mapControl.ZoomLevel = mapControl.ZoomLevel + args.RotationDeltaInDegrees;
	break;
	case ControllerMode.Rotate:
	await mapControl.TryRotateAsync(args.RotationDeltaInDegrees);
	break;
	default:
	Debug.WriteLine($"No action!");
	break;
	}
	}

view raw

SurfaceDialMenuItems.cs

hosted with ❤ by GitHub

Happy Coding!

Source Code en GitHub

Greeting @ Toronto

El Bruno

References

El Bruno, Rotating maps with C# and Surface Dial in UWP Apps
El Bruno, 2 lines of C# code to handle maps using a Surface Dial
El Bruno, Controlling a Media Player Element with Surface Dial in a Windows Store App
El Bruno, Kind of a Hello World with a Surface Dial in a Windows Store App
Windows Dev Center, Surface Dial Interactions
Canadian Developer Connection, Developing for Surface Dial
Visual Studio MarketPlace, Windows Template Studio

4 comments

Pingback: #Windows10 – Personalizando los elementos del menú por defecto en #SurfaceDial – El Bruno
Pingback: #Windows10 – Customizing the default menu items in #SurfaceDial – El Bruno
Pingback: #Windows10 – Deshabilitar el menú de #SurfaceDial en una UWP App – El Bruno
Pingback: #Windows10 – Disable the #SurfaceDial global menu in a UWP App – El Bruno

Share this:

Like this:

Related

4 comments

Leave a comment Cancel reply