CODEWITHSUNDEEP
xamluwp
whathero
whathero

Reputation: 17

UWP mediaplayerelement how to display extra text on top part of transport media control?

I am writing a UWP 14393 app using mediaplayerelement in xaml file, I am wondering how can I display extra information in text on top of custom transport media control so that when player control is up, the text will show up at the same time?

For example, for a video player showing an online stream, and at the top left corner shows streamer name, view count, etc. The information only shows up when player control shows up.

Obviously, the best way to do this is to put the text inside custom transport media control, is it doable? If not, how can I achieve this?

I am a newbie at UWP, so any help will be welcome, thanks.

Upvotes: 0

Views: 342

Answers (2)

Vincent
Vincent

Reputation: 3304

You can custom the MediaTransportControls's style, and add your own content to <Border x:Name="ControlPanel_ControlPanelVisibilityStates_Border">. See my test.

enter image description here

First download MediaTransportControls's style from my gist. Or you can find it in your pc's generic.xaml file.

Then add this style to App.xaml.

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/MediaTransportControls.xaml"/>
    </ResourceDictionary.MergedDictionaries>

Then you can use your style in MediaTransportControls.

<MediaPlayerElement
    Width="300" Height="500"
    AreTransportControlsEnabled="True"
    Source="ms-appx:///Assets/elephantsdream-clip-h264_sd-aac_eng-aac_spa-aac_eng_commentary-srt_eng-srt_por-srt_swe.mkv">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls Style="{StaticResource myMediaTransportControlsStyle}">

        </MediaTransportControls>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

Upvotes: 0

Muhammad Touseef
Muhammad Touseef

Reputation: 4465

<MediaPlayerElement AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls>
        <Grid>
            <...Put any content here like textblocks and buttons all this content will be part of controls so they will appear and disappear along with the controls, this Grid covers all the area on the screen ( above the controls bar )...>
        </Grid>
        </MediaTransportControls>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

Upvotes: -1

Related Questions