Jugando con videos en Expression Blend

Hacía ya tiempo que no escribía nada en el blog y ya iba siendo hora de aportar algo a la comunidad de nuevo, aunque solo fuera un poquito.

Aprovechando el anuncio de la salida de la preview de Blend 2.5 quiero mostrar como reproducir un vídeo en WPF de una forma diferente a como lo hacemos normalmente con el Windows Media Player o con el VideoLan, lo vamos a mostrar inclinado sobre una ventana en 2D.

Normalmente cuando necesitamos hacer un reproductor multimedia muy rápidamente en Windows Forms, lo que hacemos es directamente agregar la dll del Windows Media Player.

Bueno pues en WPF la forma más rápida es agregar un componente que ya viene hecho denominado MediaElement.

image

Lo malo de este elemento es que solamente podemos ver el vídeo tal cual agregamos el componente a la ventana, es decir, una vez le hemos dado el tamaño adecuado no podemos girarlo, ni inclinarlo ni nada por el estilo, así que necesitamos una solución.

Para ir al siguiente paso hay un "pequeño" concepto que debemos conocer que son los brushes o brochas. Cuando vemos una aplicación en WPF toda ella está siendo pintada por brochas, las brochas pueden pintar desde simples colores sólidos, a gradientes e imágenes 😀

Existe un tipo de brocha denominada VisualBrush que permite pintar el área que nosotros queremos de idéntica forma a como está en otro lugar de nuestra aplicación.

La manera de hacerlo es la siguiente, una vez tenemos en el diseñador agregado un componente MediaElement con su propiedad source inicializada (esto lo hacéis mediante los menús de la derecha y si no la veis arriba del todo tenéis un buscador, ponéis source, pulsáis enter y aparece), con el componente seleccionado os vais al menú Tools, luego a Make Brush Resource y en el menú que aparece pulsáis sobre Make Visual Brush Resource y le dais un nombre.

De esta manera ya tenemos una brocha para pintar el elemento que queramos.

Ahora podemos agregar un componente image a nuestra ventana, al cual giraremos e inclinaremos a nuestro antojo, pero para ello tenemos que convertirlo en un objeto 3D.

Con el objeto image seleccionado, pulsamos sobre Tools y luego en Make Image 3D

image

Nuestro objeto image cambia y se convierte en un objeto Viewport3D con varias secciones en su interior. Por medio objects and timeline seleccionamos el modelo (Model).

image

Mientras en el diseñador debemos ver un rectángulo con tres vectores en el centro.

image

Bueno pues tal cual hemos seleccionado Model nos vamos a sus propiedades y en Materials aparecen dos opciones Material y BackMaterial, que se refieren a las texturas que podemos dar al modelo, nosotros solo lo vamos a ver por la parte de delante así que pulsamos sobre Material, y en el menú que aparece pulsamos sobre Brush Resources.

image

Es la parte delimitada de rojo, luego en Local Brush Resources está la brocha que hemos creado anteriormente y que debemos seleccionar.

El diseñador debe tener un aspecto parecido a esto:

image

Si ejecutáis debe comenzar a reproducirse el vídeo que halláis indicado de forma automática tanto en el MediaElement como en el modelo 3D.

A continuación seleccionamos la herramienta Camera Orbit o directamente pulsamos "c", si pinchamos sobre el modelo vemos que podemos rotarlo y girarlo a nuestro antojo.

Veremos algo así:

image

Ahora si ejecutamos ya podemos ver la reproducción inclinada y girada.

image

Bueno de momento eso es todo por hoy, otro día más. 😀

Saludetes