WPF how to do this indentation?

Question

I need to format a page as follows:

This code is obviously totally wrong but gives a general idea:

<Grid Grid.Row="10">
  <Label Grid.Row="0" Grid.Column="0" Content="Label1"/>
  <TextBox Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3"/>
  <Label Grid.Row="0" Grid.Column="4" Content="Label2"/>
  <TextBox Grid.Row="0" Grid.Column="5">
  <Label Grid.Row="0" Grid.Column="6" Content="Label3"/>
  <TextBox Grid.Row="0" Grid.Column="7">
  <Label Grid.Row="1" Grid.Column="0" Content="Label4"/>
  <TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3"/>
  <Label Grid.Row="1" Grid.Column="0" Content="Label5"/>
  <TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3"/>
</Grid>

The most tricky part for me is how to make label2/textbox2 & label3/textbox3 indented to textbox5 .

The size of the label s should be dynamic according to the text source so using Width percentages for them is less desirable.

Also, this is a section of a long page (hence the Row="10" ) so it is best if solution doesn't affect rest of page (I think it won't since it's in the Grid ).

Answer 1

Because you have encased this inside of its own Grid , you can divide it into however many rows and columns you want. You've already started with the appropriate column count by putting gray dividers in your image. Just use that and count the number of rectangles you've drawn from left-to-right to define your columns.

<Grid Grid.Row="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="Label1"/>
    <TextBox x:Name="Textbox1" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="6" Text="text box 1"/>
    <Label Grid.Row="0" Grid.Column="8" Content="Label2"/>
    <TextBox x:Name="Textbox2" Grid.Row="0" Grid.Column="9" Grid.ColumnSpan="3" Text="text box 2"/>
    <Label Grid.Row="0" Grid.Column="12" Content="Label3"/>
    <TextBox x:Name="Textbox3" Grid.Row="0" Grid.Column="13" Grid.ColumnSpan="1" Text="text box 3"/>
    <Label Grid.Row="1" Grid.Column="0" Content="Label4" />
    <TextBox x:Name="Textbox4" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="text box 4"/>
    <Label Grid.Row="1" Grid.Column="8" Content="Label5"/>
    <TextBox x:Name="Textbox5" Grid.Row="1" Grid.Column="9" Grid.ColumnSpan="6" Text="text box 5"/>
</Grid>

Here's the output: