Silverlight Layout Controls

Layout controls

Canvas control

Group several Silverlight controls into a single group of elements.





For example,

<Canvas Height=“50” Width=“400” >

<TextBlock Text=“My Text”


Canvas.Left=“200” />



Set the front to back position of child controls in relationship to each other

For example,

In the following code, the first Image control appears on top of the second Image control.

<Image Source=“iamge.jpg” Canvas.ZIndex=“1”
Height=“200” Width=“200”
Canvas.Top=“50” Canvas.Left=“50”/>
<Image Source=“iamge.jpg” Canvas.ZIndex=“0”
Height=“200” Width=“200”></Image>

Nested Canvas Controls Implementing the Layout of Silverlight Controls

<Canvas x:Name=“LayoutRoot”Background=“White”>
<Canvas Height=“50” Width=“400”Background=“Black”>
<TextBlock Text=“My Log”Foreground=“White”Canvas.Left=“20”FontSize=“24” />
<Canvas Canvas.Top=“50”Height=“250” Width=“400”Background=“#eeeeee”>
<TextBlock Text=“Add an Entry”Canvas.Top=“30” Canvas.Left=“50”/>
<TextBox Text=“Add an Entry”Height=“100” Width=“200”Canvas.Top=“70” Canvas.Left=“100”/>
<Button Content=“Enter”Height=“30” Width=“80”Canvas.Top=“200” Canvas.Left=“150”/>

Grid control

Using columns and rows


<Grid Height=“400”, Width=“400”>
<RowDefinition Height=“50”/>
<ColumnDefinition Width=“100”/>
<ColumnDefinition Width=“10”/>

Implementing a Grid to Set the Layout of Silverlight Controls

<Grid x:Name=”LayoutRoot”Background=”White”ShowGridLines=”True”>
<RowDefinition Height=”50″/>
<ColumnDefinition Width=”150″/>
<ColumnDefinition Width=”10″/>
<Canvas Background=”Black”Grid.Column=”0″Grid.ColumnSpan=”3″>
<TextBlock Text=”Describe the Image”FontSize=”30″Margin=”50,5,0,0″Foreground=”White”/>
<Image Source=”image.jpg” Grid.Row=”1″ Grid.Column=”0″ Height=”100″ Width=”150″ />
<Image Source=”image2.jpg” Grid.Row=”2″ Grid.Column=”0″ Height=”100″ Width=”150″ />
<TextBox BorderThickness=”2″ Grid.Row=”1″ Grid.Column=”2″ Height=”100″ Width=”200″ />
<TextBox BorderThickness=”2″ Grid.Row=”2″ Grid.Column=”2″ Height=”100″ Width=”200″ />


Using a TabControl control

The TabControl provides a means to implement several different layers of panels that can be accessed using tabs

Tabbed Panel Using the TabControl Control

<Grid x:Name=”LayoutRoot” Background=”White”>
<prim:TabPanel VerticalAlignment=”Center” HorizontalAlignment=”Center” Background=”LightGray”>
<ex:TabControl TabStripPlacement=”Left” Height=”200″ Width=”300″ >
<ex:TabItem Header=”Animal”>
<TextBlock Text=”American Bison” FontSize=”30″ HorizontalAlignment=”Center”/>
<TextBlock FontSize=”15″ FontFamily=”Times New Roman” Text=”Location”/>
<TextBlock Text=”YellowStone National Park” HorizontalAlignment=”Center”/>
<Image Source=”image.jpg” Width=”50″ />
<Image Source=”image.jpg” Width=”200″ />

Using a StackPanel control

The StackPanel control is a container control that allows you to add child controls similar to the Canvas and Grid controls.

Typically, StackPanel controls are used to lay out a group of controls in a Grid or Canvas

<Canvas x:Name=”LayoutRoot” Background=”LightGray”>
<StackPanel Background=”White” Orientation=”Vertical” Canvas.Top=”50″ Canvas.Left=”50″ Height=”100″ Width=”100″>
<RadioButton Content=”Option A” HorizontalAlignment=”Center”/>
<RadioButton Content=”Option B” HorizontalAlignment=”Center”/>
<RadioButton Content=”Option C” HorizontalAlignment=”Center”/>
<RadioButton Content=”Option D” HorizontalAlignment=”Center”/>

Using a Border control

The Border control is used to create some sort of spacing or border around other Silverlight controls. Border controls allow you to set options that place a border around an element that is defined as a child.

<Border BorderThickness=”5″ BorderBrush=”Blue” Height=”160″ Width=”120″>
<RadioButton Content=”Option 1″ Height=”50″ Width=”200″ Margin=”20,0,0,0″/>
<RadioButton Content=”Option 2″ Height=”50″ Width=”200″ Margin=”20,0,0,0″ />
<RadioButton Content=”Option 3″ Height=”50″ Width=”200″ Margin=”20,0,0,0″ />

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: