Como Criar um Botão de Vídeo para Deixar o Vídeo em Full-Screen em Silverlight via código?

Question

Olá pessoal sou iniciante em Silverlight e estou com o seguinte código XAML e code-behind do MediaElement do Silverlight

<UserControl x:Class="TesteVideoSilverlight.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="1024" Height="768">
    <Grid x:Name="LayoutRoot" Background="White">
        <MediaElement x:Name="video" Stretch="Fill" Margin="8,8,192,208" Source="mms://silverlight.wmv" AutoPlay="True"/>
        <Button Height="72" x:Name="btnPlay" Click="btnPlay_Click" HorizontalAlignment="Right" Margin="8,0,12,300" VerticalAlignment="Bottom" Width="160" Content="Play" FontSize="20"/>
        <Button x:Name="btnStop" Height="72" Click="btnStop_Click" HorizontalAlignment="Right" Margin="288,0,12,20" VerticalAlignment="Bottom" Width="160" Content="Stop" FontSize="22"/>
        

    </Grid>
</UserControl>

E o seguinte codigo em meu code-behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace TesteVideoSilverlight
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        private void btnPlay_Click(object sender, RoutedEventArgs e)
        {
            video.Play();
        }

        private void btnStop_Click(object sender, RoutedEventArgs e)
        {
            video.Stop();
        }

       

        
    }
}

O que eu gostaria de saber baseado no Xaml e code ácima como adicionar e criar um evento para que o Vídeo seja ao clicado passado para FULL SCREEN ou tela cheia e aproveitando se alguem puder me dar uma dica como monto um skin de tela de tv formato png e o coloco para que o video o reconheça

Fico no aguardo e desde já agradeço a quem puder me ajudar

---

LADEF

Answer 1

Olá. Tente utilizar o seguinte código para o FullScreen:

Application.Current.Host.Content.IsFullScreen = true;

Espero ter ajudado.

"Se sua pergunta foi respondida, por favor, marque como resposta"

Answer 2

Tentei fazer com este método e também com um  método adaptado que vi em busca na net, mas fica em full screen a tela e não o video (como aconteceria no caso se fosse usado o embebed do windows media player) 

Veja como ficou o meu source e code

Source

 

<UserControl x:Class="TesteVideoSilverlight.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

Width="1024" Height="768">

<Grid x:Name="LayoutRoot" Background="White">

<MediaElement x:Name="video" Stretch="Fill" Margin="8,8,192,208" MediaEnded="video_MediaEnded" />

<Button Height="72" x:Name="btnPlay" Click="btnPlay_Click" HorizontalAlignment="Right" Margin="8,0,12,300" VerticalAlignment="Bottom" Width="160" Content="Play" FontSize="20"/>

<Button x:Name="btnStop" Height="72" Click="btnStop_Click" HorizontalAlignment="Right" Margin="288,0,12,20" VerticalAlignment="Bottom" Width="160" Content="Stop" FontSize="22"/>

<Button x:Name="btnFullScreen" Height="72" Click="btnFullScreen_Click" HorizontalAlignment="Right" Margin="8,0,12,600" VerticalAlignment="Bottom" Width="160" Content="Full Screen" FontSize="22"/>

</Grid>

</UserControl>

code-behind

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Interop;

namespace TesteVideoSilverlight
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            //Video Inicializando por Código
            video.Source = new Uri("http://silverlight.asx");
            //Aqui o Auto Play é Dado como True - Video se Inicia Automaticamente
            
            video.AutoPlay = true;

         
        }

        private void btnPlay_Click(object sender, RoutedEventArgs e)
        {
            //video.Source = new Uri("http://silverlight.asx");
            video.Play();
            //Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;
            
        }

        private void btnStop_Click(object sender, RoutedEventArgs e)
        {
            video.Stop();
        }

        private void video_MediaEnded(object sender, RoutedEventArgs e)
        {
            //Recupera o video para sêr Loopado (Emula um Repeat do .asx)
            video.Source = new Uri("http://silverlight.asx");

        }

        private void btnFullScreen_Click(object sender, RoutedEventArgs e)
        {
            if (!App.Current.Host.Content.IsFullScreen)
            {
                App.Current.Host.Content.IsFullScreen = true;
                Dispatcher.BeginInvoke(delegate
                {
                    
                    var width = App.Current.Host.Content.ActualWidth;
                    var height = App.Current.Host.Content.ActualHeight;
                    this.Width = 1024;
                    this.Height = 768;
                   
                });
            }
            else
            {
                App.Current.Host.Content.IsFullScreen = false;
                this.Width = 1024;
               this.Height = 768;
              
            }
        }

        

       

        
    }
}

