Silverlight DataForm helpers

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

Clearing some air in Silverlight, Blend and Visual Studio Beta land | | Google Wave: the sky is falling and Flash/Silverlight are dead

posted @ Monday, May 25, 2009 9:19 AM | 40 Comments

If you looked at the updated RIA Services Business Application template which had the authentication built-in, you may have seen the login screen with a little icon next to the password field:

Biz App Login Template

When you hover over this some helpful information displays in tool tip form:

Tooltip Helper

So how did that get there? The power of the data annotations. If you look at your model definition, you can add a DisplayAttribute and provide some additional information. Let’s take a look at a simple example. Here’s the simple model:

     
public class PersonModel
      
{
      
    public string FirstName { get; set; }
      
    public string LastName { get; set; }
      
    public string EmailAddress { get; set; }
      
    public string Gender { get; set; }
      
    public int Age { get; set; }
      
}

and the DataForm generated:

DataForm with no Attributes

Not too helpful. Now, let’s modify our model with some attributes:

     
public class PersonModel
      
{
      
    [Required()]
      
    [Display(Name="First Name:")]
      
    public string FirstName { get; set; }
      
    
      
    [Required()]
      
    [Display(Name = "Last Name:")]
      
    public string LastName { get; set; }
      
  
      
    [Display(Name = "Email Address:", 
      
        Description="We do not sell your information!")]
      
    public string EmailAddress { get; set; }
      
  
      
    [Display(Description="Used for demographics")]
      
    public string Gender { get; set; }
      
  
      
    public int Age { get; set; }
      
}

And here is the new auto generated DataForm:

DataForm with Display Attributes

Much more friendly to the user, and from a code perspective, we wouldn’t have to change how we work with our model. We get some free visuals and functionality with some simple attribute properties.

Also, did you know that you could bind multiple items to the DataForm and get automatic paging and add new functionality? Given this code:

     
ObservableCollection<PersonModel> people = new ObservableCollection<PersonModel>();
      
for (int i = 0; i < 10; i++)
      
{
      
    PersonModel p = new PersonModel() { FirstName = "First" + i.ToString(), LastName = "Last " + i.ToString(), Age = i };
      
    people.Add(p);
      
}
      
  
      
DataBrowser.ItemsSource = people;

Check out what is generated:

DataForm multiple data binding

Notice the pager and add new buttons. Nice. If you’re wondering how to get more granular control over the field displays, it is similar to DataGrid in that you can turn off auto generation of fields and provide your own implementation through custom DataFields:

     
<datacontrols:DataForm x:Name="DataBrowser" Width="400" AutoGenerateFields="False">
      
    <datacontrols:DataForm.Fields>
      
        <datacontrols:DataFormTextField Binding="{Binding FirstName}" 
      
                FieldLabelContent="First Name: " />
      
        <datacontrols:DataFormTextField Binding="{Binding LastName}" 
      
                FieldLabelContent="Last Name: " />
      
        <datacontrols:DataFormTemplateField FieldLabelContent="Age">
      
            <datacontrols:DataFormTemplateField.DisplayTemplate>
      
                <DataTemplate>
      
                    <TextBlock Text="{Binding Age}" FontSize="24" />
      
                </DataTemplate>       
      
            </datacontrols:DataFormTemplateField.DisplayTemplate>
      
            <datacontrols:DataFormTemplateField.EditTemplate>
      
                <DataTemplate>
      
                    <TextBox Text="{Binding Age}" />
      
                </DataTemplate>
      
            </datacontrols:DataFormTemplateField.EditTemplate>
      
        </datacontrols:DataFormTemplateField>       
      
    </datacontrols:DataForm.Fields>
      
</datacontrols:DataForm>

Hope this helps!

tags: silverlight, dataform, riaservices, ria, xaml, data annotations, annotations, model

This work is licensed under a Creative Commons Attribution By license.

Clearing some air in Silverlight, Blend and Visual Studio Beta land | | Google Wave: the sky is falling and Flash/Silverlight are dead