2016-07-29 2 views
7

Ниже представлен мой проект, содержащий элемент мультимедиа, воспроизведение, паузу, полное окно и искатель.Элементы, отображаемые в полноэкранном приложении UWP

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

Rendering of the above design

Если я нажимаю на значок полноэкранного окна на правой стороне, видео показывает, как полное окно с игрой, паузой, ищущими и кнопкой полного окна.

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 собственность. Как показать эти элементы управления, когда элемент мультимедиа находится в полном окне?

+0

В этом случае, почему бы просто не использовать стандартные [TransportControls] (https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.mediatransportcontrols.aspx), поскольку вы не делаете ничего особенного, это похоже на все равно и будет выглядеть чище? –

+0

спасибо @ChrisW. Он работает абсолютно нормально –

+0

Привет @ChrisW, я столкнулся с проблемой при использовании стандартных Transportcontrols. Я хочу показать видео в полном окне в альбомном режиме, когда пользователь нажимает кнопку максимизации. Но в этом случае ни одно из событий не запускалось. Есть ли способ получить это? Ваша помощь высоко ценится. Спасибо. –

ответ

3

Вы можете проверить Живое Визуальное дерево, чтобы проверить макет в время выполнения: enter image description here

Когда MediaElement входит в режим FullScreen, FullWindowMediaRoot будет хост MeidiaElement и ваш mediaGrid не будет показан в этом время. Один из методов заключается в том, что @Chris W. использует TransportControlsMediaElement, но это не доступно в приложении Windows 8.1, так как вы разработали приложение для Windows Phone 8.1, такой проблемы нет.

Поскольку контроль пользовательского транспорта не поддерживается в WP8.1 для Windows Phone 8.1 приложения, вы можете вручную установить Width и Height от MediaElement до размера приложения, например, так:

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

Поскольку приложение работает на WP8.1 в полноэкранном режиме, этот метод также заставит MediaElement выглядеть так, как будто он находится в полноэкранном режиме. И когда вы хотите «выйти из полноэкранного режима», вы можете просто сбросить свойства Height и Width.

+0

HI Грейс. Спасибо за ваш ответ. Теперь я разрабатываю свое приложение в Windows 10, поэтому я использовал TransportControls. И в WP8.1, даже если мы укажем ширину и высоту, как, например, упомянем, что у меня такая же проблема. –

+0

@BhanuprakashMankala, при разработке приложения UWP, мы можем создать пользовательские элементы управления транспортом (https://msdn.microsoft.com/windows/uwp/controls-and-patterns/custom-transport-controls) для WP8.1, когда вы устанавливаете 'Width' и' Height', вам не нужно устанавливать 'VideoMediaElement.IsFullWindow = true;', в противном случае такая же проблема произойдет. –

+0

хорошо @ grace.Thank вас. –

Смежные вопросы