Bhanuprakash Mankala Bhanuprakash Mankala - 2 months ago 40
C# Question

Video- Full Window in Windows UWP

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

<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" Minimum="0"
Foreground="DarkBlue" Width="180" Height="10" Background="Gray"
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" VerticalAlignment="Bottom"
HorizontalAlignment="Right" Margin="0,0,40,20"></TextBlock>

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


As per above design, i will get a design as below

enter image description here

If i click the full window icon in the right hand side. The video will show as full window with play, pause, seeker and full window.

I used

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 is playing in full window but play, pause, seeker is hiding when i am using the above property. How to show those icons when the media element is in full window. Please help me.

Thanks.

Answer

You can check the Live Visual Tree to check your Layout in the run-time: enter image description here

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.

Comments