DescriptionViewer in Silverlight 3

25 Jan

One of the new data controls in Silverlight 3 is called DescriptionViewer.

A DescriptionViewer control displays an information icon and shows a text description in a tooltip when the mouse pointer is over the icon. It also tracks validation error states so that you can implement a custom error display. It can be used to display a description by itself or be associated with another control.

To use the DescriptViewer you must add a reference to the System.Windows.Controls.Data.Input.dll assembly.

image

Used at it’s most simple form by setting the Description property this is what you will get.

image

image

As mentioned at the beginning, the DescriptionViewer control is a data control. To gain full advantage of its functionality, you need to bind data to it.

Start by looking at your data class. It’s possible to add a Display attribute to your data class. The Display attribute takes several parameters and among them a Description. Before you can use the Display attribute you need to make a reference to the System.ComponentModel.DataAnnotations.dll assembly.

image

The description parameter can be used as content to our DescriptionViewer. To accomplish that you need to point the DescriptionViewer to the control that the DescriptionViewer is related to – in this case it is the TextBox control.

image

To fill the controls with data you should add some data to the DataContext of the page.

image 

The content of the DescriptionViewer is now bound to the Description parameter of the Display attribute in your Person class.

image

All-in-all you don’t save any keystrokes by using the Description parameter on the Display attribute but it’s highly maintainable – if you decide to make changes in the data class, you don’t need to make changes to the markup.

You can download the samplecode from my DropBox.

by xamlgeek

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: