Todavía le queda mucho camino que recorrer a Silverlight, y para muestra un botón. Vamos realizar un pequeño ejemplo. Nuestra aplicación Silverlight consistirá en un Canvas divido en dos partes, al que añadiremos círculos dinámicamente allí donde hagamos click con el raton. Además a cada círculo le añadiremos una animación, de tal forma que la bola suba o baje en función del lugar donde hayamos hecho Click.
Añadir un elemento dinámicamente a un Canvas es trivial:
-
creamos el elemento
-
le asignamos la propiedades que lo definen
-
lo posicionamos
-
y finalmente lo añadimos a la colección de elementos del Canvas.
Pero claro, posiblemente además de querer añadir un elemento dinámicamente, queramos añadirle un storyboard con animaciones parametrizadas, como por ejemplo por el valor de la posición del ratón. Seguramente en un primer momento pensamos que si hemos sido capaces de añadir un elemento dinámicamente a nuestro control Silverlight, añadir un Storyboard se limitara a crear los objetos necesarios para crear la animación (un StoryBoard y un objeto Animation).
Pues teóricamente sí, pero después de una cuantas pruebas y echar un vistazo en googleEspasa he descubierto que se trata de un bug de la versión 1.1 de Silverligt (no debemos olvidar que se trata de una versión alfa). Pero como dicen por ahí, casi todo tiene solución en esta vida menos Windows Me.
La solución la encontramos en otra acción dinámica, pero desde mi punto de vista poco elegante. Consiste en cargar el código XAML que define un storyboard (animación incluida) en el momento de la deficion del objeto Storyboard. Finalmente añadimos el objeto Storyboard a la colección de Resources.
-
Storyboard sb = XamlReader.Load(String.Format(
-
@"<Storyboard xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"" x:Name=""{0}"">
-
<DoubleAnimation Storyboard.TargetName=""{1}""
-
Storyboard.TargetProperty=""(Canvas.Top)"" To=""{2}"" Duration=""00:00:01""> </DoubleAnimation>
-
</Storyboard>", "sb_" + contador, circulo.Name,to)) as Storyboard;
-
-
sb.Completed += delegate(object s, EventArgs eventArgs)
-
{
-
this.Resources.Remove(sb);
-
Contenedor.Children.Remove(circulo);
-
};
-
-
Contenedor.Children.Add(circulo);
-
this.Resources.Add(sb);
En este código lo realmente importante es la línea en la que haciendo uso del objeto XamlReader y el método Load() (al cual le pasamos un String con el XAML que define el Storyboard) obtenemos un objeto Storyboard parametrizado.
Para ver el ejemplo es necesario tener instalado la version 1.1 de Silverlight. Si no la tienes puedes conseguirla aquí. Si pulsas sobre el logo de Silverlight te instalarás la ultima versión oficial, y en el momento de escribir el artículo la version oficial es la 1.0.
Y este sería el resultado. Haz Click sobre la imagen.
Artículo publicado en Malvicio.com
febrero 24th, 2008 at 21:04
Muy interesante el artículo, aunque como indicas, Silverlight necesita aún bastante para convertirse en una tecnología de referencia en el mundo web, aunque despunta maneras.
Respecto al ejemplo de hoy, se me están ocurriendo un par de usos que bueno… ya te comentaré para tu próximo artículo, bien en tu blog, bien en Malvicio