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
| 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
10 thoughts on “#Windows10 – Controlling a MediaPlayer Element with #SurfaceDial in a Windows Store App”