Construyendo una Barra de Herramientas con Silverlight

Introducción

Como ya saben, silverlight viene a dar “luz” a la web, si bien algunos podrían pensar que nada nuevo esta pasando ya que existen tecnologías que hacen lo mismo, sin embargo, Silverlight tiene ventajas sobre esas tecnologías, por ejemplo las “escenas” no se convierten a un archivo compilado cerrado dando la posibilidad de modificarlo ( si es que así se setea) , Silverlight utiliza archivos XAML que contienen la información de los gráficos y animación. Además la programación ( que generalmente es lo que nos interesa) es bastante más amigable para nosotros, los desarrolladores.

La Botonera

La idea es crear una barra de herramientas animada, que nos pueda servir como menú de una pagina web. Echemos un vistazo de cual es el resultado esperado ( este es solo un ejemplo, andaba falto de imaginación para los íconos).

Cada vez que se pasa el mouse sobre una imagen, se hace el efecto de zoom sobre el ícono, y cuando se presiona sobre él gira en 360 grados ( que lindo no?). El en ícono de Media Center , cuando haces click aparece una ventana con la autoría del este lindo ejemplo, jejeje.

Construcción:

Para diseñar la toolbar utilizamos Microsoft Expression Blend 2 y para lo programación, notepad ( si como leer, para nuestro ejemplo, nada más). Todos los íconos que utilizamos son PNG, con fondo transparente. El fondo es un rectángulo con los bordes redondeados.

Cada icono tiene asociando los siguientes eventos, las cuales harán llamadas funciones javascript correspondientes, las cuales van a gatillas las animaciones.

…MouseLeave="runoff" MouseEnter="runon" MouseLeftButtonDown="runclick"

Obviamente las llamadas a javascript corresponden a cada opción, es decir:

<script language="javascript">
function lupaon(sender,args){sender.findName("lupaon").Begin();}
function lupaoff(sender,args){sender.findName("lupaoff").Begin();}
function lupaclick(sender,args){sender.findName("lupaclick").Begin();}
function panelon(sender,args){sender.findName("panelon").Begin();}
function paneloff(sender,args){sender.findName("paneloff").Begin();}
function panelclick(sender,args){sender.findName("panelclick").Begin();}
function basureron(sender,args){sender.findName("basureron").Begin();}
function basureroff(sender,args){sender.findName("basureroff").Begin();}
function basureroclick(sender,args){sender.findName("basureroclick").Begin();}
function runon(sender,args){sender.findName("runon").Begin();}

function runoff(sender,args){sender.findName("runoff").Begin();}

function runclick(sender,args){sender.findName("runclick").Begin();}

function acercaclick(sender,args){sender.findName("acercaon").Begin();}
function acercaoff(sender,args){sender.findName("acercaoff").Begin();}
function blog(sender,args){window.open("http://geeks.ms/blogs/gperez","_blank");}

</script>

Como podemos ver, en cada función javascript se llama al método Begin de cada animación.

Diseño:

Como decíamos, cada ícono tiene su correspondiente (on, off, click), además existe 3 funciones adiciones(acercarclick, acercaoff, blog), las dos primeras son mostrar y ocultar el cuadro de “Acerca de…” una asociada al icono del media center, la otra asociada a la X para cerrar, recuerda que siempre que quieres hacer referencia a algún objeto debe estar su X:Name seteado. Blog es la función que se llama desde el pseudo link del banner,( solo es un textblock color azul y subrayado).

Debes fijarte en las posiciones cuando haces la animación, para que cuando aumentes de tamaño la imagen, está se vea bien. Recuerda hacer la animación que corresponde a cuando se hace zoom-in y la que hace zoom-out.