Silverlight 4 provides some very powerful data form capabilities out of the box. You will no longer have to throw an exception just to send a validation error or even worry about hard-coding labels. With support for data annotations, IDataErrorInfo and more, you now have plenty "out of the box" to work with.
Let's explore the surface of some of these powerful new features!
IDataErrorInfo
With support for IDataErrorInfo as well as INotifyDataErrorInfo, you no longer have to raise exceptions just to validate your classes. Fire up VS 2010 and create a new Silverlight 4 application. First, we'll create a "helper" class to derive our entities from in order to perform validation and notify property changes. The class looks like this:
public abstract class BaseEntity : INotifyPropertyChanged, IDataErrorInfo
{
private Dictionary<string, List<string>> _errors = new Dictionary<string, List<string>>();
protected void RemoveErrors(string prop)
{
if (_errors.ContainsKey(prop))
{
_errors.Remove(prop);
}
}
protected void AddError(string prop, string error)
{
if (_errors.ContainsKey(prop))
{
_errors[prop].Add(error);
}
else
{
_errors.Add(prop, new List<string> { error });
}
}
protected void OnPropertyChanged(string prop)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(prop));
}
}
public event PropertyChangedEventHandler PropertyChanged;
public virtual string Error
{
get { return string.Empty; }
}
public virtual string this[string columnName]
{
get
{
System.Text.StringBuilder retVal = new System.Text.StringBuilder();
if (_errors.ContainsKey(columnName))
{
bool first = true;
foreach (string error in _errors[columnName])
{
retVal.Append(error);
if (first)
{
first = false;
}
else
{
retVal.Append(Environment.NewLine);
}
}
}
return retVal.ToString();
}
}
}
There are a few things going on here. First, we implement INotifyPropertyChanged in to facilitate binding. The protected OnPropertyChanged method allows derived classes to hook into this event.
Next, we implement IDataErrorInfo. This forces us to provide a single error property as well as an extension method that references errors for a given property. John Papa has an excellent article about building a handler for this at Enabling Validation in Silverlight 4 with IDataErrorInfo. In my case, I keep a dictionary referenced by the property name that holds a list in case there are multiple errors I want to show. When the errors are requested, I fold them into a single string using Environment.NewLine (OK, so the beta just came out the other day ... can't say I've fully tested that part).
Data Annotations
Now you can build a PersonInfo class based on this base class. To keep things simple for a contrived example, I chose just a first name, last name, and age. Here we'll need to add a reference to System.ComponentModel.DataAnnotations. You must install the latest Silverlight Toolkit for this. If you need to browse to it manually, it's located under the toolkit installation directory (usually c:\Program Files\Microsoft SDKs\Silverlight) under v4.0\Libraries\Client. Now we can derive the class and annotate it, like this:
public class PersonInfo : BaseEntity
{
private string _firstName, _lastName;
private int _age;
[Display(Name="First Name")]
[Required]
public string FirstName
{
get { return _firstName; }
set
{
if (string.IsNullOrEmpty(value.Trim()))
{
AddError("FirstName", "First name is required.");
}
else
{
RemoveErrors("FirstName");
if (!value.Equals(_firstName))
{
_firstName = value;
OnPropertyChanged("FirstName");
}
}
}
}
[Display(Name="Last Name")]
[Required]
public string LastName
{
get { return _lastName; }
set
{
if (string.IsNullOrEmpty(value.Trim()))
{
AddError("LastName", "Last name is required.");
}
else
{
RemoveErrors("LastName");
if (!value.Equals(_lastName))
{
_lastName = value;
OnPropertyChanged("LastName");
}
}
}
}
[Display(Name="Age (Years)")]
[Required]
public int Age
{
get { return _age; }
set
{
if (value < 18 || value > 130)
{
AddError("Age", "Age must be a valid integer between 18 and 130.");
}
else
{
RemoveErrors("Age");
if (!value.Equals(_age))
{
_age = value;
OnPropertyChanged("Age");
}
}
}
}
}
You'll probably pull out validations into a handler / rule set but basically what I'm doing is validating the value, setting an error or clearing all errors if it passes, then calling the property changed event if the value truly changes. Note the use of annotations to specify required properties as well as "friendly names" for the properties.
Now that our class is prepped, we can get to work on the XAML.
Implicit Styles
With support for implicit styles, we can set a style based on a target type and style it that way - allowing for themes to be set externally. We'll take advantage of that to set the width for our TextBox controls. I also add a reference to the PersonInfo class to use in data binding, so I won't need to touch the code-behind for MainPage.xaml:
<UserControl.Resources>
<local:PersonInfo x:Key="Person"/>
<Style TargetType="TextBox">
<Setter Property="Width" Value="200"/>
</Style>
</UserControl.Resources>
Data Input Helpers
Next, add a reference to System.Windows.Controls.Data.Input (found in the toolkit as well, same folder as the data annotations). We'll reference it at the top of our XAML (along with the local reference we need for the PersonInfo class:
xmlns:local="clr-namespace:DataForm"
xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
Great, now let's get to work! I'm going to show you the full snippet of XAML and then explain the pieces:
<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource Person}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<dataInput:Label Target="{Binding ElementName=tbFirstName}"
Grid.Row="0" Grid.Column="0"/>
<StackPanel Orientation="Horizontal"
Grid.Row="0" Grid.Column="1">
<TextBox x:Name="tbFirstName"
Text="{Binding Path=FirstName, Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True, FallbackValue=''}"/>
<dataInput:DescriptionViewer Description="Please enter your first name."
Target="{Binding ElementName=tbFirstName}"/>
</StackPanel>
<dataInput:Label Target="{Binding ElementName=tbLastName}"
Grid.Row="1" Grid.Column="0"/>
<StackPanel Orientation="Horizontal"
Grid.Row="1" Grid.Column="1">
<TextBox x:Name="tbLastName"
Text="{Binding Path=LastName, Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True, FallbackValue=''}" />
<dataInput:DescriptionViewer Description="Please enter your last name."
Target="{Binding ElementName=tbLastName}"/>
</StackPanel>
<dataInput:Label Target="{Binding ElementName=tbAge}"
Grid.Row="2" Grid.Column="0"/>
<StackPanel Orientation="Horizontal"
Grid.Row="2" Grid.Column="1">
<TextBox x:Name="tbAge"
Text="{Binding Path=Age, Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True, FallbackValue='0'}"/>
<dataInput:DescriptionViewer Description="Please enter a valid age between 18 and 130."
Target="{Binding ElementName=tbAge}"/>
</StackPanel>
<dataInput:ValidationSummary Grid.Row="3" Grid.Column="0"
Grid.ColumnSpan="2"/>
</Grid>
Some of these helper classes are made available via the toolkit for Silverlight 3 as well.
Labels
The label class lets us bind to an element like a textbox. It will pull the name of the databound property from the annotations and display it. If a validation error is thrown, it will turn red to further reinforce the error. If the field is tagged as required, the label will automatically bold itself to indicate a required field.
Learn more about the Label class
New Bindings
If you take a look at the textbox contorls, you'll see we've added new binding parameters. Specifically, ValidatesOnDataErrors (as opposed to exceptions) and FallbackValue (a value to use when databinding fails).
Description Viewer
The description viewer control provides an easy way to show tips and hints and is similar to the ToolTip service. It will show an informational icon that, when the cursor hovers over, will provide a hint or description.
Learn more about the description viewer
Validation Summary
Finally, we add a validation summary control. The default behavior is to list all errors. When the user clicks on an error, it gives focus to the UI element that caused the error.
Learn more about the validation summary class
Putting it all Together
When you tie this all together and run it (without any additional code behind), this is an example of what you'll see:
- Note the labels automatically pulled from the
DisplayAttributeon the entity class - The labels are bold due to the
RequiredAttributeannotation - The labels on properties with errors are colored red
- I clicked on the information glyph next to the first name text box and was the hint to enter my first name
- I clicked on the red triangle in the upper right corner of the text box for age and was shown the error that my age is not in the valid range
- The
ValidationSummarycontrol has summarized my errors (if I click on one, I'll be taken to the control with the issue)
As you can see, that's quite a bit of functionality right out of the box, and it allows a nice, clean separation of things like attributes and descriptions from the user interface that presents them.
