none
Como Fazer o MediaElement ficar na frente dos botões ao dar FullScreen e o FullScreen Centralizar no monitor RRS feed

  • Pergunta

  • Olá pessoal do MSDN Silverlight

    Baseado no source Xaml abaixo e no code-behind como faço para quando for clicado o botão em fullscreen aconteça o seguinte

    A)O Video ficar completamente em tela cheia e centralizado no monitor e não se deslocando para lateral o video qdo ficar em Tela-Cheia

    B)Quando Ficar em Tela-Cheia os botões play, pause, stop e full-screen se esconderem por tráz do video

    Abaixo o Xaml do Silverlight e o code-behind da mesma

    Xaml

    <UserControl x:Class="meuplayerfull.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        mc:Ignorable="d" d:DesignWidth="700" d:DesignHeight="700">
    
    <!-- Media Element -->
    <Canvas x:Name="Video" Width="700" Height="700">
    
    <MediaElement x:Name="meVideo"  Width="500" Height="500" Position="0" Canvas.Top="0" />
    
     <!-- Painel com os botões -->
      <Canvas x:Name="pnlBotoes" Width="700" Height="700" >
                <Canvas x:Name="botoes" Width="500" Height="70" Canvas.Left="135" Canvas.Top="470">
                    <Canvas Width="25" Height="26" MouseLeftButtonDown="btnParar_MouseLeftButtonDown" x:Name="btnParar" Canvas.Left="0">
                        <Image  Source="img/stopsilverlighttransp.png" Width="25" Height="26"></Image>
                    </Canvas>
                    <Canvas x:Name="btnPause" Width="25" Height="26" MouseLeftButtonDown="btnPause_MouseLeftButtonDown" Canvas.Left="60">
                        <Image  Source="img/pausesilverlighttransp.png" Width="25" Height="26"></Image>
                    </Canvas>
                    <Canvas x:Name="btnPlay" Width="25" Height="26" MouseLeftButtonDown="btnPlay_MouseLeftButtonDown" Canvas.Left="120">
                        <Image  Source="img/playsilverlighttransp.png" Width="25" Height="26"></Image>
                    </Canvas>
                    <Canvas x:Name="btnFullScreen" Width="25" Height="26" MouseLeftButtonDown="btnFullScreen_MouseLeftButtonDown" Canvas.Left="180">
                        <Image  Source="img/fullscreensilverlighttransp.png" Width="25" Height="26"></Image>
                    </Canvas>
                </Canvas>
      </Canvas>  
    
    </Canvas>
    
    
            
        
    </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;
    
    namespace meuplayerfull
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
                Loaded += new RoutedEventHandler(Page_Loaded);
                Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged);
    
            }
            void Page_Loaded(object sender, RoutedEventArgs e)
            {  //Para definir o Source desta forma, o vídeo está na raiz do projeto web
                meVideo.Source = new Uri(Application.Current.Host.Source, "meuvideo.asx");
                meVideo.AutoPlay = true;
            }
    
           
    
            private void btnParar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
    
            }
    
            private void btnPause_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
    
            }
    
            private void btnPlay_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
    
            }
    
            private void btnFullScreen_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                Application.Current.Host.Content.IsFullScreen = true;
            }
    
            void Content_FullScreenChanged(object sender, EventArgs e)
            {
                if (!Application.Current.Host.Content.IsFullScreen)
                {
                    //Medidas iniciais do seu vídeo
                    meVideo.Width = 500;
                    meVideo.Height = 500;
    
                    //Medidas iniciais da sua aplicação 
                    // this.HorizontalAlignment = HorizontalAlignment.Center;
                    // this.VerticalAlignment = VerticalAlignment.Top;
                    this.Width = 700;
                    this.Height = 700;
                }
                else
                {
                    // meVideo.HorizontalAlignment = HorizontalAlignment.Left;
                    //  meVideo.VerticalAlignment = VerticalAlignment.Top;
                    //  meVideo.Margin = ""
                    //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;
                }
            }
    
        }
    }
    

    A Resolução de Video ao qual estou trabalhando no monitor é para Monitor Resolução de Video 1024x768px

    Estou trabalhando com o VS2008 Pro Edition e Microsoft Expression Blend 2.0 não tenho a versão 3.0 - A Versão do Silverlight que estou trabalhando é a 3.0

    Fico no aguardo e desde já agradeço a quem possa me ajudar
    LADEF
    sexta-feira, 27 de novembro de 2009 02:31

