How to sync ui to full screen or compact mode using MediaPlayerElement

Question

I'm using MediaPlayerElement, when my app window in normal size, I have a Button and a TextBox on the MediaPlayerElement. But when I click fullscreen or compact button to enter fullscreen or compact mode, they disappeared.

How to show them in full screen or compact mode?

A helpfull repo is here, sync the TextBox to fullscreen.

Answer 1

For your requirement, you could custom your MediaTransportControls and found ControlPanel_ControlPanelVisibilityStates_Border in the style. Then add your element under the that border.

For example

<Border x:Name="ControlPanel_ControlPanelVisibilityStates_Border">
    <Grid>
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            FontSize="25"
            Foreground="Red"
            Text="This is title"
            />
        <Grid
            x:Name="ControlPanelGrid"
            VerticalAlignment="Bottom"
            Background="{ThemeResource SystemControlPageBackgroundAltMediumBrush}"
            RenderTransformOrigin="0.5,0.5"
......

I add the title TextBlock into the style.