Silverlight 1.0 Parte III

October 26th, 2007

Animaciones

En Silverlight 1.0 se pueden generar animaciones a partir de UI Elements.  

Para darle animación a un elemento tiene que setearse la propiedad Name del elemento. Esto sirve para identificar al elemento que se quiere animar.

Se puede utilizar un Trigger para capturar un evento (en Silverlight 1.0 el único disponible es el load de un Canvas). Se establece en el tag BeginStoryboard los pasos que va a realizar la animación.

<Canvas

    xmlns=”http://schemas.microsoft.com/client/2007″

    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”>

  <Canvas.Triggers>

    <EventTrigger RoutedEvent=”Canvas.Loaded”>

      <EventTrigger.Actions>

        <BeginStoryboard>

         

          <!– Insert Storyboard here. –>

        </BeginStoryboard>

      </EventTrigger.Actions>

    </EventTrigger>

  </Canvas.Triggers>

 

  <Ellipse x:Name=”ellipse”

      Height=”20″ Width=”20″ Canvas.Left=”30″ Canvas.Top=”30″

      Fill=”black”/>

</Canvas>

Figura: Esqueleto de un archivo XAML que ejecuta una animación (fuente QuickStar Silverlight 1.0)

Tipos de Animaciones

DoubleAnimation

Indica que se quiere animar una propiedad del objeto que es de tipo double.

ColorAnimation

Indica que se quiere animar una de las propiedades del objeto que es de tipo color.

PointAnimation

Indica que se quiere animar una de las propiedades del objeto que es un punto.

Propiedades

TargetName

Indica el nombre del objeto a animar

TargetProperty

Indica la propiedad que se quiere animar

From

Indica el origen de la propiedad del objeto a animar. Por defecto es el valor actual de la propiedad

To

Indica el destino de la propiedad del objeto a animar.

By

Especifica un offset para la propiedad del objeto a animar (por ejemplo en posiciones, puede indicar avanzar de a 2 posiciones).

Duration

Indica la duración de la animación (en formato hora:min:seg). OJO: poner un número indica días!!. Este atributo también puede setearse con 2 valores especiales “Forever” y “Automatic”. Forever indica que la animación no termina nunca. Automatic indica que la animación es instantánea (este es el valor por defecto)

BeginTime

Indica el comienzo de la animación (a partir del momento que ocurre el evento, indica cuanto tiempo hay que esperar). El formato es el mismo que el atributo Duration

FillBehavior

Indica si la propiedad del objeto animada vuelve a su valor anterior a la animación o si permanece en el valor final de la animación.  Los valores son Stop y HoldEnd (respectivamente). Por defecto el valor es HoldEnd.

RepeatBehavior

Indica cuantas veces se repite la animación. Puede tener 3 tipos de valores:

-          Forever (que indica que la animación se repite indefinidamente)

-          Un tiempo finito (formato como el campo Duration). Lo que indica que la animación se repite cada cierto intervalo finito de tiempo

-          Un número de iteraciones (formato numberx) que indica que la animación se repite una cantidad finita de veces.

Por defecto el valor es 1x.

Scripting y eventos de mouse

Se pueden capturar eventos del mouse y manejarlos mediante scripting.  Para esto se tiene que acceder a los objetos (el plug-in, el canvas y los objetos contenidos en el canvas) en las funciones javascript y cambiar el valor de sus propiedades. También se pueden crear en forma dinámica objetos manipulando el XAML y controlar animaciones también mediante scripting.

Todos los objetos pueden capturar eventos del mouse.

Para acceder a un objeto en javascript existen 3 posibilidades:

-          Que sea pasado como parámetro: Cuando se indican parámetros en las funciones que se utilizan para manejar el evento, el primer parámetro siempre es el objeto que capturó el evento (sender).

-          Qué esté contenido dentro del objeto pasado como parámetro: En ese caso se utiliza sender.findName(“nombreObjeto”). El objeto a buscar debe tener seteada la propiedad Name.

-          Que se esté buscando el objeto plug-in: En este caso puede obtenerse mediante el método getHost() del objeto sender (siempre que exista un objeto sender) o invocando al método getElementById.

Dos métodos interesantes son:

-          sender[“attachedPropertyName”]:  Permite manipular las propiedades adjuntas del objeto sender . Por ejemplo:

-     function changelocation(sender, args) {
-         
-         sender["Canvas.Top"] = 70;
-     }

-          createFromXAML: Permite modificar el archivo XAML dinámicamente. Se invoca llamando al objeto plug-in.content.createFromXaml. A continuación se ve el código de una función que agrega un elipse en la pantalla:

-     function createEllipse(sender, args) {
-         
-         var slControl = sender.getHost();
-         var e = 
-             slControl.content.createFromXaml(
-                 '');
-         var canvas = sender;
-         canvas.children.Add(e);
-     }

Eventos de mouse

MouseLeftButtonDown

Se dispara cuando se presiona el botón izquierdo del mouse sobre el elemento que contiene el handler del evento

MouseLeftButtonUp

Se dispara cuando se suelta el botón izquierdo del mouse sobre el elemento que contiene el handler del evento

MouseEnter

Se dispara cuando el cursor se posiciona sobre el elemento que contiene el handler del evento

MouseLeave

Se dispara cuando el cursor deja de estar posicionado sobre el elemento que contiene el handler del evento

MouseMove

Se dispara cuando el cursor se mueve estando posicionado sobre el elemento que contiene el handler del evento

Otros Eventos

Loaded

Se dispara cuando se carga un elemento.
Posted by Filed in Silverlight

Leave a Reply