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

  • Pergunta

  • 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
    terça-feira, 26 de maio de 2009 01:25

Respostas

  • 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"
    • Editado Lucas Defacio quinta-feira, 4 de junho de 2009 11:28
    • Marcado como Resposta LuizIta sexta-feira, 5 de junho de 2009 02:33
    quarta-feira, 3 de junho de 2009 11:32
  • 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"
    • Marcado como Resposta LuizIta sexta-feira, 5 de junho de 2009 02:33
    quinta-feira, 4 de junho de 2009 11:27

Todas as Respostas

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

    sexta-feira, 29 de maio de 2009 14:16
  • 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
    sábado, 30 de maio de 2009 05:18
  • 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"
    segunda-feira, 1 de junho de 2009 11:53
  • 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
    segunda-feira, 1 de junho de 2009 19:17
  • 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"
    terça-feira, 2 de junho de 2009 12:16
  • 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
    terça-feira, 2 de junho de 2009 18:43
  • 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"
    • Editado Lucas Defacio quinta-feira, 4 de junho de 2009 11:28
    • Marcado como Resposta LuizIta sexta-feira, 5 de junho de 2009 02:33
    quarta-feira, 3 de junho de 2009 11:32
  • 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
    quarta-feira, 3 de junho de 2009 17:56
  • 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"
    • Marcado como Resposta LuizIta sexta-feira, 5 de junho de 2009 02:33
    quinta-feira, 4 de junho de 2009 11:27