WPF: Dynamic Form aligned by a <Grid>

Question

I'm building a GUI to edit various XML configuration files based on what values are allowed by their schema. I need a way to display a label for each field in a left column, while displaying a control to edit that field on the right column. If this list of fields weren't dynamic, I'd simply display them in a Grid with two columns. But that doesn't seem so easy with a dynamic list of fields.

The below example shows what I'd like to do, but because DataTemplate can only contain one child, this way won't work. Anyone know of a good workaround that would make this dynamic form layout correctly?

(To simplify the example, I'm using a Uniform grid. I'd probably prefer an approach that drops a Grid in the ControlTemplate (so you can define the columns/rows) - but, I figured this approach got the point across)

        <ItemsControl x:Name="FieldItemsCtrl">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="2" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate DataType="{x:Type local:EditableField}">
                    <TextBlock Text="{Binding FieldName}" Foreground="{DynamicResource TextBrush}" />
                    <TextBox Text="{Binding FieldValue}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

Thanks!

Answer 1

Hi Scott.

You can replace what you need from panel with DataTemplate. Check this out:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:System="clr-namespace:System;assembly=mscorlib" >
  <Grid>  
    <ItemsControl>
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="FieldName" Grid.Column="0"  HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0, 0, 14, 0" />
            <TextBox Text="FieldValue" Grid.Column="1" />
          </Grid>
        </DataTemplate>
      </ItemsControl.ItemTemplate>
     <System:String>Hello</System:String>
     <System:String>World</System:String>
    </ItemsControl>
  </Grid>
</Page>