"Project3DToMouse" - agregando Proyección 3D al movimiento del ratón con estilo

Jose Luis Latorre — Mon, 07 Jun 2010 00:09:00 GMT

Los Comportamientos, más conocidos como Behaviors, fueron una de las grandes adiciones de Silverlight 3 y solo han hecho que mejorar con Silverlight 4. Uno de las cosas con las que acostumbro a trastear en casa desde que apareció han sido las animaciones y proyecciones 3D, tratando de conseguir efectos e interacciones avanzados... El punto principal es que no son sencillos de implementar y es complejo de "ajustar" por uno mismo ya que implica recodificar cada vez que se quiere cambiar una personalización... claro está que con los behaviors esto es mucho más cómodo, ofreciéndonos un gran interfaz para personalizar nuestros efectos sin mucho esfuerzo.

Con esto en mente he hecho este comportamiento que realiza una Proyección 3D en base a la posición relativa del ratón. Lo podéis probar aquí:

http://www.brainsiders.com/playground/Project3DToMouse/default.html

Que hace?

Anima una proyección del FrameworkElement objetivo en los ejes X e Y de forma proporcional a la posición del ratón respecto otro FrameworkElement, normalmente el panel base, LayoutRoot.
Calcula la proyección y la aplica con unos grados de amplitud personalizable para los ejes X e Y. Porque no una única amplitud? pues porque la pantalla no es proporcional y esto permite ofrecer una experiencia más adecuada a las dimensiones de la misma, o bien ofrecer este efecto de una forma muy concreta (vertical, horizontal).
También realiza una animación configurable en tiempo y Easing, con lo que un diseñador o alguien con gusto puede hacer algún efecto interesante, haciendo que se mueva suavemente o de una forma divertida con un movimiento elástico, por ejemplo..
También he añadido un flag para decidir si la orientación será respecto el ratón o versus el mismo.
y, si el ratón sale del ámbito de actuación, nos realiza una animación a la posición de inicio.

Yendo al código, todo está categorizado con descripciones para ayudar a un uso intuitivo, se adapta bien a FrameworkElements de tamaño fijo o dinámico y el StoryBoard se genera en memoria, con lo que no puede solaparse con otra animación del mismo nombre así como este comportamiento puede aplicarse a más de un elemento de la página o control de usuario.

Todo el "cableado" se ha realizado en los eventos OnAttached y OnDetaching, el Invoke no hace nada, así que podría ser eliminado... He utilizado el TargetedTriggerAction ya que necesito recoger los eventos del ratón desde un control que ocupe la pantalla completa y aplicar el efecto a otro control preferiblemente más pequeño para apreciar el efecto. Sería bueno que pudiéramos desactivar el "invoke" de ciertos Behaviors para que los diseñadores no se confundan...

Sobre cómo utilizar este comportamiento, es fácil, copiar el archivo Project2Mouse.cs a tu proyecto y listo.. bueno, al menos para un desarrollador... para un diseñador sería bueno que pudiéramos añadir los comportamientos de una forma fácil, como un plug-in o una carpeta de behaviors y blend los mostrase y permitiera utilizarlos tal cual y, al añadirlos, agregase las referencias pertinentes.

Otra cosa que hallo algo por ahora algo molesta es que la actual interfaz es buena para 10 o 20 comportamientos pero a la que se supera esta cifra hallar un comportamiento ya no es algo inmediato.. Sería muy bueno si pudiéramos categorizar los comportamientos por nombre, autor, categoría y etiquetas..

Para obtener el comportamiento, este está publicado en la galería de comportamientos de Microsoft Expression, ubicada aquí:

http://gallery.expression.microsoft.com/en-us/Project3DToMouse

Obviamente con todo el código fuente y con una aplicación de test.

Estoy pensando en publicar otros Behaviors, pero después de limpiar toda la porquería que suele aparecer al jugar con diferentes animaciones e ideas hasta que sale el efecto deseado..

Si se te ocurre alguna idea para un comportamiento (Behavior) interesante, estaré interesado escuchar de él para tratar de implementarlo... mientras tanto agradeceré cualquier idea de mejora sobre el ya implementado y, si os gusta, pues podéis votarlo positivamente en la galería :).

Happy coding!

Nuevos temas lanzados para Silverlight 4.0 - Estupendo pero.. es suficiente?

