Now that the Visual State Manager (VSM) is part of the WPFToolKit, I thought I’d show a basic example of how to utilize VSM with the DataGrid. Some prereq’s and resources:
· You can download the toolkit here
So, what I thought I would show is how to get it working with DataGridRows. The toolkit currently uses this VisualStateBehavior pattern to hook up the VisualStateManager to the control. If you take a look in the toolkit, you’ll find behavior classes for Button, Control, ListBoxItem, TextBoxBase, etc. They basically attach listeners of particular DPs and call VisualStateManager.GoToState as necessary.
In this sample I will create a DataGridRowBehavior class that will create visual states for:
In the MouseOver state I want to make a somewhat subtle change to the background and for the Selected state I want to use the same background color but make it more illuminated. Here is what it will look like,
For the Editing state, I will use the same background color as the Selected state but I want it to pulse to signify this editable state. Unfortunately a picture will not be able to describe this behavior so you’ll have to download the sample to see it.
First I’ll start with the DataGridRowBehavior class. This class derives from ControlBehavior and basically attaches to DPs to be notified on value changed. When it is notified, it calls VisualStateManager.GoToState on the particular state that it should be in. This is very similar to the standard way of creating a control with VSM behavior except it is using the attached behavior pattern instead. More on attached behavior’s here on John Gossman’s blog. So here is what my class will look like:
From there you need to update the DataGridRow ControlTemplate to include the VisualStateGroups. I’ve taken the existing DataGridRow ControlTemplate and added two rectangles that will both overlap the main Border, “DGR_Border”. These rectangles will initially have an Opacity of zero and when a particular VisualState is triggered, the Opacity will be updated so that the appearance of the row’s background changes. To see the xaml for the full ControlTemplate, you can download the sample below.
For the VisualStateGroups, here are the groups I’ve set:
Then for each state I setup a Storyboard to create the behavior for that state. Here is an example of MouseOver:
fillColor represents one of the rectangles that I’ve added to the ControlTemplate. I do something similar with the Selected state and for the Editing state I create a pulsing effect by animating the rectangle’s Fill property with a different gradient brush that repeats forever.
With the VisualStateGroups setup, the last thing I have to do is register DataGridRowBehavior with the VisualStateBehavior property. This is how the VisualStateManager will recognize that my ControlTemplate makes use of VisualStateManager. I set that up in my DataGridRow style like so:
So with that, here is the full sample. I did go over the implementation details pretty quickly so please take a look at the sample to see the full code and markup details. Stay tuned for more!