要素をフルスクリーンで表示するUWPアプリケーション

Question

以下は、メディア要素、再生、一時停止、完全なウィンドウおよびシーカを含む私のデザインです。

<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プロパティを設定すると再生、一時停止、および求職者が隠れています。メディア要素がフルウィンドウのときにこれらのコントロールを表示するにはどうすればいいですか？

Answer 1

あなたは、実行時に、あなたのレイアウトを確認するためにライブビジュアルツリーを確認することができます。

MediaElementがFullScreenモードに入ると、FullWindowMediaRootはMeidiaElementをホストすると、あなたのmediaGridは、この中には表示されません時間。 1つの方法は@Chris W. のMediaElementを使用していると言われていますが、これはWindows 8.1アプリでは利用できません。

カスタムトランスポート・コントロールはWP8.1でサポートされていないので、Windowsの携帯電話8.1ア​​プリのために、あなたはこのように、たとえばアプリケーションのサイズにMediaElementのWidthとHeightを手動で設定することができます

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

アプリので、 WP8.1をフルスクリーンモードで実行すると、この方法ではフルスクリーンモードのように見えます（MediaElement）。 「フルスクリーンモードを終了」する場合は、HeightとWidthのプロパティをリセットするだけで済みます。