Jose Luis Latorre — Mon, 31 May 2010 10:57:00 GMT

Recientemte Tim Heuer ha lanzado varios "themes" para Silverlight 4, podeis leer http://timheuer.com/blog/archive/2010/05/03/new-silverlight-4-themes-available-for-download.aspx y http://timheuer.com/blog/archive/2010/05/17/silverlight-4-tools-released-and-new-application-templates.aspx, junto con el lanzamiento de las Silverlight tools for Visual Studio 2010.

Aunque esta noticia se vio abrumada por la de las tools, creo que es muy interesante ya que estan definiendo (o como minimo proponiendo) un estándar para la definición de temas para Silverllight...

Realmente hacia tiempo que esperabamos un ejemplo como estos, ya que es lo que pretende Silverlight & WPF y como herramienta de diseño Blend: Desacoplar la interacción entre la parte relativa al diseñador y la parte asociada al desarrollador.

Este trabajo se mejoró con la aparición de los comportamientos, en Blend -Silverlight 3.0 y con soporte mejorado para Blend 4.0 (beta) y SL 4.0.

Por ahora el modo de generar y manejar todo esto, es colocar una serie de archivos en una carpeta de "Assets" que si se hace bien contempla varios archivos de estilos, librerias de recursos y varios comportamientos, ver http://storage.timheuer.com/newthemes-structure1.png

Tambien puede incorporar alguna fuente, imagen o video, segun el estilo en cuestión.

Ello en si es algo grande, nos permite desacoplar la interacción de estilos y es relativamente simple.... para desarrolladores... para un diseñador "puro" esto es complejo y cuesta.

Mi propuesta de enfoque es simplificar aun más el modelo de interacción para los temas ya que tienen entidad propia, pues asignarles un tipo de proyecto propio, Biblioteca de temas, estilo cosmopolitan.theme.dll...

De forma que un diseñador pueda crear una biblioteca de temas estilo "Cosmopolitan.theme.dll" y la aplicación pueda cambiar en cualquier momento el theme que utiliza sin tener que eliminar archivos de estilos, behaviors, imagenes, fuentes, etc... sino incluso pueda tener varias librerias de estilo asociadas y cambiarla como desee vía codigo o, mejor, mediante un comportamiento.

Ventajas de mi propuesta:

El diseñador podrá abstraerse de la complejidad de la aplicacion y diseñar solo en la biblioteca de estilos.
El diseñador evita tocar todo código sensible del desarrollador - favorecemos la separación y desacoplamiento.
Favorecemos el mercado potencial de "themes" para Silverlight. Si yo quiero vender themes, seria bueno que la tecnología los soportase.
Favorece el reaprovechamiento de themes para crear otros y estimular asi la creatividad y "competitividad" entre diseñadores (y desarrolladores).
Se hara por fin muy visible la ventaja de Blend y Silverlight para desacoplar totalmente la parte de aspecto e interacción visual con la de programación. (muy necesario).

Por otro lado es muy facil montar un proyecto de test generico en el cual se visualicen varias paginas con todos los controles, los de SL basicos, los del SDK, graficos, los de la Toolkit asi como que sea facil de añadir dinamicamente controles propios... y que el diseñador probase el estilo sin menor problema.

Y ya por pedir, esto seria buenisimo que estuviera integrado en Blend 4.0....

Por otro lado, el tipo de dll propuesto "theme.dll" no es que es más que una dll normal de silverlight, es solo una plantilla facil de hacer con implementaciones de todos los controles por defecto. solo se cambiarian las plantillas para que gestionaran estas plantillas permitiendo su carga y descarga dinamica en base al directorio de Assets, por ejemplo). MEF nos permitiria hacer esto muy facilmente..

Como lo veis? que opinion os merece esta idea??

Si os parece bien podeis votarla como una propuesa de features para Silverlight: http://dotnet.uservoice.com/forums/4325-silverlight-feature-suggestions/suggestions/793999-support-for-theme-projects-dynamic-theme-switchi

El Blog de José Luis Latorre en Geeks.ms : blend

"Project3DToMouse" - agregando Proyección 3D al movimiento del ratón con estilo

Nuevos temas lanzados para Silverlight 4.0 - Estupendo pero.. es suficiente?