Silverlight Controls Part - I

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

X:Name

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

Width:

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

Height:

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

Canvas.Top

Used to set the top position from the Canvas

Canvas.Left

Used to set the left position from the Canvas

Canvas.ZIndex

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

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.

Code

<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"/>
</Canvas>

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.

Output

StackPanel

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

Code

<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"/>
</StackPanel>

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”.

Output

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.