问题描述
限时送ChatGPT账号..下面是我的设计,包含媒体元素、播放、暂停、全窗口和搜索器.
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>
视频在全窗口播放,但是当我设置 IsWindowFull
属性时,播放、暂停和搜索器会隐藏.当媒体元素处于全窗口时如何显示这些控件?
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?
推荐答案
您可以在运行时检查 Live Visual Tree 以检查您的布局:
You can check the Live Visual Tree to check your Layout in the run-time:
当 MediaElement
进入 FullScreen
模式时,FullWindowMediaRoot
将托管 MeidiaElement
和您的 mediaGrid
这次不会显示.一种方法是@Chris W. 所说的使用MediaElement
的TransportControls
,但这在Windows 8.1 应用程序中不可用,因为您开发了Windows Phone 8.1 应用程序,有没有这样的问题.
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.
由于WP8.1不支持自定义传输控件,对于windows phone 8.1应用,您可以手动设置MediaElement的
Width
和Height
代码>到应用程序的大小,例如像这样:
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;
由于应用在 WP8.1 上以全屏模式运行,此方法也会使 MediaElement
看起来像处于全屏模式.当您想退出全屏模式"时,您只需重置 Height
和 Width
属性即可.
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.
这篇关于保持元素显示在全屏 UWP 应用程序中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论