Tutorial de Introducción a Silverlight

Hola Gente, cómo están?

Antes que nada, les comento que hace un tiempo agregué un contador de visitas a la página y me sorprendió la cantidad de gente que entra.

No es WOW! Pero entra mucho más de lo que yo imaginaba. Me gustaría que además me dejaran su comentario acerca de si les gustó, les sirvió o si necesitan alguna ayuda con otro tema.

Disulpen mi demora al actualizar pero estas épocas siempre vienen atareadas.

Hoy les dejo un pequeño tutorial de cómo empezar con Silverlight. Es todo práctico, si quieren ver teoría les sugiero que busquen fuentes oficiales de Microsoft.

Es algo muy sencillo, pero que les puede servir para aquello que quieren empezar con Silverlight.

Let's work!

Primero y antes que nada crearemos nuestro proyecto. Yo por comodidad elijo el lenguaje C#.

Seleccionamos Aplicación de SIlverlight. De nombre le pondremos "MiPrimerSilverlight".

Optamos por la versión 3 de Silverlight y dejamos marcada la opción para generar automáticamente una página para hostear nuestra animación Silverlight.

Bueno, una vez creado nuestro proyecto podrán ver el código que ha generado VS en nuestra Page.xaml. Debe ser similar al siguiente:

<UserControl x:Class="MiPrimerSilverlight_cs.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">

</Grid>

</UserControl>

Si observan ese código verán dos elementos. Un UserControl y una grilla Grid. Bien, para este ejemplo reemplacemos la gilla por el siguiente elemento:

<Canvas x:Name="LayoutRoot" Background="White>

</Canvas>
Este elemento, no es más que un lienzo que va a contener a nuestra animación.

Ahora agreguaremos tres elementos a nuestra animación. Primero dos botones:

<Button x:Name="btnComenzar" Canvas.Top="10" Canvas.Left="250" Content="Comenzar" Click="btnComenzar_Click" />

<Button x:Name="btnParar" Canvas.Top="40" Canvas.Left="250" Content="Detener" Click="btnParar_Click" />
Observen las propiedades que hemos seteado para nuestros botones.

Canvas.Top determina la distancia del botón respecto del Top de nuestro lienzo.
Canvas.Left determina la distancia del botón respecto de la izquierda de nuestro lienzo.

En sí, estas son propiedades del método, que se aplican de manera indirecta a nuestros botones. No entraré mucho en detalle, para más info pueden consultar documentación de Silverlight.

Ahora incluímos nuestro tercer elemento dentro del lienzo. Un círculo.

<Ellipse x:Name="pelota" Fill="Red" Canvas.Top="10" Canvas.Left="100" Height="50" Width="50" />
Hasta acá nuestra animación luciría así.



Ok, pero esto no se mueve no?

Vamos a comenzar con la animación propiamente dicha.

Primeramente, para ello, crearemos nuestra sección de recursos de la animación si? Entonces agregamos las etiquetas:

<UserControl.Resources>

</UserControl.Resources>
Y qué pondremos en ella? Bueno, aquí deberíamos detenernos un ratito a pensar qué es una animación.
Cuando pensamos en animación, pensamos en algo moviéndose, o cambiando de color, ect. Es decir, cambiar las propiedades de un objeto, dentro de un período de tiempo.
Bien ahora pensemos en cómo funciona una animación. Basicamente, en una línea de tiempo no? Y esa línea de tiempo la podemos dividir en pequeñas celdas o fotogramas, en cada uno de los cuales ocurren movimientos y/o acciones.
Teniendo en mente que estos fotogramas, uno al lado de otro forman básicamente la animación, dentro de una o más líneas de tiempo, podemos completar nuestros recursos.

Primeramente agregamos nuestra "línea de tiempo" (nuevamente les recomiendo que para mayores detalles se remitan a la documentación de Silverlight, estos son simples ejemplos)

<Storyboard x:Key="bounce">

</Storyboard>
Una vez agregado nuestro Stodyboard, agregaremos en él nuestra primer animación o fotograma como hablamos anteriormente, en este caso por ser una de las más comunes optamos por una DoubleAnimation

<DoubleAnimation Storyboard.TargetName="pelota"
Storyboard.TargetProperty="(Canvas.Top)"
To="250" From="10" Duration="0:0:2" />
Ok, otra vez observemos las propiedades que hemos seteado.

Storyboard.TargetName determina el objeto que se modificará
Storyboard.TargetProperty determina la pripiedad que cambiará de dicho objeto
From indica el valor que obtendrá esta propiedad al comenzar el fotograma
To indica el valor que obtendrá esta propiedad al terminar el fotograma
Duration determina la duración en HH:MM:SS

Miremos también que a Storyboard.TargetProperty le hemos puesto un valor entre paréntesis. Esto es por, como mencioné anteriormente, es una propiedad "indirecta".

Bueno, casi hemos terminado, quedaría ahora asignar acciones a los eventos de los botones para poder ver nuestra animación.
Hasta ahora nuestro código luciría así:

<UserControl x:Class="MiPrimerSilverlight_cs.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<DoubleAnimation Storyboard.TargetName="pelota"
Storyboard.TargetProperty="(Canvas.Top)"
To="250" From="10" Duration="0:0:2" />
</Storyboard>
</UserControl.Resources>

<Canvas x:Name="LayoutRoot" Background="White">
<Button x:Name="btnComenzar" Canvas.Top="10" Canvas.Left="250" Content="Comenzar" Click="btnComenzar_Click" />

<Button x:Name="btnParar" Canvas.Top="40" Canvas.Left="250" Content="Detener" Click="btnParar_Click" />

<Ellipse x:Name="pelota" Fill="Red" Canvas.Top="10" Canvas.Left="100" Height="50" Width="50" />
</Canvas>
</UserControl>
Ahora procederemos a modificar el CodeBehind de nuestra animación de Silverlight.

Primero, en el evento del botón btnComenzar agregamos un objeto de tipo Storyboard y lo instanciamos obteniendo el que creamos anteiormente.
Teniendo este objeto ya, podemos llamar a su método Begin para comenzar la animación

private void btnComenzar_Click(object sender, RoutedEventArgs e)
{
Storyboard sb = this.Resources["bounce"] as Storyboard;

sb.Begin();

}
Haciendo algo casi igual, escribimos el evento del botón btnParar para detener nuestra animación:

private void btnParar_Click(object sender, RoutedEventArgs e)
{
Storyboard sb = this.Resources["bounce"] as Storyboard;
sb.Pause();
}
Bueno, con esto ya hemos finalizado, nuestro CodeBehind debe lucir así:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MiPrimerSilverlight_cs
{
public partial class Page : UserControl
{
bool isstarted = false;
public Page()
{
InitializeComponent();
}

private void btnComenzar_Click(object sender, RoutedEventArgs e)
{
Storyboard sb = this.Resources["bounce"] as Storyboard;

sb.Begin();

}

private void btnParar_Click(object sender, RoutedEventArgs e)
{
Storyboard sb = this.Resources["bounce"] as Storyboard;
sb.Pause();
}
}
}

Eso es todo mis amigos, un ejemplo en demasía simple, pero lindo para comenzar.

Pronto traeré una pequeña modificación de este código para obtener otros resultados.

Queda en ustedes también continuar experimentando en base a esto.

Saludos. Espero sus coments!