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

Bhanuprakash曼卡拉

下面是我的设计,其中包含媒体元素,播放,暂停,全屏和搜索程序。

<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属性时,播放,暂停和搜寻器处于隐藏状态当媒体元素处于全屏状态时,如何显示这些控件?

冯race

您可以检查实时可视树以在运行时检查布局: 在此处输入图片说明

MediaElement进入FullScreen模式时,FullWindowMediaRoot将主持,MeidiaElement而您的mediaGrid这次将不会显示。一种方法是@克里斯W.说使用TransportControlsMediaElement,但是这是不是在Windows 8.1的应用程序可用,你开发了Windows Phone 8.1的应用程序,不存在这样的问题。

由于自定义传送控制不WP8.1支持适用于Windows Phone 8.1的应用程序,你可以手动设置WidthHeightMediaElement,以应用程序的大小,例如像这样:

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

由于该应用程序在WP8.1上以全屏模式运行,因此此方法还将使MediaElement外观看起来像在全屏模式下一样。而当您要“从全屏模式退出”时,只需重置HeightWidth属性即可。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Lubuntu中全屏显示应用程序?

在PySimpleGUI中以编程方式使应用程序全屏显示

JavaFX8:处于全屏模式的应用程序不显示对元素的关注

如何减少UWP应用程序中的全屏交换链呈现延迟?

WPF应用程序中的全屏

如何使iPhone / iPad Web应用程序保持全屏模式?

在UWP应用程序中打开UWP

是否有可能检测到任何应用程序何时在android中全屏显示?

当AxShockwaveFlash全屏显示时在应用程序中捕获鼠标事件

Xcode中“仅全屏显示”选项对仅iPhone应用程序有何影响?

Cordova应用程序Webview是否必须全屏显示?

如何在macOS上全屏显示tkinter应用程序?

全屏显示应用程序后,屏幕(缓慢)变黑

如何在应用程序级别使android全屏显示?

使全屏抖动应用程序

在全屏模式应用程序顶部显示不活动的应用程序

全屏视频顶部显示Polymer Starter Kit应用程序抽屉和应用程序标题

在 UWP 应用程序的“添加引用”对话框中显示我的 .NET Standard 程序集

在Google Play商店中更新我的应用程序时,如何保持我的应用程序通知显示?

UWP中的应用程序图标

从服务中打开UWP应用程序

UWP 应用程序中的挂起模式

屏幕在全屏应用程序中停止响应

在清单中声明全屏沉浸式应用程序

从Mac OS X中的全屏应用程序窃取焦点

在Windows中检测全屏应用程序退出

React Native应用程序中的全屏背景图像

从全屏Qt快速应用程序中截取屏幕截图

如何在OSX中制作全屏应用程序?