Ask your technical questions on forums or here :
ASP.NET or MVC | C# | Windows Phone
Microsoft Technology Journals by Abhimanyu K Vatsa
HOME ABOUT RAZOR BOOK SPEAKING MVC ASP.NET JQUERY VIDEOS EBOOK ARCHIVE
Showing posts with label Silverlight. Show all posts
Showing posts with label Silverlight. Show all posts

19 May 2012

Working with Rows and Columns in XAML in Silverlight


Introduction

In silverlight, it is very import to have knowledge of rows and columns because they are very primary building block of silverlight based applications that we require always. Hrozontal (Parallel to or in the plane of the horizon or a base line) and Vertical (right angles to the plane) can be called as rows and columns.

Steps to Create Rows and Columns

Follow the steps to create rows and columns:

(i)       Create a brand new project in Expression Blend or if you have any other project then clean its markup first (to understand it well). Here is my very first markup screenshot:


(ii)      Before any further action be sure that yor layout is in Grid mode (not in Canvas mode).


(iii)      Now move your mouse pointer around, you should see an orange horizontal/vertical lines appear on the Grid. Clicking creates a new row/columns in the Grid. On the same slider here, we can drag the line to resize it.


In above screen, I have created three rows and three columns.

(iv)     Now let's look at size properties available here. If you click on icon   you will get different mode here:

Star Sized - Star means the rest size. '1' Star for a column's width means take the whole rest of the width once all the other columns have been laid out. 0.5 Star means take half of the rest of the width…, and so on. This is default type lock and it generates following markup [...Height="0.338*"/>] in xaml.

Pixel Sized -Pixel sized menas the size in pixel form. For example, if we write 245 then size is fixed to 245. It generates following markup [...Width="242"/>] in xaml.

Auto Sized - Auto sized menas no limited, in other word its size will depend on controls inside this area. It generates following markup [...Width="Auto" MinWidth="242"/>] in xaml.

(v)      Ok, now move next to put some control inside them. For this select the column or any row by selection tool; place the mouse next to the small lock at the Grid's first row, and click (don't click on the lock, but next to it, as shown in image below), this selects the whole row.


In above screen, I've selected a row.

(vi)     When we select the row/column, we can either set the height/width and other properties from xaml code or by properties window.


(vii)    Now to draw any art in separate cell, we can draw this by selecting the rectangle/ellipse and drawing it in cell. After drawing we can move this art to any other cell as well. When we move art, generates some xaml code as [....Grid.Column="1" Grid.Row="1"/>].


So, that's all about how to work with columns and rows in Silverlight.

Working with Linear/Radial Gradients and Gradient Vector Transform in XAML Silverlight


Introduction

In Silverlight, gradients specify a range of position dependent colors used to fill a region. The colors produced by a gradient are very continuous with position and produces smooth color transitions.

Silverlight uses two types of gradients:


(i)       Linear Gradient

A linear gradient is specified by two points and a color at each point. The color along the line through those points is calculated using linear interpolation algorithm and then extended perpendicular to that line. Look at the screenshot of a linear gradient.


(ii)      Radial Gradient

A radial gradient is specified as a circle that has one color and a focus that has another color. Colors are calculated by linear interpolation algorithm based on distance from the focus. Look at the screenshot of radial gradient.

 

Steps to create Linear/Radial Gradients

I'm going to apply the gradient effect in rectangle's fill (you may choose stroke or opacity). For this follow the steps:

1.    First choose where to apply the gradient color (fill, stroke or opacity).
2.    Now choose brush type to "Gradient brush".
3.    Now put the gradient stops on slider (minimum 2 gradient stops are default); you many put many more.
4.    Select each stop (when you select stop, stop color will be black) and change the color one by one.
5.    And finally you may switch the gradient to Linear or Radial any time.
6.    You can also reverse the gradient stops any time.
7.    We can also change the gradient stop offset by selecting gradient stops one by one. It will produce an advanced look in your art.


Gradient Vector Transform

Expression Blend has a great tool to help you specify a vector for the brush transform tool. It is located in the blend toolbar. Look at the screenshot to use this feature in art.

Working with Canvas in XAML Silverlight


Introduction

The entire Silverlight application moves around the properties and events. We need to set-up the properties of element and attach event handler to their events to play. Ok...let’s talk about the topic that is Canvas and its properties. First define, what’s this?

We may define this as, it’s a container that contains many child elements like rectangle, text blocks etc but remember it can’t contain another canvas. Look at the screenshot below, it has five rectangles and each of them is aligned through its Canvas.Left and Canvas.Top properties.