Pesquisando na net achei este link (porem é para o Silverlight 1.1)

http://weblogs.asp.net/scottgu/archive/2007/05/17/tip-trick-supporting-full-screen-mode-with-silverlight.aspx

Baixando o exemplo em Csharp Asp.Net da pagina e colocando-o no meu VS2008 Pro Edition com Silverlight 2.0 adaptando-o como nos codigos abaixo ele não reconhece os Metodos BrowserHost e nem o evento

MouseEventHandler

Como eu poderia adaptá-lo para o Silverlight 2

(abaixo o source e o codigo deste exemplo)

Source

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        x:Class="FullScreenMode.Page"
        Width="640"
        Height="480"
        Loaded="Page_Loaded" >

  <TextBlock x:Name="MyMessage" 
             Text="Click for Full Screen" 
             Canvas.Left="159" 
             Canvas.Top="183" 
             FontSize="36" 
             Foreground="Black"/>
  
</Canvas>

Code-Behind (Não reconhece o metodo BrowserHost e nem o evento MouseEventHandler (como posso adaptar o code abaixo e o xaml ácima para o Silverlight 2 o reconhecer fazendo  o mesmo efeito do exemplo do link passado ácima)

using System;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Interop;

namespace FullScreenMode {

    public partial class Page : Canvas {

        public void Page_Loaded(object o, EventArgs e) {

            InitializeComponent();

            // Wireup Event Handlers

            MyMessage.MouseLeftButtonDown += new MouseEventHandler(MyMessage_MouseLeftButtonDown);
            BrowserHost.FullScreenChange += new EventHandler(BrowserHost_FullScreenChange);
        }

        void MyMessage_MouseLeftButtonDown(object sender, MouseEventArgs e) {

            BrowserHost.IsFullScreen = BrowserHost.IsFullScreen ? false : true;
        }

       void BrowserHost_FullScreenChange(object sender, EventArgs e) {
         
            if (BrowserHost.IsFullScreen)
            {
                MyMessage.Text = "Click to Return to Browser";
            }
            else {
                MyMessage.Text = "Click for Full Screen";
            }
        }
    }
}

Fico no aguardo e desde já agradeço

 

 

 

 

---

LADEF

Answer 3

Bom. Acredito que é possível fazer apenas o vídeo ficar no modo fullscreen manipulando os controles como children. Se você colocasse os demais componentes da tela dentro de um Grid e apenas o vídeo fora deste grid. Ao entrar no modo fullscreen, você utilizaria o LayoutRoot.Children.Remove(SeuGrid) e, ao sair do fullscreen você adiciona novamente a tela seu Grid.

Acredito que você terá que gerenciar altura e largura dos componentes para fazer isto.

Espero ter ajudado.

"Se sua pergunta foi respondida, por favor, marque como resposta"

Answer 4

Lucas Defacio respondeu... 

   Bom. Acredito que é possível fazer apenas o vídeo ficar no modo fullscreen manipulando os controles como children. Se você colocasse os demais componentes da tela dentro de um Grid e apenas o vídeo fora deste grid. Ao entrar no modo fullscreen, você utilizaria o LayoutRoot.Children.Remove(SeuGrid) e, ao sair do fullscreen você adiciona novamente a tela seu Grid.

Acredito que você terá que gerenciar altura e largura dos componentes para fazer isto.

Lucas, mas se me teria um exemplo em xaml e em código csharp ou artigo se possivel de como fazer isso que na teoria vc me passou?

---

LADEF

Answer 5

Olá. Não tenho nenhum exemplo, mas irei testar esta forma e qualquer coisa posto aqui.

Porém descobri outra forma de se aplicar o efeito FullScreen apenas no vídeo. Segue um exemplo:

        public Page()
        {
            InitializeComponent();
            Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged);
        }

        void Content_FullScreenChanged(object sender, EventArgs e)
        {
            if (!Application.Current.Host.Content.IsFullScreen)
            {
                //Medidas iniciais do seu vídeo
                meVideo.Width = 400;
                meVideo.Height = 300;

                //Medidas iniciais da sua aplicação 
                this.Width = 800;
                this.Height = 400;
            }
            else
            {
                //Alterando as medidas do seu vídeo para as medidas da tela
                meVideo.Width = Application.Current.Host.Content.ActualWidth;
                meVideo.Height = Application.Current.Host.Content.ActualHeight;
                
                //Alterando as medidas da sua aplicação para as medidas da tela
                this.Width = Application.Current.Host.Content.ActualWidth;
                this.Height = Application.Current.Host.Content.ActualHeight;
            }
        }

