#Windows10 – Controlling a MediaPlayer Element with #SurfaceDial in a Windows Store App

Hello!

Following yesterday’s example on how to use the new Surface Dial in a Windows Store App, today I’ll share how to integrate some of this device capabilities into a page with a Media Player Element.

I have not put down much of imagination for this example, I just want to have 2 basic features to cover with Surface Dial

• Using the dial rotation, control the position of the video I am playing
• With the click of the dial, pause or resume the video playback

And as in the previous example, I have to record an action that is triggered from a Surface Dial menu.

Bonus: I’ve seen that there is another way to create the action buttons on the dial.
For this I use the source type [Segoe MDL2 Assets], and with the value of a char, I define the icon to use.

I’ll use this code to cover the 2 features and the new way to create a menu item in the Surface Dial Studio circle menu

In the previous piece of code, we can see As you can see in the same

• 10 to 17, menu creation and subscription to click events and rotation.
• 21, change position of the video player using the rotation delta that gives us the RotationChanged () event of the Surface Dial
• 26 to 36, in the click of the dial, pause or resume of the video depending on the state of the same

Happy Coding!

Source Code at GitHub

Greetings @ Toronto

El Bruno

References

• 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