ITORIAN BLOG

Introduction XAML (read as Zammel) stands for eXtensible Application Markup Language and it is based on XML (eXtensible Markup Language). XAML is developed by Microsoft to use behind the visual representation of an application. We probably use XAML in Expression Blend or Visual Studio to develop rich media based applications for web and mobile devices. Simply, creating any application in Blend called as writing XAML code either by typing the codes or visually designing and it automatically generates code. Although XAML is developed for use on the Windows platform but the WPF/E (Windows Presentation Foundation/Everywhere) initiative will eventually bring XAML to other platforms and devices. WPF WPF (Windows Presentation Foundation) is a unified presentation subsystem for Windows, exposed through WinFX, the managed-code programming model for Windows Vista that extends the Microsoft .NET Framework. WPF enables developers and designers to create visually stunning, differenti

Introduction Computer systems use two kinds of graphics: (i)        Vector Vector graphics contain the drawing instructions other than the color value in pixels. In Silverlight whatever we design (like lines, curves, points, and polygons) are examples of vector graphics. If a zoom factor is applied to such a graphics, the framework calculates a new view of this image in a smooth way and even the smallest details remain sharp and precise. The above image is an example of vector graphics that we design in Silverlight. (ii)       Raster Raster graphics are an array of pixels with values indicating the color. Raster graphics are defined in pixels. BMP, TIF, GIF, JPG, PNG etc are example of raster graphics. Since sizes are measured in pixels the print dimension depends on the resolution of the printer. BMP records every pixels in the image, so the size is very big even for a small images. Raster graphics does not resize well and when we zoom in too much, pixel

Introduction and Use XAML allows us to write comment inside the coding. Comments will be parsed but they do not affect our results. It is very good practice to used comments inside code; this will decrease documentation problems. Many times we read code developed by another developer and if they have used comments, we’ll understand quickly. Even if we read our own logic after couples of year, this will be very useful here. Find the used comment in screenshot below:

In Silverlight 2D transformation, we have four basic classes that can be applied to element. Transforming elements means mapping points from one coordinate to another. Here we have following classes: RotateTransform It rotates element by specified angle. ScaleTransform It scales an element by the specified ScaleX and ScaleY values. SkewTransform It skews element by the specified AngleX and AngleY values. TranslateTransform It translate or moves element by the specified X and Y values. Above points should be discussed separately, because they are little complicated but very easy to learn if you read carefully. Be tuned for next post, we will discuss on each of them given above.

Introduction In Silverlight we can apply transparency either by using Alpha Channel or Opacity. In this article you will learn how to apply trnsparency using Opacity. I have discussed the Alpha Channel in my previous article 'Alpha Channels in XAML Silverlight'; take a little look there too. Opacity is nothing more than an additional element attribute; it is very different from Alpha Channel where we applied an additional color code in hexadecimal color code to create transparency. But in Opacity we use an Opacity attribute with a decimal value varying from 0 to 1. So, to apply opacity we can use 0 or 0.1, 0.2, 0.3,..., 0.9 or 1 (1 is the default which means no opacity or in other words no transparency). Let's take a look at a screenshot where I will be using opacity. In the above screenshot, I marked out the Alpha Channel and Opacity. In the above example, I have used a textblock and 6 rectangles overlapped on text to show the transparency. X

Introduction In Silverlight we can apply transparency either by using Alpha Channel or Opacity. In this post you will learn how to apply trnsparency using Alpha Channel. As I have discussed in my previous post titled 'Alpha Channel in XAML Silverlight' about the Alpha Chennel. Take a little look here too. In Alpha Channel we just add additional code as first element in existing hexadecimal color code. The additional element specifies the transparency of a color from 0 (full transparent) to 255 (full opaque). For example, if we wish to apply 'Blue' color then we'll use its hexadecimal color code as '#0000FF'. Now to apply the transcarency in this color we add additional element (from 0 to 255 (FF). FF is default means no transparency) as '# FF 0000FF' (no transparency). Let's take a look at program. In above screenshot, I marked out the Alpha Channel and normal HTML based hexa color code. In above example, I have used a

Introduction In Silverlight ‘TranslateTransform’ defines the axis aligned translation along the x and y axes. This transform is less exciting but it is very useful in animations. The effect of a TranslateTransform is to move a figure by a certain amount of pixels along the X and Y axis. Above screenshot will explain all its properties.

