UWP MediaPlayerElement - Poster Stay Put Until Played

The UWP MediaPlayerElement has both a PosterSource and a VideoSource. This question is primarily about keeping the PosterSource showing until Play.

Docs state:

When a valid source is not set. For example, Source is not set, Source was set to Null, or the source is invalid (as is the case when a MediaFailed event fires).
While media is loading. For example, a valid source is set, but the MediaOpened event has not fired yet.
When media is streaming to another device.
When the media is audio only.

What I'm trying to determine is how to keep the Poster image showing even after the Media has finished downloading when auto play is off. Sadly the first frame+ is a black screen. So I want the poster to show until the play button is pressed.

Ideas?

EDIT:

Faywang was very helpful.

In addition to his comments I did the following:

private void PlayPauseButton_EnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
{
    var button = (sender as AppBarButton);
    if(!(bool)e.newValue)
    {
        button.IsEnabled = true;
    }
}

Solution

If you want to keep the poster until you click the play button, you could set the PosterSource and don't set the Source to MediaPlayerElement at first. Then listen the click event of play button, when the event is triggered, you could set the Source in this event and play it.

In addition, by testing, when you explicitly set AutoPlay and also do not set the Source, the play button will be disable. But if you do not set the AutoPlay, the play button will be enable, so it's better to remove this code AutoPlay="False".

If you want to listen the click event of play button, you could get the default style of MediaTransportControls and subscribe the click event of the play button. You can go to generic.xaml file to get the default style of MediaTransportControls. In the default style, there is an AppBarButton named PlayPauseButton which represents play and pause button, so you can add click event in it and when trigger the event, set the source, play/pauce the video.

For example:

.xaml:

<Page.Resources>
    <Style TargetType="MediaTransportControls" x:Key="MyStyle">
        ......
        <Setter Property="Template">
            ......
            <AppBarButton x:Name='PlayPauseButton' Style='{StaticResource  AppBarButtonStyle}' 
                          Click="PlayPauseButton_Click"
                          MediaTransportControlsHelper.DropoutOrder='23'>
                <AppBarButton.Icon>
                    <SymbolIcon x:Name="PlayPauseSymbol" Symbol="Play" />
                </AppBarButton.Icon>
            </AppBarButton>
            ......
        </Setter>
    </Style>
</Page.Resources>

<MediaPlayerElement x:Name="mediaSimple" Width="400" PosterSource="Assets/3.jpg" AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls Style="{StaticResource MyStyle}"></MediaTransportControls>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

.cs:

private void PlayPauseButton_Click(object sender, RoutedEventArgs e)
{
    SymbolIcon symbol = (sender as AppBarButton).Icon as SymbolIcon;
    if (symbol.Symbol == Symbol.Pause)
    {
        mediaSimple.MediaPlayer.Pause();
    }
    else
    {
        if (mediaSimple.Source == null)
        {
            mediaSimple.Source = MediaSource.CreateFromUri(new Uri("ms-appx:///Assets/fishes.wmv"));
        }

        mediaSimple.MediaPlayer.Play();
    }
}