Silverlight Controls Part - I

Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 7094 red flag

In this Article we are going to learn Silverlight controls and related properties.

Silverlight has many controls, many of them are out of the box controls that come in the Silverlight and many others are provided by community or third party vendors. Here we are going to lear out of the box Silverlight controls and related properties.

Get 500+ ASP.NET web development Tips & Tricks and ASP.NET Online training here.

Some generic properties of the Controls/Element


Used to specify the unique name for the control, that can be used in code behind to access the control.


Used to set the width of the control (if not specified, it takes the width of the parent element)


Used to set the height of the control (if not specified, it takes the height of the parent element)


Used to set the top position from the Canvas


Used to set the left position from the Canvas


Used to set the z-order of the element from the Canvas


The canvas layout panel provides a way to position the element using an explicit co-ordinate, by default it position its child element from top-left that is considered 0, 0 position.

In case we want to position the element inside the canvas, we use Canvas.Top and Canvas.Left properties on its child elements.


<Canvas Background="Red">

<Rectangle x:Name="yellowRectangle" Fill="Yellow" Height="50" Width="100" Canvas.Left="50" Canvas.Top="50"/>

<Rectangle x:Name="greenRecntangle" Fill="Green" Height="50" Width="100" Canvas.Left="50" Canvas.Top="150"/>

<Rectangle x:Name="orangeRectangle" Fill="Orange" Height="50" Width="100" Canvas.Left="250" Canvas.Top="75" Canvas.ZIndex="1"/>

<Rectangle x:Name="BlanchedAlmondRectangle" Fill="BlanchedAlmond" Height="50" Width="100" Canvas.Left="255" Canvas.Top="85" Canvas.ZIndex="2"/>


In the above code snippet, we have a Canvas with background color as Red. Inside that we have kept 4 Rectangles element. We have specified their Fill (filling its background color), Height (specifying the height of the Rectangle, Width (specifying the width of the rectangle), Canvas.Left (specifying its position from the left of the Canvas and Canvas.Top (specifying its position from top of the canvas).

The Canvas.ZIndex property is used to specify the z-order rendering behaviour of the element in Canvas (in other words we can say that the layer ordering of the element on the Canvas). Because of this property, you can see that Orange rectangle is in the back of the BalanchedAlmond rectangle.



StackPanel is used to arrange the elements in horizontal or vertical direction. If Orientation is not specified, it arranges its child elements vertically.


<StackPanel Background="Yellow" Orientation="Vertical">

<Button Height="25" Width="70" Content="Button 1"/>

<Button Height="25" Width="70" Content="Button 2"/>

<Button Height="25" Width="70" Content="Button 3"/>

<Button Height="25" Width="70" Content="Button 4"/>

<Button Height="25" Width="70" Content="Button 5"/>

<Button Height="25" Width="70" Content="Button 6"/>

<Button Height="25" Width="70" Content="Button 7"/>

<Button Height="25" Width="70" Content="Button 8"/>

<Button Height="25" Width="70" Content="Button 9"/>

<Button Height="25" Width="70" Content="Button 10"/>

<TextBox x:Name="TextBox1" Width="100" Height="25"/>


In the above code snippet, we have 10 button controls inside the StackPanel that is automatically arranged vertically without specifying its position.

In case we want to arrange these buttons Horizontally, we can set Orientation property to “Horizotnal”.


Hope this article was useful. Thanks for reading, hope you liked it.

Keep reading my forth coming articles on Silverlight. To read my series of articles, click here.

Page copy protected against web site content infringement by Copyscape

About the Author

Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan

Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on | |

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)