DataForm Templates

Url: http://wilderminds.blob.core.windows.net/downloads/funwithdataform…

It is great to see that Tim Heuer and I are thinking about the same thing. In hisrecent article on DataForm helpers, he explained how to use the Validation Attributes to hint the DataForm with additional information.  These attributes are used extensively in the validation model in RIA Services but I’ll be covering that later.

Instead of that, I’ve been digging into how you can customize the look the DataForm while still getting the benefit of paging functionality. As Tim mentioned you can specify the rows of the DataForm in a similar way to who the DataGrid works;

<df:DataForm x:Name="theForm"
             AutoGenerateFields="False">
  <df:DataForm.Fields>
    <df:DataFormTextField Binding="{Binding Name}"
                          FieldLabelPosition="Top" />
  </df:DataForm.Fields>
</df:DataForm>

While specifying the fields to use is interesting, I wanted more control. That’s where DataForm templates come in.  In the DataForm control, there are three templates:

• DisplayTemplate: The DataTemplate for showing the ‘read-only’ view of a bound item.
• EditTemplate: The DataTemplate for editing an item.
• InsertTemplate: The DataTemplate for a new item.

Specifying these Templates is as simple as using a DataTemplate like so:

<df:DataForm x:Name="theForm"
             AutoGenerateFields="True">

  <df:DataForm.DisplayTemplate>
    <DataTemplate>
      <StackPanel>
        <TextBlock Text="{Binding Name}" />
        <TextBlock Text="{Binding Title}" />
      </StackPanel>
    </DataTemplate>
  </df:DataForm.DisplayTemplate>

  <df:DataForm.InsertTemplate>
    <DataTemplate>
      <StackPanel>
        <TextBox Text="{Binding Name, Mode=TwoWay}" />
        <TextBox Text="{Binding Title, Mode=TwoWay}" />
      </StackPanel>
    </DataTemplate>
  </df:DataForm.InsertTemplate>

  <df:DataForm.EditTemplate>
    <DataTemplate>
      <StackPanel>
        <TextBlock Text="{Binding Name, Mode=TwoWay}" />
        <TextBox Text="{Binding Title, Mode=TwoWay}" />
      </StackPanel>
    </DataTemplate>
  </df:DataForm.EditTemplate>

</df:DataForm>

This gives you the full power of controlling the look of the individual items in the DataForm.  Of course, to get the full power, you will often want to use the other new controls as well (like the FieldLabel):

<df:DataForm.EditTemplate>
  <DataTemplate>
    <StackPanel>
      <df:FieldLabel PropertyPath="Name" />
      <TextBox Text="{Binding Name, Mode=TwoWay, 
                      NotifyOnValidationError=true, 
                      ValidatesOnExceptions=true}"
               HorizontalContentAlignment="Stretch" />
      <df:FieldLabel PropertyPath="Title" />
      <TextBox Text="{Binding Title, Mode=TwoWay, 
                      NotifyOnValidationError=true, 
                      ValidatesOnExceptions=true}"
               HorizontalContentAlignment="Stretch" />
      <df:ErrorSummary />
    </StackPanel>
  </DataTemplate>
</df:DataForm.EditTemplate>

In this way the DataForm gives you full control over how the individual items are displayed. This allows you to use all the services of the DataForm without having to deal with the look of the DataForm.

What do you think?