• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

SilverLight Data Type Animations

Silverlight Animation

Animations are used to give moments to silver light controls by taking control properties, using animation we can give rich internet user interface to the Asp.net application.

  • The animation we can classified in to two types basically.
  1. Data type animation or from / to / by animation
  2. Key frame animation

Data Type Animation

This animation is used to Animate silver light controls by taking control properties, In the Data type animation  we can give only one target for animation

  • The data type animation we can classified in to three types
  • The animation between starting and ending
  1. Double animation
  2. color animation
  3. point animation

Double Animation

using this animation we can give animation to silverlight control by taking double related properties (or) which property taking numeric values.

EX:- open new silverlight application

Go to XAML mode

in the canvas tag

<canvas>

<text block x:Name = “t1” Text = “welcome” fontsize = “100” canvas. Left = “15”>

</textblock>

<rectangle x: name = “r1’ height = “150” width = “500” stroke = “yed” stroke thickness = “100” stroke dash array = “2” stroke dash offset = “5”>

<rectangle. Triggers>

<event trigger Routed event = “canvas. Loaded”>

<Begin story board>

<story board>

<double animation story board.Talget name

=”r1” storyboard . Target property= “stroke dash offset “   from = “1” to = “1” auto revels  = “true” repeat behavior = “forever”

</double animation>

</storyboard>

</begin storyboard>

</event trigger>

<Rectangle. Triggers>

</rectangle>

</canvas>

Rectangle. Trigger:

This tag is used to inclement the evens

Event trigger:

Using this tag we can set the implementing event

  • As per XAML we have to define animation in the story board, using story board we can control all animation, all story boards we have to define in the begin story board, all story board we can control using begin storyboard.
  • Story board. Target name property using for deciding giving animation control
  • Story board. Target property using this property we can decide giving animation property
  • From using this property animation starting location
  • To using this property animation ending location
  • Auto revels:- using this property animation in the revels order
  • Repeat behavior: using this property we can set animation repeating type, this property supports three types of repeating types
  1. Times pan (0: 0: 15) ! Repeat animation 1.5 seconds
  2. Iterations (5x) : repeat animation 5 times
  3. Literal (forever ) repeat continuously

Color Animation

This animation is used to animate silver light control by taking color related properties

EX:- open new silver light application

Go to SAML mode

In the canvas tag

<canvas>

<polygon X:Name = “p1” height = “250” width = “300” fill = “Red” stroke = “Green” stroke thickness = “10”>

<polygon. Points>

<point X = “30” Y= “40” > </point>

<point x= “200” Y = “10”> </point>

<point x= “150” Y = “100”> </point>

</polygon. points>

<polygon. Triggers>

<Event Trigger Routed Event = “canvas. Loaded”>

<begin story board>

<story board>

<color animation storyboard. Target name = “p1” story board. Target property = “(fill), (color)” from = “red”  To = “black” auto reverse = “True” repeat behavior = “Forever”>

</color animation>

</story board>

</Begin story board>

</Event trigger>

</polygon. Triggers>

</polygon>

</canvas>

Polygon:

This control is used to create closed shapes by defining collection of points

Polygon. Points:

using this tag we can create workspace for defining points

Point:

This tag is used to define one point by specifying X location and Y location

Point Animation

using this Animation we can animate silverlight control by taking which properties having two parameters.

Example:- open new silver light application

Go to XAML Mode

In the canvas tag

<canvas>

<Ellipse X: name = “e1” height = “200” width = “300” stoke = “blue” stroke thickness = “10”>

<Ellipse  . fill>

<Radial Gradient Brush X: Name = “I” gradient origin = “.5”

<Gradient stop offset = “.2” color = “red “ > </ gradient stop>

<Gradient stop offset = “.4” colot = “green”> </gradient stop>

<gradient stop offset = “.6” color = “while”> </gradient stop>

<Gradient stop offset =  “.8” color = “black”> </gradient stop>

</radial gradient brush>

</ellipse.fill>

<event Trigger routed Event = “canvas loaded”>

<begin story board>

<story board>

<point animation storyboard. Target name= “rd”  storyboard. Target property = “gradient origin” from = “.1,.1” to “.5,.5”

Auto reverse = “True” Repeat behavior = “Forever”>

</point Animation>

</story board>

</begin story board>

</event trigger>

</Ellipse. Triggers>

</ellipse>

</canvas>

Summary
Review Date
Reviewed Item
SilverLight Data Type Animations
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on SilverLight Data Type Animations"

    Leave a Message

    Your email address will not be published. Required fields are marked *

    Site Disclaimer, Copyright © 2016 - All Rights Reserved.

    Support


    Please leave a message and we'll get back to you soon.

    I agree to be contacted via e-mail.