UWP including mediaplayer transport bar as part of commandbar?

Question

I am trying to create a custom media transport controls for a mediaplayer application where I could add my own buttons and functionality. The only thing I would need from the standard MediaTransportControl is the SeekBar.

I've tried fiddling around with the dictionary its way too complicated for the benefit I'm trying to achieve. Is there a simple way to do this or should I just give up?

Thanks!

Answer 1

Ok, got it!

Here is the recipe:

1. Add a separate XAML file to hold the Resource Dictionary for the new transport bar. Copy in it the file from the CustomMediaTransport sample. Make sure you change the x:local = "using:..." to your own namespace for your project.

2. Add the buttons that you want in the CommandBar section of the XAML code (you will see the other commandbar buttons there. The format for your custom command bar button is:

     <AppBarButton x:Name='Plus500Button'
             Label="Very Long Skip Forward"
             VerticalAlignment="Center"
             Style='{StaticResource AppBarButtonStyle}'>
         <AppBarButton.Icon>
             <BitmapIcon UriSource="put in here the asset for your button icon"/>
         </AppBarButton.Icon>
     </AppBarButton>
   

3. Add the code for the new buttons in a separate CS file. Replace yournamespace with your solution's name space.

   namespace yournamespace
   {
   
   public sealed class CustomMediaTransportControls : MediaTransportControls
   {
   
   //Add an eventhandler for each button you added
   public event EventHandler<EventArgs> Plus500;
   
   public CustomMediaTransportControls()
   {
       this.DefaultStyleKey = typeof(CustomMediaTransportControls);
   }
   
   
   //Add an override for each button you created in the following format:
   protected override void OnApplyTemplate()
   {
       Button Plus500Button = GetTemplateChild("Plus500Button") as Button;
       Plus500Button.Click += Plus500Button_Click;
   }
   
   //To raise an event when the button is clicked, add the following code for each button you added:
   private void Plus500B_Click(object sender, RoutedEventArgs e)
   {            
       Plus500?.Invoke(this, EventArgs.Empty);
   }
   

And finally, use the new customized transport bar in the following way in your XAML code:

    <MediaPlayerElement x:Name="mediaPlayerElement" 
                                Grid.ColumnSpan="2" 
                                Grid.RowSpan="4" 
                                AutoPlay="True"  
                                AreTransportControlsEnabled="True"             
         <MediaPlayerElement.TransportControls >
            <local:CustomMediaTransportControls IsCompact="False"
                                       IsPlaybackRateButtonVisible="True"
                                       IsEnabled="True"
                                       Plus500="Plus500"   <!-- Use the name you added in the EventHandler you added for the cuscom command bar

            </local:CustomMediaTransportControls>
        </MediaPlayerElement.TransportControls>

And voilà! Bob is your mother's brother!

Answer 2

All right..... I fiddled for hours with this. I have read the above link from touseefbsb and have read line by line the CustomMediaTransportControl sample.

I have created a dictionary and copied the dictionary from the sample word for word:

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MultiVid">

<!--This is the style for a custom Media Transport Control. We are taking the default control and simply tweaking it to fit our needs.
The default template can be found here: C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10069.0\Generic
Simply take the portion of code that corresponds to the MediaTransportControl and bring it in to your app just like we have done in this sample-->

<Style TargetType="local:CustomMediaTransportControls">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="FlowDirection" Value="LeftToRight" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="IsTextScaleFactorEnabled" Value="False" />
    <Setter Property="Template">

  ----- etc..... it's a long file but it's the exact copy of the "generic.xaml" file of the Sample except for the beginning where I used xmlns:local="using:MultiVid" as my solution is called MultiVid.

    </Style>
   </ResourceDictionary>

And then, I created the Class, as per the tutorial:

namespace MultiVid
{
public sealed class CustomMediaTransportControls : MediaTransportControls
{
    public event EventHandler<EventArgs> Moins10click;

    public CustomMediaTransportControls()
    {
        this.DefaultStyleKey = typeof(CustomMediaTransportControls);
    }

    protected override void OnApplyTemplate()
    {
        // Find the custom button and create an event handler for its Click event.
        var Moins10Button = GetTemplateChild("Moins10") as Button;
        Moins10Button.Click += Moins10Button_Click;
        base.OnApplyTemplate();

    }

    private void Moins10Button_Click(object sender, RoutedEventArgs e)
    {
        var handler = Moins10click;
        if (handler != null)
    {
        handler(this, EventArgs.Empty);
    }
    }
}
}

And finally my MainPage Xaml:

<Page
x:Class="MultiVid.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="using:MultiVid"
mc:Ignorable="d"
Loaded="initkbd"
Unloaded="unloadkbd">

 <Grid x:Name="imggrid" Background="Black" BorderBrush="Black" >

    <MediaPlayerElement x:Name="mediaPlayerElement" AutoPlay="True" Height="Auto" Width="Auto" AreTransportControlsEnabled="True" RequestedTheme="Dark" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <MediaPlayerElement.TransportControls>
            <local:CustomMediaTransportControls IsCompact="False"
                                                IsZoomButtonVisible="True"
                                                IsZoomEnabled="True"
                                                IsPlaybackRateButtonVisible="True"
                                       IsEnabled="True">
            </local:CustomMediaTransportControls>
        </MediaPlayerElement.TransportControls>
    </MediaPlayerElement>

</Grid>


</Page>

When I use this code above with my C# code, I see no TransportControl at all. If I comment out the section, I see the Transport Control.

After 5 hours, I still don't get it... Mayday anyone!

Answer 3

There are 2 ways to add custom functionality to controls of your media player.

1. Custom Transport Controls : Where you can edit the style of the template, or add extra buttons and add functionality to them, you can also remove the existing buttons or collapse them if you dont want them. You can even set visibility of some buttons directly from transport controls without going into style with properties like IsZoomButtonVisible etc.

2. Dont use the built in transport controls of the sdk and set AreTransportControlsEnabled of your MediaPlayerElement control to false and then create your own user control to control the media, which is actually harder specially if your are a beginner.

I will recommend you the first option, just go step by step follow the docs, once you understand the basics of how this all come together and work together you will be able to easily add a lot of custom buttons to your control. you dont need to mess with the styling, just add the buttons to the command bar of the style and then add a click handler to it, its all documented in the link I provided you above, try it step by step and where you have problem, keep asking quality questions here.