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”