Usuário com melhor resposta
Como Fazer o MediaElement ficar na frente dos botões ao dar FullScreen e o FullScreen Centralizar no monitor

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