Silverlight DataForm helpers
| Comments- | Posted in
- silverlight
- xaml
- ria
- riaservices
- dataform
- data annotations
- annotations
- model
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:
When you hover over this some helpful information displays in tool tip form:
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:
1: public class PersonModel
2: { 3: public string FirstName { get; set; }
4: public string LastName { get; set; }
5: public string EmailAddress { get; set; }
6: public string Gender { get; set; }
7: public int Age { get; set; }
8: } and the DataForm generated:
Not too helpful. Now, let’s modify our model with some attributes:
1: public class PersonModel
2: { 3: [Required()] 4: [Display(Name="First Name:")]
5: public string FirstName { get; set; }
6: 7: [Required()] 8: [Display(Name = "Last Name:")]
9: public string LastName { get; set; }
10: 11: [Display(Name = "Email Address:",
12: Description="We do not sell your information!")]
13: public string EmailAddress { get; set; }
14: 15: [Display(Description="Used for demographics")]
16: public string Gender { get; set; }
17: 18: public int Age { get; set; }
19: } And here is the new auto generated DataForm:
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:
1: ObservableCollection<PersonModel> people = new ObservableCollection<PersonModel>();
2: for (int i = 0; i < 10; i++)
3: { 4: PersonModel p = new PersonModel() { FirstName = "First" + i.ToString(), LastName = "Last " + i.ToString(), Age = i };
5: people.Add(p); 6: } 7: 8: DataBrowser.ItemsSource = people; Check out what is generated:
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:
1: <datacontrols:DataForm x:Name="DataBrowser" Width="400" AutoGenerateFields="False">
2: <datacontrols:DataForm.Fields>
3: <datacontrols:DataFormTextField Binding="{Binding FirstName}"
4: FieldLabelContent="First Name: " />
5: <datacontrols:DataFormTextField Binding="{Binding LastName}"
6: FieldLabelContent="Last Name: " />
7: <datacontrols:DataFormTemplateField FieldLabelContent="Age">
8: <datacontrols:DataFormTemplateField.DisplayTemplate>
9: <DataTemplate>
10: <TextBlock Text="{Binding Age}" FontSize="24" />
11: </DataTemplate>
12: </datacontrols:DataFormTemplateField.DisplayTemplate>
13: <datacontrols:DataFormTemplateField.EditTemplate>
14: <DataTemplate>
15: <TextBox Text="{Binding Age}" />
16: </DataTemplate>
17: </datacontrols:DataFormTemplateField.EditTemplate>
18: </datacontrols:DataFormTemplateField>
19: </datacontrols:DataForm.Fields>
20: </datacontrols:DataForm>
Hope this helps!
Please enjoy some of these other recent posts...
Comments