Trucos: Soporte del modo a pantalla completa con Silverlight

Una de las capacidades que tiene Silverlight es el modo a pantalla completa, ocupando completamente toda la pantalla (escondiendo todo de la vista, incluso el frame del navegador). Esto puede ser muy útil a la hora de crear experiencias de usuario, juegos, reproductores de video, etc.

Por poner un ejemplo de esta característica, echadle un vistazo al ejemplo de Fox Movies en www.silverlight.net:

Una vez que le carga la página y empieza la película, haced doble clic en el centro del video para pasar al modo de pantalla completa (nota: la captura de pantalla de arriba no fue en modo a pantalla completa). Para volver otra vez al modo normal, sólo teneis que pulsar la barra espaciadora.

Cómo implementar el modo a pantalla completa con Silverlight 1.1 usando .NET

Una de las preguntas que he visto a la gente preguntar es: ¿Cómo puedes implementar el modo a pantalla completa cuando desarrollas aplicaciones con Silverlight usando .NET?» Las buenas noticias es que es realmente fácil:

1) Primero añadimos un event handler en nuestra aplicación (por ejemplo: un clic de ratón o un evento de teclado). Por razones de seguridad Silverlight no permite a los desarrolladores saltar a modo de pantalla completa cuando ejecutas por primera vez el programa (no queremos que una aplicación nos «spoofee», ¿verdad?). De modo que necesitáis lanzar el modo a pantalla completa en respuesta a una acción del usuario.

2) En vuestro event handler poned la propiedad BrowserHost.IsFullScreen a true (nota: la clase BrowserHost está en el namespace System.Windows.Interop). Esto hace que Silverlight pase a modo pantalla completa. Para volver al modo normal sólo tenéis que poner esa propiedad a false.

Ejemplo de pantalla completa simple.

Aquí tenéis un ejemplo de pantalla completa con Silverlight en C#. 

Cuando ejecutais el ejemplo se os abrirá una aplicación Silverlight muy simple en el navegador que tengáis por defecto y os mostrar un mensaje de texto que os dice que hagáis clic para pasar al modo de pantalla completa.

Si hacéis clic en «Click for Full Screen», la aplicación se mostrará en pantalla completa – ocultando todo lo que se esté ejecutando y ocupará toda la pantalla:

Cuando paseis a modo pantalla  completa, Silverlight mostrará un mensaje durante unos segundos dando las instrucciones necesarias para quitar el modo de pantalla completa pulsando la tecla ‘Esc’. En el ejemplo, además, hemos permitido que se pase al modo normal cuando se haga clic en «Click to Return to Browser».

Ojeando el ejemplo

El código de la aplicación de arriba es realemente simple.

Para empezar, podemos editar el archivo .XAML raíz de la aplicacion, y añadir un control de usuario que queramos usar para lanzar el modo de pantalla completa. En el ejemplo hemos usado un control <TextBlock> que hemos llamado «MyMessage». Aquí tenéis el código del arhivo .XAML:

Ahora os muestro el código trasero del .XAML de arriba – y contiene todo el código de la aplicación:

En el evento Page_Loaded() de la aplicación estamos asignando dos event handlers:

MyMessage_MouseLeftButtonDown – Este evento se ejecutará cada vez que un usuario haga clic en el mensaje del TextBlock que hemos puesto en el archivo XAML. En este evento tan sólo estamos poniendo la propiedad BrowserHost.IsFullScreen a true o false dependiendo de si ya estaba en modo a pantalla completa.

BrowserHost_FullScreenChange – ESte evento se ejectuará cada vez que cambiemos entre los modos de pantalla completa y normal. De esta forma tenemos un buen lugar para añadir cierta lógica que necesitemos para actualizar la interfaz de usuario cuando esto ocurra. En el ejemplo de arriba estamos cambiando el texto del control TextBlock. Podríamos haberle cambiado el tamaño de los controles o moverlos por la pantalla a unas nuevas coordenadas por ejemplo. Actualmente, la versión Alpha de Silverlight 1.1 no soporta layouts, así que los controles no se reposicionarán automáticamente a menos que escribamos el código que lo haga (no os preocupéis – tanto los controles de layout para Silverlight como para WPF están por llegar).

A parte de la propiedad IsFullScreen, la clase BrowserHost tiene otras propiedades y eventos que pueden ser útiles:

Las propiedades ActualHeight y ActualWidth son muy útiles para tener las dimensiones de la pantalla cuando cambiamos al modo pantalla completa – de forma que podemos escalar o reposicionar nuestros controles en la interfaz de usuario de la página.

Resumen

Habilitar el modo a pantalla completa con Silverlight es muy fácil, ofreciendo la posibildad de crear experiencias de usuario más inmersivas.

Para leer más sobre Silverlight, echadle un vistazo al post anterior sobre Silverlight y visitad www.silverlight.net

Si queréis verme construir una aplicación Silverlight con .NET y Visual Studio «Orcas», ved este vídeo.

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos. Microsoft Student Partner

0 comentarios sobre “Trucos: Soporte del modo a pantalla completa con Silverlight”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *