How to create event for custom transport controls

Question

I am creating a custom transport controls. In it, I have added a new button with MenuFlyout to change the quality of the video. So how do I create an event which occurs when a particular MenuFlyoutItem is clicked.

For example:
If I use

<MediaPlayerElement  Name="YoutubePlayer" MaxWidth="640" MaxHeight="360" AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <QualityTransportControls x:Name="CustomMediaControl" QualityChanged="CustomMediaControl_QualityChanged"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

in XAML, It should call CustomMediaControl_QualityChanged whenever I change the Quality. It can be done using

public event EventHandler QualityChanged
{
    add{}
    remove{}
}

but I don't know what to be added in ' add ' and ' remove '

Here is my code for the custom button.

<AppBarButton x:Name='QualityButton'
    Style='{StaticResource AppBarButtonStyle}'
    MediaTransportControlsHelper.DropoutOrder='3'>
    <AppBarButton.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem x:Name="Quality144p" Text="144p"/>
            <MenuFlyoutItem x:Name="Quality240p" Text="240p"/>
            <MenuFlyoutItem x:Name="Quality360p" Text="360p"/>
            <MenuFlyoutItem x:Name="Quality480p" Text="480p"/>
            <MenuFlyoutItem x:Name="Quality720p" Text="720p"/>
            <MenuFlyoutItem x:Name="Quality1080p" Text="1080p"/>
        </MenuFlyout>
    </AppBarButton.Flyout>
    <AppBarButton.Icon>
        <SymbolIcon x:Name='QualitySymbol' Symbol='Setting' />
    </AppBarButton.Icon>
</AppBarButton>

Answer 1

This solution worked for me:

In your ResourceDictionary you add the default style of a MediaTransportControls.
(This can be found here: C:\Program Files (x86)\Windows Kits\10\DesignTime\ CommonConfiguration\Neutral\UAP*your_version_Number*\Generic,
Than simply copy and paste the whole
<Style TargetType="MediaTransportControls"> ... </Style> tag which can be found at about line 16350)

Change the first line from <Style TargetType="MediaTransportControls"> to for example <Style TargetType="QualityTransportControls">to target your control.

You need to add your xaml code of your control to the ResourceDictionary for example after the AudioTracksSelectionButton (that depends on where you want your control to appear).

<AppBarButton x:Name='AudioTracksSelectionButton'
              Style='{StaticResource AppBarButtonStyle}'
              MediaTransportControlsHelper.DropoutOrder='13'
              Visibility='Collapsed'>
    <AppBarButton.Icon>
        <FontIcon Glyph="&#xED1F;" />
    </AppBarButton.Icon>
</AppBarButton>
<AppBarButton x:Name='QualityButton'
              Style='{StaticResource AppBarButtonStyle}'
              MediaTransportControlsHelper.DropoutOrder='3'>
    <AppBarButton.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem x:Name="Quality144p"
                            Text="144p" />
            <MenuFlyoutItem x:Name="Quality240p"
                            Text="240p" />
        </MenuFlyout>
    </AppBarButton.Flyout>
    <AppBarButton.Icon>
        <SymbolIcon x:Name='QualitySymbol'
                    Symbol='Setting' />
    </AppBarButton.Icon>
</AppBarButton>

Then create a new class in that derives from MediaTransportControls and override OnApplyTemplate(), so that the your control can be retrieved and you can add the tapped event manually.

public sealed class QualityTransportControls: MediaTransportControls
{
    //store the old quality for the custom event
    private int oldQuality = 144;
    private int quality = 144;
    public int Quality
    {
        get { return quality; }
        set {
            //update oldQuality
            oldQuality = quality;
            quality = value;
            //this method is responsible for raising the event
            OnQualityChanged();
        }
    }

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

    protected override void OnApplyTemplate()
    {
        MenuFlyoutItem flyoutItem = GetTemplateChild("Quality144p") as MenuFlyoutItem;
        flyoutItem.Tapped += SetQuality144;

        MenuFlyoutItem flyoutItem2 = GetTemplateChild("Quality240p") as MenuFlyoutItem;
        flyoutItem.Tapped += SetQuality240;

        base.OnApplyTemplate();
    }

    private void SetQuality144(object sender, TappedRoutedEventArgs e)
    {
        Quality = 144;
    }

    private void SetQuality240(object sender, TappedRoutedEventArgs e)
    {
        Quality = 244;
    }

    private EventRegistrationTokenTable<EventHandler<QualityChangedEventArgs>> m_NumberChangedTokenTable = null;

    //this is your custom event which you can use within xaml
    public event EventHandler<QualityChangedEventArgs> QualityChanged
    {
        add
        {
            EventRegistrationTokenTable<EventHandler<QualityChangedEventArgs>>
                .GetOrCreateEventRegistrationTokenTable(ref m_NumberChangedTokenTable)
                .AddEventHandler(value);
        }
        remove
        {
            EventRegistrationTokenTable<EventHandler<QualityChangedEventArgs>>
                .GetOrCreateEventRegistrationTokenTable(ref m_NumberChangedTokenTable)
                .RemoveEventHandler(value);
        }
    }


    internal void OnQualityChanged()
    {
        //here you raise the event for every subscriber
        EventRegistrationTokenTable<EventHandler<QualityChangedEventArgs>>
        .GetOrCreateEventRegistrationTokenTable(ref m_NumberChangedTokenTable)
        .InvocationList?.Invoke(this, new QualityChangedEventArgs(oldQuality, Quality));
    }
}

Then you need a class for the QualityChangedEventArgs so you can add information to the event (eg. the old and new quality).

public class QualityChangedEventArgs:EventArgs
{
    public int OldQuality { get; set; }
    public int NewQuality { get; set; }

    public QualityChangedEventArgs(int oldValue, int newValue)
    {
        OldQuality = oldValue;
        NewQuality = newValue;
    }
}

Now (after a build) you can use the QualityChanged event just like any other event like Tapped

<local:CustomMediaTransportControls
    QualityChanged="CustomMediaTransportControls_QualityChanged"/>

and then you implement the method in the codebehind (of eg. your MainePage) like this:

private void CustomMediaTransportControls_QualityChanged(object sender, QualityChangedEventArgs e)
{
    //here you can change the quality according to the new quality which is stored in e.NewQuality
}