Espero ter ajudado.
Abraço.

"Se sua pergunta foi respondida, por favor, marque como resposta"

Answer 6

Porém neste code-behind que vc me enviou como ficaria o source o page.xaml do mesmo para eu conseguir testar o codigo que vc me passou

fico no aguardo e desde já agradeço

---

LADEF

Answer 7

Vamos lá...

Segue a página page.xaml (adicionei um TextBox para demonstrar que os valores não são perdidos). Não me preocupei muito com o alinhamento, mas isto é simples de se resolver.

<UserControl x:Class="SilverlightComponenteFullScreen.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="800" Height="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel HorizontalAlignment="Left">
            <TextBox Width="250" Margin="20"></TextBox>
            <Button Width="100" Height="30" Content="fullscreen" Click="Button_Click" Margin="20" />
         </StackPanel>
        <MediaElement HorizontalAlignment="Right" x:Name="meVideo" MouseLeftButtonDown="meVideo_MouseLeftButtonDown" />
    </Grid>
</UserControl>

Agora segue a .cs

public Page()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(Page_Loaded);
            Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged);
        }

        void Content_FullScreenChanged(object sender, EventArgs e)
        {
            if (!Application.Current.Host.Content.IsFullScreen)
            {
                //Medidas iniciais do seu vídeo
                meVideo.Width = 400;
                meVideo.Height = 300;

                //Medidas iniciais da sua aplicação 
                this.Width = 800;
                this.Height = 400;
            }
            else
            {
                //Alterando as medidas do seu vídeo para as medidas da tela
                meVideo.Width = Application.Current.Host.Content.ActualWidth;
                meVideo.Height = Application.Current.Host.Content.ActualHeight;
                
                //Alterando as medidas da sua aplicação para as medidas da tela
                this.Width = Application.Current.Host.Content.ActualWidth;
                this.Height = Application.Current.Host.Content.ActualHeight;
            }
        }


        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            meVideo.Source = new Uri(Application.Current.Host.Source, "../3796wjio.wmv");
            meVideo.AutoPlay = false;
        }

        

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Application.Current.Host.Content.IsFullScreen = true;
        }

        private void meVideo_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (meVideo.CurrentState == MediaElementState.Playing)
            {
                meVideo.Pause();
            }
            else
            {
                meVideo.Play();
            }
        }

Espero ter ajudado...
Abraços.

"Se sua pergunta foi respondida, por favor, marque como resposta"

Answer 8

Olá Lucas a tag <br/> abaixo fáz parte do code?

void Page_Loaded(object sender, RoutedEventArgs e)
        {<br/>    //Para definir o Source desta forma, o vídeo está na raiz do projeto web
            meVideo.Source = new Uri(Application.Current.Host.Source, "../3796wjio.wmv");
            meVideo.AutoPlay = false;
        }

---

LADEF

Answer 9

Olá. Não faz parte. Acredito que foi erro na formatação do bloco de códigos aqui do forum.

Abraço!

"Se sua pergunta foi respondida, por favor, marque como resposta"