Xaml how to change the number of columns in same grid to display TextBlock

Question

I am silverlight xaml and c# beginner. I have a nesting situation where i want to display a textblock with 1 column inside the text block with 2 columns in the grid. The view must be like this:

You can see that there is small algo for it:

Grid
{
  2 columns for first 3 TextBlock from row 0 to 2
  Only 1 column for the third row // I do so because here the data inside will be more(not able to cover in 1 line)
  Again 2 columns for third TextBlock 
 }

What i tried :

<Grid Width="300">
    <Grid.RowDefinitions>
        <RowDefinition Height="20" />
        <RowDefinition Height="20" />
        <RowDefinition Height="20" />
        <RowDefinition Height="20" />
        <RowDefinition Height="20" />
        <RowDefinition Height="" />
        <RowDefinition Height="20" />
        <RowDefinition Height="20" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Row="0" Grid.Column="0" Text="Name" />
    <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Name}" />

    <TextBlock Grid.Row="1" Grid.Column="0" Text="Author" />
    <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Author}" />

    <TextBlock Grid.Row="2" Grid.Column="0" Text="Date of Creation" />
    <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding DateCreation}" />

    <TextBlock Grid.Row="3" Grid.Column="0" Text="Company" />
    <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding Company}" />

    <TextBlock Grid.Row="4" Grid.Column="0" Text="Description" />
    <TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding Description}" />

    <!--TextBlock  Grid.Row="4" Grid.Column="1" Text="{Binding Description}"/>-->

    <TextBlock Grid.Row="6" Grid.Column="0" Text="DocUrl" />
    <TextBlock Grid.Row="6" Grid.Column="1" Text="{Binding DocUrl}" />

    <TextBlock Grid.Row="7" Grid.Column="0" Text="ProgramId" />
    <TextBlock Grid.Row="7" Grid.Column="1" Text="{Binding ProgramId}" />

</Grid>

How to achieve it using Xaml ?

Please not that i am working in silverlight 5

Answer 1

You can set a property called Column span. This mean the element you are applying it to will "span" or be as wide as the number of columns you specify. Note you can also do this with grids as well. For you example, change the xaml code of your description label textblock and the bound description textbox to the following:

<TextBlock Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Text="Description"/>
<TextBlock Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Description}"/>

This should stretch those elements to the width of 2 columns. I hope this helps!

Edit: After further consideration I would Imagine you want the "Description:" text to still be included, but only in one box. To do this you'd have to use C# code behind as silverlight will only let a textbox bind to one thing. So instead I would only use:

 <TextBlock Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding DescriptionWithLabel}"/>

and in the C# that you are binding to :

public string DescriptionWithLabel
{
   return string.Format("{0} {1}", "Description: ", Description.ToString);

}

**Edit:**Ok, after your most recent comments I would suggest scrapping the DiscriptionWithLabel in the C# code behind and instead go with a stackpanel which contains a label and a textbox. Like so:

        <StackPanel Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Stretch" Margin="0,0,0,0" Grid.Row="4" VerticalAlignment="Stretch">
            <TextBlock Content="Description: "/>
            <TextBox HorizontalAlignment="Stretch" Width="auto" MinWidth="20" TextWrapping="Wrap" Max Width="60"/>
        </StackPanel>

Answer 2

You have to set ColumnSpan="2"

<TextBlock Grid.ColumnSpan="2" ... />