This article is compatible with the latest version of Silverlight.
Here is my next article about the DataGrid control in Silverlight. The previous one was a brief introduction of the control and explained things like populating it with data and defining its columns. If you've missed it you can find it here. In this one we're going to take a look at some properties that can be used to change the look of our grid and modify a bit the basic functionality. There will be nothing too complicated but things like alternating rows, headers, gridlines, column resizing can prove to be very useful. At the end of the article you can find a live demo and a source code.
Alternating rows
To change the colors of the alternating rows we use the AlternatingRowBackground and the RowBackground properties:
<my:DataGrid x:Name="Foods" AutoGenerateColumns="False" AlternatingRowBackground="AliceBlue"
RowBackground="Azure">...
If you don't want the rows to alternate just set the two properties to the same color.
Headers visibility
In the DataGrid we have Column and Row headers. Thanks to the HeadersVisibility property we can easily hide all of them or show them depending on their type. By default all headers are shown.
If we set only the column headers to be shown, here is the result:
<my:DataGrid x:Name="Foods"
HeadersVisibility="Column"
AutoGenerateColumns="False"
AlternatingRowBackground="AliceBlue"
RowBackground="Azure">...
Gridlines visibility
As you probably noticed that by default the cells of the grid have borders - that's gridlines. With the GridlinesVisibility property we can manipulate their visibility. By default all are shown, but we can also set only the horizontal or the vertical gridlines or none of them to be shown.
Let's set this property to Horizontal and here is how it looks:
<my:DataGrid x:Name="Foods"
GridLinesVisibility="Horizontal"
HeadersVisibility="Column"
AutoGenerateColumns="False"
AlternatingRowBackground="AliceBlue"
RowBackground="Azure">...
Selection mode
We've mentioned in the previous article that the DataGrid has embedded selection functionality. When clicking on a row we can select it. By default we can select multiple rows, but thanks to the SelectionMode property we can limit it to just one.
Reordering the columns
By default the user can reorder the columns of the grid by dragging and dropping the headers. We can control that behavior of the DataGrid with the CanUserReorderColumns property.
<my:DataGrid x:Name="Foods"
CanUserReorderColumns="False"
HeadersVisibility="Column"
GridLinesVisibility="Horizontal"
AutoGenerateColumns="False"
AlternatingRowBackground="AliceBlue"
RowBackground="Azure">...
Resizing the columns
By default the columns of the grid can be resized. But if you don't want the user to change their size you can set the CanUserResizeColumns to false:
<my:DataGrid x:Name="Foods"
CanUserResizeColumns="False"
HeadersVisibility="Column"
GridLinesVisibility="Horizontal"
AutoGenerateColumns="False"
AlternatingRowBackground="AliceBlue"
RowBackground="Azure">...
Demo
Here is a little demo so you can try and see how the properties work in real time. The source code can be downloaded here.
Summary
These were the most important properties that we can use to change the look of our grid. Nothing complicated again, but we're just at the start, so stay tuned for the next article about the DataGrid.