Hello!
In order to talk a little about how to create advanced menus for the Surface Dial, I will resume my view with a map and add an extra feature to this view:
- Use the Surface Dial spin to control the map zoom
- Use the Surface Dial spin to rotate the current view on the map
The first example I mentioned in the previous post, today I will show the 2nd functionality.
The code to make this work is very simple. It is based on the following steps
- To provide the 2 features with the Surface Dial, click on the dial, change the mode from Zoom to Rotate and again zoom
- In the RotationChanged () event, the working mode is verified and changes are applied to the map
Very simple.
enum ControllerMode { zoom, rotate }; | |
ControllerMode _controllerMode; | |
readonly RadialController _controller; | |
public MapPagePage() | |
{ | |
locationService = new LocationService(); | |
Center = new Geopoint(defaultPosition); | |
ZoomLevel = DefaultZoomLevel; | |
InitializeComponent(); | |
_controller = RadialController.CreateForCurrentView(); | |
_controller.RotationResolutionInDegrees = 0.2; | |
_controller.UseAutomaticHapticFeedback = false; | |
var myItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Maps", "\xE128", "Segoe MDL2 Assets"); | |
_controller.Menu.Items.Add(myItem); | |
_controller.ButtonClicked += ControllerButtonClicked; | |
_controller.RotationChanged += ControllerRotationChangedAsync; | |
} | |
private async void ControllerRotationChangedAsync(RadialController sender, RadialControllerRotationChangedEventArgs args) | |
{ | |
Debug.WriteLine($"{args.RotationDeltaInDegrees}"); | |
if (_controllerMode == ControllerMode.zoom) | |
mapControl.ZoomLevel = mapControl.ZoomLevel + args.RotationDeltaInDegrees; | |
else | |
await mapControl.TryRotateAsync(args.RotationDeltaInDegrees); | |
} | |
private void ControllerButtonClicked(RadialController sender, RadialControllerButtonClickedEventArgs args) | |
{ | |
if (_controllerMode == ControllerMode.rotate) | |
_controllerMode = ControllerMode.zoom; | |
else | |
_controllerMode = ControllerMode.rotate; | |
} |
In the next post, a little about how to work with the menu offered by the Surface Dial.
Happy Coding!
Source Code GitHub
Greetings @ Toronto
El Bruno
References
- 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
6 thoughts on “#Windows10 – Rotating maps with C# and #SurfaceDial in UWP Apps”