How to control customized MediaTransportControls?

Question

I'm using MediaPlayerElement, and added an Image on the right-top of the player, following my another so: How to sync ui to full screen or compact mode using MediaPlayerElement.

<Image
     x:Name="Image_CPLOGO" Width="160" Height="80" Margin="36"
     HorizontalAlignment="Right" VerticalAlignment="Top"
     Source="{TemplateBinding CPLogo}"/>

And I have custom my own MediaTransportControls following Customize the transport controls

<MediaPlayerElement.TransportControls>
    <controls:CustomMediaTransportControls
        Style="{StaticResource ViuMediaTransportControls}"
        x:Name="MediaTransportControls_Custom">
    </controls:CustomMediaTransportControls>
</MediaPlayerElement.TransportControls>

Then in CustomMediaTransportControls.cs, I wrote

public static readonly DependencyProperty CPLogoProperty = DependencyProperty.Register("CPLogo", typeof(ImageSource),
            typeof(CustomMediaTransportControls), new PropertyMetadata(null));
        public ImageSource CPLogo
        {
            get { return (ImageSource)GetValue(CPLogoProperty); }
            set { SetValue(CPLogoProperty, value); }
        }

At last, I wrote code to set Image:

MediaTransportControls_Custom.CPLogo = new BitmapImage(new Uri("https://www.gravatar.com/avatar/ccd4648ac12e04ad93a5c3a32911383a?s=64&d=identicon&r=PG")); 

But this doesn't work, why?

Answer 1

Have you apply your CustonMediaTransportControl to your MediaTransportControls style?

<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">
        <Setter.Value>
            <ControlTemplate TargetType="local:CustomMediaTransportControls">