How to start wrapping of a textblock from second row of a Grid?

Question

I have 2 rows in a grid. In first row I have 5 columns, in every column I have a textblock. In second row I have a divider. Can I wrap the last textblock so that it should start from the second row of the grid? Currently this is my xaml code.

<Grid>
       <Grid.RowDefinitions>
           <RowDefinition/>
           <RowDefinition/>
       </Grid.RowDefinitions>
       <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

          <TextBlock Text="{Binding FullName}" Grid.Row="0" Grid.Column="0" x:Name="firstName" Visibility="{Binding FullName, Converter={StaticResource NullOrWhiteSpaceConverter}}" TextAlignment="Left"/>
          <TextBlock Text=" | " FontWeight="Bold" Foreground="#008DFC" Grid.Column="1" Grid.Row="0" Margin="0,0,0,0" Visibility="{Binding Visibility,ElementName=firstlevel}" HorizontalAlignment="Left"/>
          <TextBlock Text="{Binding FirstLevelParent}" Grid.Row="0" Margin="10,0,0,0" Visibility="{Binding FirstLevelParent, Converter={StaticResource NullOrWhiteSpaceConverter}}" x:Name="firstlevel" Grid.Column="1" TextAlignment="Left"/>
          <TextBlock Text=" | " Foreground="#008DFC" FontWeight="Bold" Grid.Column="1" Grid.Row="0" Visibility="{Binding Visibility,ElementName=middleName}" Margin="0,0,-10,0" HorizontalAlignment="Right"/>
          <TextBlock Text="{Binding SecondLevelParent}"  Grid.Row="0" Margin="10,0,0,0" Visibility="{Binding SecondLevelParent, Converter={StaticResource NullOrWhiteSpaceConverter}}" x:Name="middleName" Grid.Column="2" TextAlignment="Left"/>
          <TextBlock Text=" | " Foreground="#008DFC" FontWeight="Bold" Grid.Column="2" Grid.Row="0" Visibility="{Binding Visibility,ElementName=lastName}" Margin="0,0,-10,0" HorizontalAlignment="Right"/>
          <TextBlock Text="{Binding ThreeLevelParent}"  Grid.Row="0" Margin="10,0,0,0" x:Name="lastName" Visibility="{Binding ThreeLevelParent, Converter={StaticResource NullOrWhiteSpaceConverter}}" Grid.Column="3" TextAlignment="Left"/>
          <TextBlock Text=" | " Foreground="#008DFC" FontWeight="Bold" Grid.Column="3" Grid.Row="0" Visibility="{Binding Visibility,ElementName=fourlevel}" Margin="0,0,-10,0" HorizontalAlignment="Right"/>
          <TextBlock Text="{Binding FourLevelParent}" TextWrapping="Wrap" Grid.Row="0" Margin="10,0,0,0" x:Name="fourlevel" Visibility="{Binding FourLevelParent, Converter={StaticResource NullOrWhiteSpaceConverter}}" Grid.Column="4" TextAlignment="Left"/>

                <Grid Grid.Row="1" x:Name="deliverypoint" Visibility="Collapsed">
                 <!--<Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                   </Grid.ColumnDefinitions>-->
               <TextBlock Text="{Binding DeliveryPoint}" x:Name="deliverypointname" TextAlignment="Left" Foreground="Black" FontSize="12"/>
                                    </Grid>
            <!--<TextBlock Text="|" Grid.Column="2" Margin="0,0,-6,0" Visibility="{Binding Visibility,ElementName=lastName}" HorizontalAlignment="Right"/>-->
                                </Grid>
                                <TextBlock TextWrapping="NoWrap" Text="-------------------------------------------------------------------------" Grid.Row="1"/>
                            </Grid>

Thanks in advance.

Answer 1

I suggested that you do not use 'Grid.ColumnDefinition' to layout your TextBlock. Instead, you could use WrapPanel XAML Control to wrap these TextBlock. Once the max width or height is reached the control automatically create row or column based on the orientation.

I made a simple code sample for your reference:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <controls:WrapPanel Orientation="Horizontal" HorizontalSpacing="10">
            <TextBlock Text="FullName"  x:Name="firstName"  TextAlignment="Left"/>
            <TextBlock Text=" | " FontWeight="Bold" Foreground="#008DFC"  HorizontalAlignment="Left"/>
            <TextBlock Text="FirstLevelParent"  x:Name="firstlevel"  TextAlignment="Left"/>
            <TextBlock Text=" | " Foreground="#008DFC" FontWeight="Bold" HorizontalAlignment="Right"/>
            <TextBlock Text="SecondLevelParent"  x:Name="middleName" TextAlignment="Left"/>
            <TextBlock Text=" | " Foreground="#008DFC" FontWeight="Bold"  HorizontalAlignment="Right"/>
            <TextBlock Text="ThreeLevelParent" x:Name="lastName" TextAlignment="Left"/>
            <TextBlock Text=" | " Foreground="#008DFC" FontWeight="Bold" HorizontalAlignment="Right"/>
            <TextBlock Text="FourLevelParentFourLevelParentFourLevelParentFourLevelParentFourLevelParentFourLevelParentFourLevelParent" x:Name="fourlevel" TextAlignment="Left" TextWrapping="Wrap"/>
        </controls:WrapPanel>
        <TextBlock TextWrapping="NoWrap" Text="---------------------------------------------------------------------------------------" VerticalAlignment="Top" Grid.Row="1"/>
</Grid>