Implementing a Grid to Set the Layout of Silverlight Controls

The root Grid control contains definitions for three rows and three columns. The example below implements a Canvas control with a black background that spans all three columns in the grid by setting the Grid.ColumnSpan property to 3. A TextBlock is added as a child element to the Canvas.
Two Image controls and two TextBox controls to the Grid and places them using the Grid.Row and Grid.Column properties.

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

Enjoyed this post? Share it!

 

Leave a comment

Your email address will not be published.