Silverlight Validation Styles Tutorial...
Silverlight 3 comes with some pretty neat built-in data validation features. The process to it set it up is simple and the out-of-the-box result might be good enough as-is for your project. A red border surrounds the input field control and when it has the focus, it displays a subtle fade-in popup, next to the invalid field, with the corresponding message for that field.
However, if we wanted to customize the look and feel of what is provided out of the box, where is this code and how much can I modify/customize it...? Can I change the font...? the colors...? even the shape of the box...? The answer is yes.
With this experiment, I will try and cover some simple examples, that will hopefully point you in the right direction, should you wish to customize your input controls and validation.
Below I have three examples of what the validation might look like. In all examples, the field validates a 5-digit value, so anything less than, or, over 5 digits, will throw an error and display the corresponding tooltip. To try it, just add an extra character and hit [Tab].
Setting up validation:
Assuming you have a blank Silverlight project started up, we'll start with adding a textbox in your MainPage.xml in your main container, which by default is a Grid control.
Adding a Textbox to MainPage.xaml.cs
Now, switch to your MainPage.xaml.cs and it should look like this:
Default MainPage.xaml.cs code
We are going to add a new class that defines the members that need to be validated. We will call this class SilverlightForm and it will contain a single property called Field. In the Getter method, it will have an f statement that verifies a certain condition. In this case, we are just checking for a string of 5 characters in length when we write (set) the value and we retrieve (get) the value as-is. If it doesn't pass the condition, we throw an exception, with a custom message.
Adding a SilverlightForm class
Now that we have our SilverlightForm class, let's declare it in the constructor of the MainPage class.
SilverlightForm class declaration
In my Silverlight projects, I usually add an empty eventhandler where I run all my initialization code once the Silverlight object has been loaded. This ensures me that all members are available, especially when dealing with html parameters being fed into the Silverlight object at run-time.
Adding Loaded eventhandler
Next, set an init value for the Field1 property and set the DataContext property of the LayoutRoot control to the silverlightForm class instance
Setting RootLayout Context
Your final block of code should looks similar to this:
SilverlightValidationSample.xaml.cs
Last we need to tie / bind the single field in in our MainPage.xamll file to the single property in our silverlightForm class instance. We do this by adding the following in the text attribute of the TextBox control in your MainPage.xaml file.
Adding Text Validation Binding
That is it! Compile and you'll end up with a field when any other value is entered that is different than 5 characters in length, it will throw the exception and show the exception string in the automatically generated tooltip.
Try it out below...
Now, notice that when the tooltip is displayed, it will try to adjust based on where it pops up, and could be cut-off. The reason this happens (in this case) is that width of the tooltip balloon is hardcoded somewhere and we didn't write this code...so where is it and how do we fix this...?
If we could modify the width, and maybe some other properties of this validation tooltip to let us custom style it to our needs, that would be fantastic. This is how we do that.
Keep your project open in Visual Studio and launch Expression Blend (you do have Blend installed, don't you...?). Open the same project with Blend
You will find a single TextBox control on the canvas. It is a white box on your canvas. Right-click on the TextBox to show the context menu...
Select "Edit Template..." and then "Edit a Copy..." as shown in the adjacent image.
A dialog menu will show that asks you where exactly do you wish to create this override template. Blend, will create a copy of thedefault style for the textbox and the validation tooltip for you and you need to choose its context. If you choose App.xaml, it will allow you to apply this style to any other TextBox control anywhere else in the entire Silverlight application. If you choose Usercontrol, it will be at the Usercontrol level, meaning only TextBoxes inside the UserControl element.
For this case, give it any name and just pick UserControl.
Clicking on OK will add a large block of xaml to your UserControl class, which defines the current style for the TextBox and Tooltip. If you notice, it also added the Style attribute and reference to the TextBox control.
Basically, what we did was to create a new style for the tooltip (and the textbox as well... more about this later), that can be fully customized to meet your needs.
The first element will contain an attribute x:Key="ValidationToolTipTemplate". This defines how the validation Tool tip behaves and looks. For our purposes, we just want to adjust the width of the current tooltip. If you look at the bottom of that element, you will find the following block of code. Just modify the MaxWidth attribute to anything you like and re-build you Silverlight application.
See below the result: the tooltip assumes the width you have given it (in this case, I gave it 180px).
Try it out below...
Now, if you collapse the newly added styles, you'll see that it consists mainly of two main elements: the first one defines the tooltip and the second one defines looks and behaviour of the TextBox control. So, let's say we wanted rounded corners on our TextBoxes...? By modifying the Style with x:Key = "AdjustedPosition" we can do just that and maybe even add an image or anything else we like.
Try it out below...
Style for rounded corners and custom tooltip
Enjoy!