Desde mis inicios en Silverlight 2 una parte fundamental para su implementación en mi trabajo son las animaciones, esta característica es la que al igual que flash, distingue mucho a estas aplicaciones de las aplicaciones ordinarias, coincido con muchos en que Silverlight esta orientado a aplicaciones web mas que a sitios, pero no coincido en que hacer una aplicación empresarial es mas funcionalidad que vista, al final del día un cliente asumirá que su aplicación servirá como la quiere, pero si le damos el plus de una buena imagen es definitivamente mucho mejor tanto para su uso como para una buena recomendación (que al final del día es lo que mas nos puede interesar), así que debemos considerarlas tanto como sea posible.
Para este post, lo que pienso explicarte es en como hacer una animación “genérica” que te permita utilizarla en varios elementos, esto con el fin de ahorrar código y además mejorar un poco tu performance.
Así que empezaré por lo mas básico, ver como funciona una animación.
En el siguiente ejemplo puedes ver un botón con un borde que permite mostrarlo.
El código XAML que se ejecuta con esta animación es el siguiente.
Bien, entonces, ya tienes la animacion y una sección a la que puedes meter o sacar, el problema es cuando tienes mas de una sección, como puedes ver en las líneas del XAML de la animación, hay una propiedad que se llama Storyboard.TargetName este es el objeto al cual le vas a aplicar la animación, por decirlo de alguna forma, no importa si como en este caso se modifiquen en una o varias propiedades.
Para que puedas utilizar esta misma animación en diferentes elementos, simplemente elimina esta propiedad de la animación, para que resulte en la animación de entrada de la siguiente forma.
Ya que lo hiciste, simplemente ve a tu código C# y escribe en el evento Click del botón lo siguiente.
private void btnSeccion1_Click(object sender, System.Windows.RoutedEventArgs e) { entrada.Stop(); entrada.SetValue(Storyboard.TargetNameProperty, border); entrada.Begin(); } |
Como verás, simplemente comienzas por detener la animación, esto es necesario para que después puedas modificar una de sus propiedades y por último ya puedas correr la animación, hasta aquí visualmente no se apreciará ningún cambio, pero para hacer las cosas un poco mas completas vamos a simular el escenario con tres botones y tres botones y así puedas notar mejor la diferencia, ya completo el XAML debe quedarte de la siguiente forma (sin animaciones).
Y en el lado del C# puedes poner algo como lo siguiente.
private void btnSeccion_Click(object sender, System.Windows.RoutedEventArgs e) { Button botonElegido = sender as Button; switch (botonElegido.Name) { case "btnSeccion1": elQueEntra = "border1"; break; case "btnSeccion2": elQueEntra = "border2"; break; case "btnSeccion3": elQueEntra = "border3"; break; } entrada.Stop(); entrada.SetValue(Storyboard.TargetNameProperty, elQueEntra); entrada.Begin(); } |
En donde “ElQueEntra” es una variable de tipo string, y mediante un cast al sender y un switch tu decidirás que tipo de elemento le vas a asignar a la animación, el resultado te puede quedar de la siguiente manera.