Elemente in Vollbild-UWP-Anwendung anzeigen

Question

Unten ist mein Design mit Medienelement, Play, Pause, Vollfenster und Sucher.

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

Wenn ich das volle Fenster-Symbol auf der rechten Seite klicken, zeigt das Video als Voll Fenster mit Play, Pause, Suchern und vollständiger Fenster-Taste.

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> 

Das Video in vollen Fenstern, aber Wiedergabe, Pause und Sucher verstecken, wenn ich die IsWindowFull Eigenschaft festgelegt. Wie zeigen Sie diese Steuerelemente an, wenn sich das Medienelement im vollständigen Fenster befindet?

Answer 1

Sie können die Live-Baumstruktur überprüfen Ihr Layout in der Laufzeit zu überprüfen:

Wenn ein MediaElement in den FullScreen Modus wechselt, FullWindowMediaRoot wird der Host MeidiaElement und Ihre mediaGrid nicht in dieser gezeigt werden Zeit. Eine Methode ist, wie @ Chris W. sagte, verwenden Sie die TransportControls von MediaElement, aber dies ist nicht verfügbar in Windows 8.1 App, wie Sie eine Windows Phone 8.1 App entwickelt, gibt es kein solches Problem.

Da die Steuerung individueller Transports nicht in WP8.1 unterstützt wird, für Windows Phone 8.1 App können Sie manuell die Width und Height von MediaElement zu App Größe zum Beispiel wie folgt eingestellt:

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

Da der App läuft auf WP8.1 als Vollbildmodus, diese Methode wird auch die MediaElement sieht aus wie es im Vollbildmodus ist. Wenn Sie den Vollbildmodus beenden möchten, können Sie einfach die Eigenschaften Height und Width zurücksetzen.