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

Question

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

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

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

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>

视频完整播放window，但是当我设置IsWindowFull属性时，播放、暂停和搜索器都隐藏了。如何在媒体元素已满时显示这些控件window?

Answer 1

您可以在运行时间检查实时可视化树以检查您的布局：

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

由于WP8.1不支持自定义传输控件，对于windows phone 8.1 app，可以手动设置Width和Height 11=] 到 App 的大小，例如：

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

由于应用程序运行在 WP8.1 上作为全屏模式，此方法也会使 MediaElement 看起来像处于全屏模式。当你想要 "exit from full screen mode" 时，你可以重置 Height 和 Width 属性。

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

Keep elements displayed in fullscreen UWP application

c#

xaml

windows-phone-8.1

uwp