Fullscreen MediaPlayer?

Topics: Windows 8 Xaml
Jun 26, 2012 at 10:20 AM

Hi,

I have a problem witch the "IsFullScreenChanged" event. I want to show the "media" control into fullscreen but i don't know who.. The media takes place into the stackpanel and not in the LayoutRoot. I know it's normal but i don't have an idea to show it directly in all LayoutRoot.

Can you help me?

 

This is a part of my playerpage.xaml :

 

    <Grid x:Name="LayoutRoot"        Style="{StaticResource LayoutRootStyle}">

 <Grid.RowDefinitions>           

<RowDefinition Height="140"/> 

          <RowDefinition Height="*"/> 

          <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

........

   <Grid Grid.Row="1" Margin="120,0,0,0" x:Name="horizontalGrid">            <Grid.ColumnDefinitions>           

    <ColumnDefinition Width="560"/> 

              <ColumnDefinition Width="*" /> 

          </Grid.ColumnDefinitions>   

        <Grid.RowDefinitions>     

          <RowDefinition Height="Auto" />   

            <RowDefinition Height="Auto" /> 

              <RowDefinition Height="*" /> 

          </Grid.RowDefinitions>

 

  <StackPanel Grid.RowSpan="2" Grid.Row="1" x:Name="mediaStackPanel" Width="520"  HorizontalAlignment="Left" Margin="0,14,0,0">
 <player:MediaPlayer IsTabStop="False" x:Name="media" Source="{Binding Journal.UrlTvRadio}"   VerticalAlignment="Top"  Margin="0" AutoPlay="True" IsFullScreenVisible="True" IsFullScreenChanged="media_IsFullScreenChanged_1" MaxHeight="300">           

        <player:MediaPlayer.Plugins> 

                      <adaptive:AdaptivePlugin />   

                </player:MediaPlayer.Plugins> 

              </player:MediaPlayer>

....

</StackPanel>

 </Grid>

    </Grid>

 

xaml.cs :

        private double littleHeight = 300;        private double littleWidth = 520;

        private void media_IsFullScreenChanged_1(object sender, RoutedPropertyChangedEventArgs<bool> e)        {
            this.media.IsFullScreen = e.NewValue;
            if (this.media.IsFullScreen)          

{
                this.media.Height = Window.Current.Bounds.Height; 

              this.media.Width = Window.Current.Bounds.Width; 

          } else            {   

            this.media.Width = littleWidth; 

              this.media.Height = littleHeight;   

        } 

      }

Coordinator
Jun 27, 2012 at 12:06 AM

mman, full-screen in xaml is a little tricky and requires that you layout your page a special way because of of the way containers clip children that run beyond their boundaries. z-order is another concern.

Nevertheless, I took your sample above and got it to work by adding a little xaml and code...

First, wrap the MediaPlayer in a Canvas with:

<Canvas x:Name="playerCanvas" Width="520" Height="300" SizeChanged="playerCanvas_SizeChanged">
    <Canvas.RenderTransform>
        <TranslateTransform x:Name="CanvasMover"/>
    </Canvas.RenderTransform>
    <mmppf:MediaPlayer x:Name="player" Source="http://smf.blob.core.windows.net/samples/videos/wildlife.mp4" IsFullScreenVisible="True"/>
</Canvas>

Next, find the offset of the player, transform the canvas to the upper left of the screen, and set the width and height of the player to the app's size.

void player_IsFullScreenChanged(object sender, RoutedPropertyChangedEventArgs<bool> e)
{
    if (e.NewValue)
    {
        var offset = player.TransformToVisual(LayoutRoot).TransformPoint(new Point());
        CanvasMover.X = -offset.X;
        CanvasMover.Y = -offset.Y;
        this.player.Height = Window.Current.Bounds.Height;
        this.player.Width = Window.Current.Bounds.Width;
    }
    else
    {
        this.player.Width = playerCanvas.Width;
        this.player.Height = playerCanvas.Height;
        CanvasMover.X = 0;
        CanvasMover.Y = 0;
    }
}

private void playerCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (!player.IsFullScreen)
    {
        player.Width = e.NewSize.Width;
        player.Height = e.NewSize.Height;
    }
}

Note: You'll have to be careful about zorder issues if you put more on the page. Also, I'm sure there are other ways to do this.

Sep 29, 2013 at 5:34 PM
Edited Sep 29, 2013 at 5:37 PM
Thanks alot @timgreenfield. it saved my time.
Jun 27, 2014 at 2:57 AM
player.IsFullWindow ?? or should I use above logic?