Search code examples
wpfwindows-phone-7xamlwindows-phone-7.1columnspan

Difficulties to use columnspan


I have grid with four texboxs like these :

What I have

And I would to get this:

What I want

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>

Solution

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

    enter image description here

    enter image description here