Respostas

  • Desculpe a demora. Se o fonte de como o seu código deveria ficar:

    <UserControl x:Class="meuplayerfull.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        mc:Ignorable="d" d:DesignWidth="700" d:DesignHeight="700">
    
    <!-- Media Element -->
    <Grid x:Name="Video">
    
    <MediaElement x:Name="meVideo" AutoPlay="True"/>
    <!-- Painel com os botões --> <Canvas x:Name="pnlBotoes" VerticalAlignment="Bottom" Height="70" > <Canvas Width="25" Height="26" MouseLeftButtonDown="btnParar_MouseLeftButtonDown" x:Name="btnParar" Canvas.Left="0"> <Image Source="img/stopsilverlighttransp.png" Width="25" Height="26"></Image> </Canvas> <Canvas x:Name="btnPause" Width="25" Height="26" MouseLeftButtonDown="btnPause_MouseLeftButtonDown" Canvas.Left="60"> <Image Source="img/pausesilverlighttransp.png" Width="25" Height="26"></Image> </Canvas> <Canvas x:Name="btnPlay" Width="25" Height="26" MouseLeftButtonDown="btnPlay_MouseLeftButtonDown" Canvas.Left="120"> <Image Source="img/playsilverlighttransp.png" Width="25" Height="26"></Image> </Canvas> <Canvas x:Name="btnFullScreen" Width="25" Height="26" MouseLeftButtonDown="btnFullScreen_MouseLeftButtonDown" Canvas.Left="180"> <Image Source="img/fullscreensilverlighttransp.png" Width="25" Height="26"></Image> </Canvas> </Canvas> </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;
    
    namespace meuplayerfull
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
                Loaded += new RoutedEventHandler(Page_Loaded);
                Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged);
    
            }
            void Page_Loaded(object sender, RoutedEventArgs e)
            {  //Para definir o Source desta forma, o vídeo está na raiz do projeto web
                meVideo.Source = new Uri(Application.Current.Host.Source, "meuvideo.asx");
            }
    
            private void btnParar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                 meVideo.Stop();
            }
    
            private void btnPause_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
    
                 meVideo.Pause();
    
    }
    private void btnPlay_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
                 meVideo.Play();
    
    }
    private void btnFullScreen_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Application.Current.Host.Content.IsFullScreen = ! Application.Current.Host.Content.IsFullScreen;
            }
    
            void Content_FullScreenChanged(object sender, EventArgs e)
            {
                pnlBotoes.Visibility = Application.Current.Host.Content.IsFullScreen ? 
                    Visibility.Collapsed : Visibility.Visible;
            }
    
        }
    }

    Algumas questões: Porque você usou Canvas em todo lugar? 
    Porque você está usando Canvas nos botões ao invés de usar Button?

    Atenciosamente,
    Kelps Leite de Sousa
    blog: http://kelps-sousa.blogspot.com
    twitter : http://twitter.com/kelps

    Não se esqueça de "marcar como resposta" o ítem que lhe ajudou.
    • Marcado como Resposta Daniel Ferreira quarta-feira, 14 de julho de 2010 13:33
    sábado, 28 de novembro de 2009 12:13
    Moderador

