使用 columnspan 的困难

Question

I have grid with four texboxs like these :

And I would to get this:

I have tried to play with column span but with no success :(

<Grid Margin="20,0,0,20" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
    <RowDefinition />                                           
    <RowDefinition />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock  Grid.ColumnSpan="1" Grid.Row="0" Grid.Column="0" Margin="0,0,10,0" x:Name="TxtBox_CodeTiers" TextWrapping="Wrap" Text="{Binding m_strCode}"  HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23"/>
<TextBlock  Grid.ColumnSpan="1" Grid.Row="0" Grid.Column="1" Margin="0,0,10,0" x:Name="TxtBox_NomTiers" TextWrapping="Wrap" Text="{Binding m_strNom}"   HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23" />
<TextBlock  Grid.Row="1" Grid.Column="0" Margin="0,0,05,0" x:Name="TxtBox_CPostal" TextWrapping="Wrap" Text="{Binding m_strCpostal}"   HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}"/>
<TextBlock  Grid.Row="1" Grid.Column="1" Margin="0,0,05,0" x:Name="TxtBox_Ville" TextWrapping="Wrap" Text="{Binding m_strVille}"   HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}"/>
</Grid>

It better with this :)

<Grid Margin="12,0,0,20" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
    <RowDefinition />                                           
    <RowDefinition />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition/>
    <ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.ColumnSpan="2"  x:Name="TxtBox_CodeTiers" Margin="0,0,20,0" TextWrapping="Wrap" Text="{Binding m_strCode}"  HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23" Loaded="TxtBlock_Loaded"/>
<TextBlock Grid.Row="0" Grid.Column="2"  x:Name="TxtBox_NomTiers" TextWrapping="Wrap" Text="{Binding m_strNom}"   HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23" Loaded="TxtBlock_Loaded"/>
<TextBlock Grid.Row="1" Grid.Column="0"  x:Name="TxtBox_CPostal" Margin="0,0,20,0" TextWrapping="Wrap" Text="{Binding m_strCpostal}"   HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}" Loaded="TxtBlock_Loaded"/>
<TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" x:Name="TxtBox_Ville" TextWrapping="Wrap" Text="{Binding m_strVille}"   HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}"  Loaded="TxtBlock_Loaded"/>
</Grid>

Answer 1

You will probably need to add another column for the "C" and "D" boxes to line up against, then just set the ColumnSpan on the "A" box to span the new column

  <Grid Margin="20,0,0,20" VerticalAlignment="Top" HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="121*"/>
            <ColumnDefinition Width="52*"/>
            <ColumnDefinition Width="190*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.ColumnSpan="2"  x:Name="TxtBox_CodeTiers" TextWrapping="Wrap" Text="AAAAAAAAA"  HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23"/>
        <TextBlock Grid.Row="0" Grid.Column="2"  x:Name="TxtBox_NomTiers" TextWrapping="Wrap" Text="BBBBBBBB"   HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23" />
        <TextBlock Grid.Row="1" Grid.Column="0"  x:Name="TxtBox_CPostal" TextWrapping="Wrap" Text="CCCCCCCCCCC"   HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" x:Name="TxtBox_Ville" TextWrapping="Wrap" Text="DDDDDDDDD"   HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}"  />
    </Grid>

Answer 2

You can use in the second grid row StackPanel :

<Grid Margin="20,0,0,20" VerticalAlignment="Top" HorizontalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock  Grid.ColumnSpan="1" Grid.Row="0" Grid.Column="0" Margin="0,0,10,0" x:Name="TxtBox_CodeTiers" TextWrapping="Wrap" Text="{Binding m_strCode}"  HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23"/>
    <TextBlock  Grid.ColumnSpan="1" Grid.Row="0" Grid.Column="1" Margin="0,0,10,0" x:Name="TxtBox_NomTiers" TextWrapping="Wrap" Text="{Binding m_strNom}"   HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23" />      
    <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.ColumnSpan="2">
        <TextBlock Margin="0,0,05,0" x:Name="TxtBox_CPostal" TextWrapping="Wrap" Text="{Binding m_strCpostal}"   HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}"/>
        <TextBlock Margin="0,0,05,0" x:Name="TxtBox_Ville" TextWrapping="Wrap" Text="{Binding m_strVille}"   HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}"/>
    </StackPanel>
</Grid>