Add elements to the standard transport control

Question

I want to add a selector into the standard transport control of windows universal apps, so i can select the quality of a video.

I tried to modify the xaml where the standard controls are defined, but the control wasn't effected and the standard control is still dislplayed.

The MediaElement with the standard transport control:

<MediaElement AreTransportControlsEnabled="True">

</MediaElement>

Answer 1

Open Blend or on VS2015 click View->Other Windows-> Document Outline(ctrl+alt+T)

add MediaTransportControls in xaml

 <MediaTransportControls />

No go to Document Outline and right click on the MediaTransportControls -> Edit Template -> Edit Copy (I have a styles.xaml i choose to put it there, you can just click ok)

Now the Document Outline changes view to MediaTransportControls Template and you can change it to your likes. ex. I added a play/pause in the middle.

Doing this in Blend gives you better access, such as, to edit states.

After you done customizing you can add it in you MediaElement like this

 <MediaElement x:Name="mediaElement" AreTransportControlsEnabled="True" >
      <MediaElement.TransportControls>
             <MediaTransportControls Style="{StaticResource MediaTransportControlsStyle1}"/>
      </MediaElement.TransportControls>
</MediaElement>

Answer 2

Since you want to add a selector into the standard transport control and select the quality of a video, I think only editing the template is not enough.

To add to or modify the functionality of the transport controls, you must create a new class that's derived from MediaTransportControls.

To create a new class derived from MediaTransportControls:

1. Add a new class file to your project.
2. Modify the class code to derive from the MediaTransportControls class.
3. Copy the default style from MediaTransportControls styles and templates into a ResourceDictionary in your project. This is the style and template you modify.
4. Change the TargetType of the style to the new custom control type.
5. Set the DefaultStyleKey of your custom class.
6. Add a MediaElement to your XAML markup and add the custom transport controls to it.

For more information, please see Create custom transport controls and also the official Media transport controls sample in GitHub.