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

elbruno EnglishPost, Surface Dial, Visual Studio 2017, Windows 10 17 Oct 201716 Oct 2017 1 Minute

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

Published 17 Oct 201716 Oct 2017

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

4 thoughts on “#Windows10 – Working with Multiple Menus with #SurfaceDial in a UWP View”

Leave a Reply Cancel reply

Share this:

Like this:

Related

4 thoughts on “#Windows10 – Working with Multiple Menus with #SurfaceDial in a UWP View”

Leave a Reply Cancel reply