Introduction In Silverlight ‘TransformGroup’ is a way to combine all transformations that we have discussed so far. Look at the screenshot that has combined transformation but values are default, so you can’t see any special output. In above screenshot, I have used all codes but values are just default. Now let’s change the RotateTransform Angle and see the result. Above output is not new to us because we have already discussed about RotateTransform in our previous post. Now, let’s add some other transformation to make it TransformGroup. Look at the screenshot below where I will be using ScaleX and ScaleY. This is also not new to us, as we have aware about this from previous posts. Here in this post (or TransformGroup) we only have combined two different transformations together. That’s all about the TransformationGroup.

Introduction In Silverlight ‘SkewTransform’ is used to skew element by keeping lines parallel (if AngleY is zero). If we change the AngleY to any positive then parallel like will also rotate. The screenshot given below has AngleY to zero. In above screenshot, I have used AngleX to positive degree and negative degree (by keeping AngleY to zero). Let’s change AngleY to see the output. In above screenshot, I have used AngleY as 20 and -20 degree.

Introduction In Silverlight, we create animations to compete ‘adobe flash’ but till now we have not created any such project which assumes something like this, we just saw how to transform an element by using static compositions. As we saw multiple types of transformations, we’ll see multiple types of animations too in my coming posts. Here you will see ‘DoubleAnimation’ and we have also another one that is ‘DoubleAnimationUsingKeyFrames’ (will discuss it later). Here you’ll go with only ‘DoubleAnimation’. Look at the XAML Code below: XAML Code In above code, I strike <TransformGroup> root because inside this I’m only using single transform element that is <ScaleTransform> but in case if you have multiple transform, you have to use <TransformGroup>. Review my previous post titled “TransformGroup in XAML Silverlight” for more. <ScaleTransform> has name ‘Action1’ and it has only one scale property that is ‘ScaleX’ so, similarly we have u

Introduction In Silverlight, we create animations to compete ‘adobe flash’ but till now we have not created any such project which assumes something like this, we just saw how to transform an element by using static compositions. As we saw multiple types of transformations, we’ll see multiple types of animations too in my coming posts. Here you will see ‘DoubleAnimation’ and we have also another one that is ‘DoubleAnimationUsingKeyFrames’ (will discuss it later). Here you’ll go with only ‘DoubleAnimation’. Look at the XAML Code below: XAML Code Please refer previous parts for better understanding. In above code, I have not strike <TransformGroup> root because inside this I’m using <ScaleTransform> and <RotateTransform>. Remember previous parts where we have strike <GroupTransform> because we have single transform there but now we have multiple here. <ScaleTransform> has name ‘Action1’ and it has now two scale property that is

Introduction In Silverlight, we create animations to compete ‘adobe flash’ but till now we have not created any such project which assumes something like this, we just saw how to transform an element by using static compositions. As we saw multiple types of transformations, we’ll see multiple types of animations too in my coming posts. Here you will see ‘DoubleAnimation’ and we have also another one that is ‘DoubleAnimationUsingKeyFrames’ (will discuss it later). Here you’ll go with only ‘DoubleAnimation’. Look at the XAML Code below: XAML Code This post is continue from previous part. Please read the previous one for complete. In above code, I strike <TransformGroup> root because inside this I’m only using single transform element that is <ScaleTransform> but in case if you have multiple transform, you have to use <TransformGroup>. Review my previous post titled “TransformGroup in XAML Silverlight” for more. <ScaleTransform> has n

Introduction In Silverlight, we create animations to compete ‘adobe flash’ but till now we have not created any such project which assumes something like this, we just saw how to transform an element by using static compositions. As we saw multiple types of transformations, we’ll see multiple types of animations too in my coming posts. Here you will see ‘DoubleAnimation’ and we have also another one that is ‘DoubleAnimationUsingKeyFrames’ (will discuss it later). Here you go with only ‘DoubleAnimation’: XAML Code <UserControl           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"           x:Class="SilverlightApplication1.MainPage"           Width="400" Height="400" Background="SkyBlue">                     <Grid RenderTransformOrigin="0.5,0.5">                              <Grid.RenderT