Todas as Respostas

  • Seguem algumas dicas:

    - Não use Canvas como container. Use um Grid pois quando o tamanho dele aumentar o vídeo vai aumentar junto. 
    - Não defina largura e altura no usercontrol, grid ou media element. Defina o tamanho do plugin na página e use a propriedade margin para fazer o vídeo não ficar colado nas laterais (no seu caso o plugin terá 700x700 e o vídeo terá 100 de margem).
    - Assine o evento this.Host.Content.FullScreenChanged e set a propriedade pnlBotoes.Visibility para colapsed quando estiver em full screen.
    - Instale o Trial do Blend 3 para poder fazer alterações de layout em projetos Silverlight 3 sem problemas. O Blend 2 não deve ser usado para Silverlight 3.

    Espero que essas dicas ajudem.

    Atenciosamente,
    Kelps Leite de Sousa
    blog: http://kelps-sousa.blogspot.com
    twitter : http://twitter.com/kelps

    Não se esqueça de "marcar como resposta" o ítem que lhe ajudou.
    sexta-feira, 27 de novembro de 2009 12:07
    Moderador
  • Kelps como sou Iniciante em Silverlight e baseado no meu source Xaml e code-behind ácima, baseado em suas informações

    - Não use Canvas como container. Use um Grid pois quando o tamanho dele aumentar o vídeo vai aumentar junto. 
    - Não defina largura e altura no usercontrol, grid ou media element. Defina o tamanho do plugin na página e use a propriedade margin para fazer o vídeo não ficar colado nas laterais (no seu caso o plugin terá 700x700 e o vídeo terá 100 de margem).
    - Assine o evento this.Host.Content.FullScreenChanged e set a propriedade pnlBotoes.Visibility para colapsed quando estiver em full screen.

    Você teria como me repassar um exemplo de como ficaria o meu Source Xaml e code-behind adaptado para o que vc me informou neste post

    Fico no aguardo caso possa me repassar o source e o codigo adaptado e desde já agradeço

    LADEF
    sexta-feira, 27 de novembro de 2009 15:53
  • Vou fazer a adaptação e posto aqui ainda hoje. Me desculpe pela demora mas tive um dia corrido hoje.
    Atenciosamente,
    Kelps Leite de Sousa
    blog: http://kelps-sousa.blogspot.com
    twitter : http://twitter.com/kelps

    Não se esqueça de "marcar como resposta" o ítem que lhe ajudou.
    sexta-feira, 27 de novembro de 2009 21:17
    Moderador
  • Ok fico no aguardo da adaptação qdo puder postar e desde já agradeço
    LADEF
    sábado, 28 de novembro de 2009 00:44
  • Desculpe a demora. Se o fonte de como o seu código deveria ficar:

    <UserControl x:Class="meuplayerfull.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        mc:Ignorable="d" d:DesignWidth="700" d:DesignHeight="700">
    
    <!-- Media Element -->
    <Grid x:Name="Video">
    
    <MediaElement x:Name="meVideo" AutoPlay="True"/>
    <!-- Painel com os botões --> <Canvas x:Name="pnlBotoes" VerticalAlignment="Bottom" Height="70" > <Canvas Width="25" Height="26" MouseLeftButtonDown="btnParar_MouseLeftButtonDown" x:Name="btnParar" Canvas.Left="0"> <Image Source="img/stopsilverlighttransp.png" Width="25" Height="26"></Image> </Canvas> <Canvas x:Name="btnPause" Width="25" Height="26" MouseLeftButtonDown="btnPause_MouseLeftButtonDown" Canvas.Left="60"> <Image Source="img/pausesilverlighttransp.png" Width="25" Height="26"></Image> </Canvas> <Canvas x:Name="btnPlay" Width="25" Height="26" MouseLeftButtonDown="btnPlay_MouseLeftButtonDown" Canvas.Left="120"> <Image Source="img/playsilverlighttransp.png" Width="25" Height="26"></Image> </Canvas> <Canvas x:Name="btnFullScreen" Width="25" Height="26" MouseLeftButtonDown="btnFullScreen_MouseLeftButtonDown" Canvas.Left="180"> <Image Source="img/fullscreensilverlighttransp.png" Width="25" Height="26"></Image> </Canvas> </Canvas> </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;
    
    namespace meuplayerfull
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
                Loaded += new RoutedEventHandler(Page_Loaded);
                Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged);
    
            }
            void Page_Loaded(object sender, RoutedEventArgs e)
            {  //Para definir o Source desta forma, o vídeo está na raiz do projeto web
                meVideo.Source = new Uri(Application.Current.Host.Source, "meuvideo.asx");
            }
    
            private void btnParar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                 meVideo.Stop();
            }
    
            private void btnPause_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
    
                 meVideo.Pause();
    
    }
    private void btnPlay_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
                 meVideo.Play();
    
    }
    private void btnFullScreen_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Application.Current.Host.Content.IsFullScreen = ! Application.Current.Host.Content.IsFullScreen;
            }
    
            void Content_FullScreenChanged(object sender, EventArgs e)
            {
                pnlBotoes.Visibility = Application.Current.Host.Content.IsFullScreen ? 
                    Visibility.Collapsed : Visibility.Visible;
            }
    
        }
    }

    Algumas questões: Porque você usou Canvas em todo lugar? 
    Porque você está usando Canvas nos botões ao invés de usar Button?

    Atenciosamente,
    Kelps Leite de Sousa
    blog: http://kelps-sousa.blogspot.com
    twitter : http://twitter.com/kelps

    Não se esqueça de "marcar como resposta" o ítem que lhe ajudou.
    • Marcado como Resposta Daniel Ferreira quarta-feira, 14 de julho de 2010 13:33
    sábado, 28 de novembro de 2009 12:13
    Moderador