保持元素在全屏 UWP 应用程序中显示

Posted 2023-04-12

【中文标题】保持元素在全屏 UWP 应用程序中显示

【英文标题】：Keep elements displayed in fullscreen UWP application

【发布时间】：2016-12-03 19:24:41

【问题描述】：

下面是我的设计，包含媒体元素、播放、暂停、全窗口和搜索器。

<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>

如果我单击右侧的全窗口图标，视频将显示为全窗口，带有播放、暂停、搜索和全窗口按钮。

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 属性时，播放、暂停和搜索器都隐藏了。媒体元素全屏时如何显示这些控件？

【问题讨论】：

在这种情况下，为什么不直接使用默认的TransportControls，因为你没有做任何过于自定义的事情，它看起来无论如何都会看起来更干净？

感谢@ChrisW。它工作得很好

嗨@ChrisW，我在使用默认传输控件时遇到问题。当用户单击最大化按钮时，我想在横向模式下以全窗口显示视频。但是，在那种情况下，没有任何事件被触发。有没有办法得到它？非常感谢您的帮助。谢谢。

哪些事件？你的意思是覆盖视频的按钮？

嗨@ChrisW，我已经添加了我的代码。在代码中我使用的是 TrasportControls。它在纵向模式下工作正常。但是，我担心的是，当用户单击最大化按钮时，它应该在全窗口中变为横向模式。

【参考方案1】：

您可以检查 Live Visual Tree 以在运行时检查您的布局：

当MediaElement 进入FullScreen 模式时，FullWindowMediaRoot 将托管MeidiaElement，此时您的mediaGrid 将不会显示。一种方法是@Chris W. 说使用MediaElement 的TransportControls，但这在Windows 8.1 应用程序中不可用，因为您开发了一个Windows Phone 8.1 应用程序，没有这样的问题。

由于 WP8.1 不支持自定义传输控件，对于 windows phone 8.1 应用，您可以手动将MediaElement 的Width 和Height 设置为应用的大小，例如：

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

由于应用程序在 WP8.1 上以全屏模式运行，这种方法也会使 MediaElement 看起来像处于全屏模式。而当你想“退出全屏模式”时，只需重置Height和Width属性即可。

【讨论】：

嗨，格蕾丝。感谢您的回复。现在，我正在 Windows 10 中开发我的应用程序，所以我使用了 TransportControls。在 WP8.1 中，即使我们像你提到的那样指定宽度和高度，我也会遇到同样的问题。

@BhanuprakashMankala，在开发UWP应用时，我们可以Create custom transport controls，对于WP8.1，设置Width和Height时，不需要设置VideosMediaElement.IsFullWindow = true;，否则同样的问题也会发生。