Keep elements displayed in fullscreen UWP application

Question

Below is my design containing media element, play, pause, full window and seeker.

<MediaElement x:Name="VideosMediaElement" VerticalAlignment="Top"
              Height="250" Width="355" Margin="0,20,0,0"
              BufferingProgressChanged="VideosMediaElement_BufferingProgressChanged"
              RealTimePlayback="True"
              />
<Grid x:Name="mediaGrid">
    <Border VerticalAlignment="Bottom" Height="60" Background="Black"
            Opacity="0.1">
    </Border>
    <Image x:Name="PlayIcon" Source="Assets/Play-icon.png"
           Height="35" HorizontalAlignment="Left" VerticalAlignment="Bottom"
           Margin="3,0,0,10" Visibility="Collapsed" Tapped="PlayIcon_Tapped">
    </Image>

    <Image x:Name="PauseIcon" Source="Assets/Pause.png"
           Height="35" HorizontalAlignment="Left" VerticalAlignment="Bottom"
           Margin="3,0,0,10" Tapped="PauseIcon_Tapped" Visibility="Visible">
    </Image>

    <TextBlock x:Name="duration" Foreground="White" VerticalAlignment="Bottom"
               Margin="43,0,0,20">
    </TextBlock>

    <ProgressBar x:Name="videoProgressBar" VerticalAlignment="Bottom"
                 Margin="15 0 10 25" Foreground="DarkBlue" Background="Gray"
                 Width="180" Height="10" Minimum="0"
                 Maximum="{Binding Path=NaturalDuration.TimeSpan.TotalSeconds,
                                   Mode=TwoWay, 
                                   ElementName=VideosMediaElement}"
                 Value="{Binding Path=Position.TotalSeconds, Mode=TwoWay,
                                 ElementName=VideosMediaElement}"
                 Tapped="videoProgressBar_Tapped"
                 />

    <TextBlock x:Name="maximumDuration" Foreground="White" Margin="0,0,40,20"
               VerticalAlignment="Bottom" HorizontalAlignment="Right">
    </TextBlock>

    <Image x:Name="ExpandEnabled" Source="Assets/Fullscreen.png"
           Tapped="Zoom_Tapped" Height="35" Margin="0 0 3 10"
           HorizontalAlignment="Right" VerticalAlignment="Bottom">
    </Image>
</Grid>

If I click the full window icon on the right hand side, the video shows as full window with play, pause, seeker and full window button.

VideosMediaElement.IsFullWindow = true;

<MediaElement x:Name="VideosMediaElement" VerticalAlignment="Top"
              Height="300" Width="360"
              BufferingProgressChanged="VideosMediaElement_BufferingProgressChanged"
              AreTransportControlsEnabled="True">
    <MediaElement.TransportControls>
         <MediaTransportControls IsCompact="True" IsZoomButtonVisible="False"
                                 IsZoomEnabled="False"
                                 IsPlaybackRateButtonVisible="True"
                                 IsPlaybackRateEnabled="True"
                                 />
    </MediaElement.TransportControls>
</MediaElement>

The video plays in full window, but play, pause and seeker are hiding when I set the IsWindowFull property. How to show those controls when the media element is in full window?

Answer 1

You can check the Live Visual Tree to check your Layout in the run-time:

When a MediaElement enters into the FullScreen mode, FullWindowMediaRoot will host the MeidiaElement and your mediaGrid will not be shown in this time. One method is as @Chris W. said use the TransportControls of MediaElement, but this is not available in Windows 8.1 app, as you developed a windows phone 8.1 app, there is no such problem.

Since custom transport control is not supported in WP8.1, for windows phone 8.1 app, you can manually set the Width and Height of MediaElement to App's size for example like this:

VideosMediaElement.Width = Window.Current.Bounds.Width;
VideosMediaElement.Height = Window.Current.Bounds.Height;

Since the app runs on WP8.1 as full screen mode, this method will also make the MediaElement looks like it is in full screen mode. And when you want to "exit from full screen mode", you can just reset the Height and Width properties.