Silverlight Layout Controls

Layout controls

Canvas control

Group several Silverlight controls into a single group of elements.

Properties

Canvas.Top

Canvas.Left

Canvas.ZIndex

For example,

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

<TextBlock Text=“My Text”

Canvas.Top=“20”

Canvas.Left=“200” />

</Canvas>

Canvas.ZIndex

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.

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

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

Grid control

Using columns and rows

Example

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

Implementing a Grid to Set the Layout of Silverlight Controls

<Grid x:Name=”LayoutRoot”Background=”White”ShowGridLines=”True”>
<Grid.RowDefinitions>
<RowDefinition Height=”50″/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”150″/>
<ColumnDefinition Width=”10″/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Canvas Background=”Black”Grid.Column=”0″Grid.ColumnSpan=”3″>
<TextBlock Text=”Describe the Image”FontSize=”30″Margin=”50,5,0,0″Foreground=”White”/>
</Canvas>
<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″ />
</Grid>

untitled

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”/>
</ex:TabItem>
<ex:TabItem>
<ex:TabItem.Header>
<TextBlock FontSize=”15″ FontFamily=”Times New Roman” Text=”Location”/>
</ex:TabItem.Header>
<ex:TabItem.Content>
<TextBlock Text=”YellowStone National Park” HorizontalAlignment=”Center”/>
</ex:TabItem.Content>
</ex:TabItem>
<ex:TabItem>
<ex:TabItem.Header>
<Image Source=”image.jpg” Width=”50″ />
</ex:TabItem.Header>
<Image Source=”image.jpg” Width=”200″ />
</ex:TabItem>
</ex:TabControl>
</prim:TabPanel>
</Grid>

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”/>
</StackPanel>
</Canvas>

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″>
<StackPanel>
<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″ />
</StackPanel>
</Border>