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
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
| readonly RadialController _controller; | |
| public MediaPlayerPagePage() | |
| { | |
| InitializeComponent(); | |
| mpe.PosterSource = new BitmapImage(new Uri(DefaultPoster)); | |
| mpe.Source = MediaSource.CreateFromUri(new Uri(DefaultSource)); | |
| _controller = RadialController.CreateForCurrentView(); | |
| _controller.RotationResolutionInDegrees = 5; | |
| _controller.UseAutomaticHapticFeedback = false; | |
| var myItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Playback", "\xE714", "Segoe MDL2 Assets"); | |
| _controller.Menu.Items.Add(myItem); | |
| _controller.ButtonClicked += ControllerButtonClicked; | |
| _controller.RotationChanged += ControllerRotationChanged; | |
| } | |
| private void ControllerRotationChanged(RadialController sender, RadialControllerRotationChangedEventArgs args) | |
| { | |
| mpe.MediaPlayer.Position = mpe.MediaPlayer.Position + TimeSpan.FromSeconds(args.RotationDeltaInDegrees); | |
| } | |
| private void ControllerButtonClicked(RadialController sender, RadialControllerButtonClickedEventArgs args) | |
| { | |
| if (mpe.MediaPlayer.CurrentState == MediaPlayerState.Playing) | |
| { | |
| mpe.MediaPlayer.Pause(); | |
| } | |
| else | |
| { | |
| mpe.MediaPlayer.Play(); | |
| } | |
| } |
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
El Bruno 
10 comments