<UserControl
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          x:Class="SilverlightApplication1.MainPage"
          Width="304" Height="304">

          <Canvas Background="Magenta">
                  
                   <Rectangle
                   Canvas.Left="2" Canvas.Top="2"
                   Height="100" Width="100"
                   Stroke="Green"
                             StrokeThickness="5"
                             Fill="Red"/>

                   <Rectangle
                   Canvas.Left="102" Canvas.Top="102"
                   Height="100" Width="100"
                   Stroke="Yellow"
                             StrokeThickness="5"
                             Fill="White"/>
                  
                   <Rectangle
                   Canvas.Left="202" Canvas.Top="202"
                   Height="100" Width="100"
                   Stroke="Green"
                             StrokeThickness="5"
                             Fill="Red"/>
                  
                   <Rectangle
                   Canvas.Left="202" Canvas.Top="2"
                   Height="100" Width="100"
                   Stroke="Green"
                             StrokeThickness="5"
                             Fill="Red"/>
                  
                   <Rectangle
                   Canvas.Left="2" Canvas.Top="202"
                   Height="100" Width="100"
                   Stroke="Green"
                             StrokeThickness="5"
                             Fill="Red"/>
          </Canvas>

</UserControl>

Above canvas has one attribute:

Background: It is a brush; in this case we use a plain ‘Magenta’ color to paint the background of the Canvas.

Above canvas also have five children elements:

Rectangle: It is simply a shape which is drawn inside canvas; it can’t take place without any container. It has also following attributes:

Ø  Canvas.Left or Canvas.Top: It specifies the position of control with respect to Canvas location. Canvas.Left=”2” means leaving 2 pixels from left and Canvas.Top=”2” means leaving 2 pixels from top. If we apply same margin for another control then it will overlap one another, look at below:


Canvas Background Implementation

Canvas is container so we can apply images or gradient color as its background. Let’s apply image to its background. If you wish to apply image, add any image to Project Explorer. Remember to upload image in Silverlight Application root not in Silverlight Application Website root. Let’s apply image,


<UserControl
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          x:Class="SilverlightApplication1.MainPage"
          Width="304" Height="304">

          <Canvas>
                  
                   <Rectangle
                   Canvas.Left="2" Canvas.Top="2"
                   Height="100" Width="100"
                   Stroke="Green"
                             StrokeThickness="5"
                             Fill="Red"/>

                   <Rectangle
                   Canvas.Left="102" Canvas.Top="102"
                   Height="100" Width="100"
                   Stroke="Yellow"
                             StrokeThickness="5"
                             Fill="White"/>
                  
                   <Rectangle
                   Canvas.Left="202" Canvas.Top="202"
                   Height="100" Width="100"
                   Stroke="Green"
                             StrokeThickness="5"
                             Fill="Red"/>
                  
                   <Rectangle
                   Canvas.Left="202" Canvas.Top="2"
                   Height="100" Width="100"
                   Stroke="Green"
                             StrokeThickness="5"
                             Fill="Red"/>
                  
                   <Rectangle
                   Canvas.Left="2" Canvas.Top="202"
                   Height="100" Width="100"
                   Stroke="Green"
                             StrokeThickness="5"
                             Fill="Red"/>
         
          <Canvas.Background>
          <ImageBrush ImageSource="image.jpg" />
          </Canvas.Background>
         
          </Canvas>

</UserControl>

Remember to delete background color before applying image because there is only single scope of background either use it by image or color/gradient.

Now, let’s apply gradient to Canvas but delete image before proceeding,


I accomplice this using properties explorer of Canvas and generated code is as follows:

<UserControl
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          x:Class="SilverlightApplication1.MainPage"
          Width="304" Height="304">

          <Canvas>
                  
                   <Rectangle
                   Canvas.Left="2" Canvas.Top="2"
                   Height="100" Width="100"
                   Stroke="Green"
                             StrokeThickness="5"
                             Fill="Red"/>

                   <Rectangle
                   Canvas.Left="102" Canvas.Top="102"
                   Height="100" Width="100"
                   Stroke="Yellow"
                             StrokeThickness="5"
                             Fill="White"/>
                  
                   <Rectangle
                   Canvas.Left="202" Canvas.Top="202"
                   Height="100" Width="100"
                   Stroke="Green"
                             StrokeThickness="5"
                             Fill="Red"/>
                  
                   <Rectangle
                   Canvas.Left="202" Canvas.Top="2"
                   Height="100" Width="100"
                   Stroke="Green"
                             StrokeThickness="5"
                             Fill="Red"/>
                  
                   <Rectangle
                   Canvas.Left="2" Canvas.Top="202"
                   Height="100" Width="100"
                   Stroke="Green"
                             StrokeThickness="5"
                             Fill="Red"/>
         
                   <Canvas.Background>
                             <RadialGradientBrush>
                                      <GradientStop Color="Orange" Offset="0.22"/>
                                      <GradientStop Color="Green" Offset="0.959"/>
                                      <GradientStop Color="Orange" Offset="0.588"/>
                             </RadialGradientBrush>
                   </Canvas.Background>

          </Canvas>

</UserControl>

That’s all about the Canvas, be tuned for next post.