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


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()
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.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)

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



Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: