My Profile
Active Members
TodayLast 7 Days
more...
|
Resources » Articles » Silverlight Programming »
Gain Knowledge of SilverLight
|
|
|
|
Hello friends
I read some articles from book, actually i wanted to create some animation application, but for it we should have some knowledge of it and it's related concept
So i m giving u some idea to learn it and create your animated articles
About XAML:
You can not only declare your objects using an XML syntax, but that you can define transformations to apply to these objects in the same way. You don't need to be a programmer to rotate, move, and skew your objects. Also, XAML can be used to describe how you can animate your object, with an animation being defined as changing properties on the object over time.
First Important thing: in XAML is Transformations
A transform defines how to map points from one coordinate space to another. This is typically described using a transformation matrix, a special mathematical construct that allows for simple mathematical conversion from one system to another. Silverlight XAML abstracts this matrix and supports four set transformations for rotation, scaling, skewing,and translation (movement). Silverlight XAML also has an additional special transformation type that allows you to define and implement your own matrix, which you can then use to combine transformations.
Transformations are applied using transform properties. There are several different types of transform properties, which are applied to different object types.
Thus, when using a Brush type, you define your transformation in different ways. One is to use the Brush.Transform property when you want to affect the brush's content (if you want to rotate an image before using it in an ImageBrush, for example). Another way is to use the Brush.RelativeTransform property, which allows you to transform a brush using relative values (something you might do if you are painting different areas of different sizes using the same brush, for example).
When using a Geometry type, you apply a simple transform using the Geometry.Transform property. Keep in mind, however, that this type does not support relative transforms.
Finally, when using a UI element, you specify the transformation to use with the RenderTransform property. If you are transforming an ellipse, for example, you'll use the Ellipse.RenderTransform to define the desired transform.
RotateTransform Property:
It is generally used to rotate the things..
RotateTransform allows you to rotate an element by a specified angle around a specified center point. You set the angle of rotation by using the Angle property to set the number of degrees that you want to rotate the item. To orient yourself, consider the horizontal vector pointing to the right to be 0 degrees, and rotation takes place clockwise, so the vertical vector pointing down is the result of a 90-degree rotation.
You set the center of transformation using the CenterX and CenterY properties to specify the coordinates of the pivot. These default to 0.0, which makes the default rotation pivot the upper-left corner of the container.
In this example XAML, a TextBlock is rotated using a RenderTransform that contains a RotateTransform specifying a 45-degree rotation:
Text="U will Rotate Me at 45 degree angle" TextWrapping="Wrap">
The above text will be appear at 45 degree angle in your window
ScaleTransform Property:
It is generally used to change the size of object
The ScaleTransform property is used to change the size of an object based on the horizontal axis, the vertical axis, or both axes. When scaling an object, you need to specify at least one of the axes around which you want to scale, and by how much you want to scale against that axis.
You use the ScaleX property to scale the object on the horizontal axis, the x-axis, and the ScaleY to scale it on the vertical axis, the y-axis. These are set to a double value, which represents the value by which you multiply the object's current size on the specified axis. Therefore, values greater than 1 will stretch the object by that multiple. For example, using a ScaleX value of 2 will double the size of the object horizontally. Values less than 1, but greater than 0, will shrink the object. Using a setting of 0.5, for instance, will reduce the size of the object by half along the specific dimension.
For example, this XAML creates a red rectangle 96 pixels wide by 88 pixels high:
Width="96" Height="88" Canvas.Left="112" Canvas.Top="72">
We use a RenderTransform to apply scale transformation to object
TranslateTransform Property
We generally used this transformation to move the object
A translation is a transform that moves an object in a two-dimensional plane from one position to another. It is defined by setting up vectors that define the object's motion along its x- and y-axes. These are set using the X and Y properties on the transform. To move an item two units horizontally (meaning it will move to the right), you set the X property to 2. To move it to the left, use a negative value, such as -2. Similarly, to move an object vertically, you would use the Y property, and positive values will cause the object to move down the screen, whereas negative values will move it up the screen.
Here's an example of a translate transform that moves the position of the red rectangle that we've been looking at by specifying X and Y values that move it up and to the left. These values effectively make up a vector that determines the transform:
Stroke="#FF000000"
Width="96" Height="88"
Canvas.Left="80" Canvas.Top="80">
You can use this code in application to view this result and some animation
|
|
Responses to the resource: "Gain Knowledge of SilverLight"
|
| Author: Aman Gupta 13 Jan 2010 | Member Level: Bronze Points : 2 | We generally used this transformation to move the object
A translation is a transform that moves an object in a two-dimensional plane from one position to another. It is defined by setting up vectors that define the object's motion along its x- and y-axes. These are set using the X and Y properties on the transform. To move an item two units horizontally (meaning it will move to the right), you set the X property to 2. To move it to the left, use a negative value, such as -2. Similarly, to move an object vertically, you would use the Y property, and positive values will cause the object to move down the screen, whereas negative values will move it up the screen.
Here's an example of a translate transform that moves the position of the red rectangle that we've been looking at by specifying X and Y values that move it up and to the left. These values effectively make up a vector that determines the transform:
|
|