If you never use Blend, then this post will be of no interest to you other than to laugh at my misery; however, if you are a designer who wants to style or template the various elements in Xceed DataGrid for Silverlight, then this is the post for you.

Since the initial release of Xceed DataGrid for Silverlight, we received many questions in regards to styling and retemplating various grid elements in Blend. Unfortunately, the answer until now was "Yes, it can be done. Good luck." Since this answer was understandably unsatisfactory, Matt (@MattD1980) and I decided that it was time to make some tutorials that demonstrate how. Ok, that's not exactly what happened, but that's my story and I'm sticking to it! Now, although these guides will be added to the documentation, we thought it might be a good idea to get the first example out there to help out the designers who need to get the show on the road. So what better elements to start with than the column-manager cells (AKA column headers).

I will start with a semi-empty project that already contains an XML data source. You can refer to the Expression Blend topic in the documentation for instructions on how it was created. A license key was also provided in the public App constructor in order to be able to use Xceed DataGrid for Silverlight (see Licensing topic for more information) .

In order to provide a new style for the column-manager cells, we need to add a column-manager cell to our scene. To do so, type "ColumnManagerCell" in the Asset Library and, once found, drag it to the scene's design surface. Notice that a standalone column-manager cell was added to the XAML. We will be removing it later.

The next step is create a copy of the template, which can be done by right-clicking on the column-manager cell and selecting the "Edit Template->Edit a Copy..." option in the context menu.

Provide your style resource with a key, indicate where you want it defined, then press OK. For this example, I will name my style "UnderlinedColumnManagerCellStyle"

Because we are creating a copy of the template, Blend is kind enough to include everything that is required by the template. To see the newly created style, which is currently identical to the original, scroll down to the bottom.

So let's modify the style to add an "underline" to the column-manager cell on mouse over. To do so, select the column-manager cell in the scene, and the select its top-most parent grid (1) in the Objects and Timeline window. Double click on the Rectangle (2) to add it at the parent-grid level in the visual tree, making sure that is it the last item in the tree since we want it to overlap the other elements (3).

Making sure the Rectangle is selected and correctly positioned at the bottom of the column-manager cell, in the property grid, align it to the bottom by setting its VerticalAlignment property to Bottom, the HorizontalAlignment property to Stretch, give it a height of 4 pixels, a stroke thickness of 0, and change its opacity to 0 since we only want it to be visible when the MouseOver state kicks in. Also make sure to set its background to a nice shade of pink for maximum results. It is also recommended to name your Rectangle. I suggest something snazzy like underlineRectangle.

To recap:

1. Position the Rectangle at the bottom of the column-manager cell
2. Make it pink
3. Set its VerticalAlignment property to Bottom
4. Set its HorizontalAlignment property to Stretch
5. Set its Height property to 4, or to any other value if you are feeling wild
6. Set its StrokeThickness property to 0
7. Set its Opacity property to 0
8. Give it a snazzy name

To add the MouseOver state, select the States tab and click on MouseOver in the CommonStates section, which should now put Blend in "recording mode". While in recording mode, select the Rectangle and change its opacity back to 100. 

Do not forget to move the focus to another editor in the property grid or you will spend the afternoon trying to figure out why the state is not working! Take my word for it, that was not a pleasant afternoon and involved many expletives.

Once you are done, stop the recording by clicking on the red button. Congratulations! You have successfully added a new visual state!

Obviously at this point you are anxious to try out your new style, but there is still a little bit of work that needs to be done. First, you need to add a datagrid control to the UserControl. To do so, begin by returning the scope to the UserControl and select it in the hierarchy.

In the Asset library, search for "DataGridControl" and, once found, add it to the UserControl.

The last steps are to delete the stand-alone column-manager cell that was added to the XAML, and remove the style key (x:Key="UnderlinedColumnManagerCellStyle") from the column-manager cell's style so that it can be applied implicitly to every column-manager cell in the grid.

I lied, there is one last step, which is to bind the datagrid control to a data source. You can refer to the Expression Blend topic in the documentation for instructions on how it was created and how to bind the datagrid to it.

Hit F5 and voilà! You now have a fancy new style for your column-manager cells! 

Good luck!