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

本文介绍了保持元素显示在全屏 UWP 应用程序中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送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应用，您可以手动设置MediaElementWidth和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屋！