Is there a better way to layout Label / Value pairs on a form than Grid or WrapPanel?

Question

I am looking for a less cumbersome way of laying out Key / Value pairs (e.g. Label saying "First Name" followed by a Label with the First Name) on a screen. If it were just a simple grouping I would throw it in a Grid and be done. However the layout 2 or 3 pairs, followed by some type of grouping container with 4 or 5 more pairs, followed by a different grouping container etc.

It feels very cumbersome to have to do something like:

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

                <Label Grid.Column="0" Grid.Row="0" Content="Element ID:" HorizontalAlignment="Right" />
                <Label Grid.Column="1" Grid.Row="0" Content="{Binding Path=ElementId}" HorizontalAlignment="Left" FontWeight="Bold" />

                <Label Grid.Column="0" Grid.Row="1" Content="Element Description:" HorizontalAlignment="Right" />
                <Label Grid.Column="1" Grid.Row="1" Content="{Binding Path=ElementDescription}" HorizontalAlignment="Left" FontWeight="Bold" />                    
</Grid>

Just to render out:

_______Element ID: ABC123

Element Description: Spiffy!

This is especially true when you have several sections like this.

UniformGrid won't let you fix one column so that the Label can be right aligned. I tried a combination of StackPanel and WrapPanel but you end up with almost as much overhead and a lot of margin fiddling.

Is there a better way to do this?

Answer 1

As far as I know you should be able to do something like this which is pretty handy when you have tons of them;

<UniformGrid Columns="2">

  <UniformGrid.Resources>

    <!-- Set your properties once, in one place, 
         and control your children like a good parent. -->

    <Style TargetType="Label">
      <Setter Property="HorizontalAlignment" Value="Right"/>
    </Style>
    <Style TargetType="TextBlock">
      <Setter Property="FontWeight" Value="Bold"/>
      <!-- If you want to control your cell width so the descriptions doesn't
           offset the size of the ID's you could just enable/edit these setters.
      <Setter Property="TextWrapping" Value="Wrap"/>
      <Setter Property="MaxWidth" Value="150"/>
      -->
    </Style>

  </UniformGrid.Resources>

  <Label Content="Element ID:"/>
  <TextBlock Text="{Binding Path=ElementId}"/>

  <Label Content="Element Description:"/>
  <TextBlock Text="{Binding Path=ElementDescription}"/>

  <!-- etc, etc, etc. -->

</UniformGrid>

PS - Avoid Label and use TextBlock instead unless it's actually beneficial as Label is heavier than TextBlock.

Hope this helps, cheers.