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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
El Bruno 
6 comments