The DataGrid control includes three different column types that you can add to the Columns collec-tion: Text, CheckBox, and Template. Each column allows you to bind a field from the data source to it, using the column’s Binding property.
If you configure the grid to automatically generate columns, the grid tries to choose the correct column type to use based on the structure of the data. For example, if the bound data contains a Boolean property, the grid automatically uses a DataGridCheckBoxColumn to show that data.
Of course, if you have disabled auto-generation of columns, then you need to define them yourself.
Listing 6-12 shows how you can use the Columns collection to display data in the DataGrid.
listing 6-12: Using the Columns collection to display data
<my:DataGrid ItemsSource=”{Binding}“ AutoGenerateColumns=”False”>
<my:DataGrid.Columns>
<my:DataGridTextColumn Binding=”{Binding FirstName}“ />
<my:DataGridTextColumn Binding=”{Binding LastName}“ />
<my:DataGridTextColumn Binding=”{Binding Address}“ />
<my:DataGridTextColumn Binding=”{Binding City}“ />
</my:DataGrid.Columns>
</my:DataGrid>
Notice that when defining columns you use standard Silverlight binding syntax in each column’s Binding property to indicate which property of the ItemsSource the column is bound to. Because the columns use this syntax, you can take advantage of any of its features, such as value converters and formatting. The columns will also use standard two-way binding to allow data in column cells to be edited.
To control the order in which the columns are displayed, you can use the column’s DisplayIndex. When rendered, grid columns also include a header. To provide text for the header, columns expose a string Header property. If the grid is automatically generating the columns, the control will by default use the property names of the item source as the columns’ header text, which you can over-ride using the Header property. If you manually define columns, then you need to explicitly define the text that should be used for the column header.
Unfortunately, the DataGrid does not provide a DataTemplate for the header, but if you do want to change the default style of a column header, you can create your own DataGridColumnHeader style and assign it to the column’s HeaderStyle property.
If you are defining your own columns, in addition to the DatasGridTextBoxColumn shown in Listing 6-12, you can also include the DataGridCheckBoxColumn or DataGridTemplateColumn in your Columns collection. Listing 6-13 shows how to add a DataGridCheckBoxColumn and bind it to a Boolean property in the ItemsSource.
listing 6-13: adding a DataGridCheckBoxColumn
<sdk:DataGrid ItemsSource=”{Binding}“ AutoGenerateColumns=”False” >
<sdk:DataGrid.Columns>
<sdk:DataGridCheckBoxColumn Binding=”{Binding IsActive}“ />
<sdk:DataGridTextColumn Binding=”{Binding FirstName}“ />
<sdk:DataGridTextColumn Binding=”{Binding LastName}“ />
<sdk:DataGridTextColumn Binding=”{Binding Address}“ />
<sdk:DataGridTextColumn Binding=”{Binding City}“ />
</sdk:DataGrid.Columns>
</sdk:DataGrid>
Figure 6-12 shows the checkbox column in the DataGrid.
figure 6-12
The DataGridCheckBoxColumn not only allows you to use a standard two-state checkbox, but by setting the IsThreeState property, you also can have the checkbox behave like a tri-state checkbox.
This allows you to set the IsChecked property to True, False, or Null.
As the name suggests, the DataGridTemplateColumn allows you to take control of the contents of cells in a column. The CellTemplate property accepts a DataTemplate, which is used to define the contents of the column while not being edited. Listing 6-14 demonstrates using the DataGridTemplateColumn to show an Image in a column.
listing 6-14: Using the DataGridTemplateColumn to show an image
<Grid x:Name=”LayoutRoot” Background=”White”>
<Grid.Resources>
<DataTemplate x:Key=”myEmployeeImageTemplate”>
continues
<Grid>
<Image Source=”{Binding PhotoPath}“ />
</Grid>
</DataTemplate>
</Grid.Resources>
<sdk:DataGrid ItemsSource=”{Binding}“ AutoGenerateColumns=”False” >
<sdk:DataGrid.Columns>
The DataGridTemplateColumn also includes a CellEditingTemplate property, which allows you to specify a DataTemplate that the column should display when a cell enters Edit mode. Listing 6-15 shows how you can use the CellEditingTemplate to change the value of the column.
listing 6-15: Using the CelleditingTemplate to change the value of a column
<Grid x:Name=”LayoutRoot” Background=”White”>
<Grid.Resources>
<DataTemplate x:Key=”myEmployeeImageTemplate”>
<Grid>
<Image Source=”{Binding PhotoPath}“ />
</Grid>
</DataTemplate>
<DataTemplate x:Key=”myEditableEmployeeImageTemplate”>
<Grid>
<TextBox Text=”{Binding PhotoPath}“ />
</Grid>
</DataTemplate>
</Grid.Resources>
<sdk:DataGrid ItemsSource=”{Binding}“ AutoGenerateColumns=”False”>
<sdk:DataGrid.Columns>
<sdk:DataGridCheckBoxColumn Binding=”{Binding IsActive}“ />
<sdk:DataGridTextColumn Binding=”{Binding FirstName}“ />
<sdk:DataGridTextColumn Binding=”{Binding LastName}“ />
<sdk:DataGridTextColumn Binding=”{Binding Address}“ />
<sdk:DataGridTextColumn Binding=”{Binding City}“ />
<sdk:DataGridTemplateColumn
CellTemplate=”{StaticResource myEmployeeImageTemplate}“
CellEditingTemplate=
As you can see in the listing, the CellEditingTemplate property is used to provide a custom template that contains completely different content from the standard CellTemplate, and content that is appropriate for allowing the end user to edit the object’s PhotoPath property.
sorting
As shown previously, in its default state the grid automatically enables column sorting. Users can sort individual columns by clicking on the column header or by holding down the Ctrl or Shift keys while clicking on successive columns, sorting each.
Various Grid properties give you control of the Grid’s sorting behavior. At the control level, you can change whether or not you want to enable sorting in the entire grid by using the CanUserSortColumns property. Using the column’s CanUserSort property, you can control the sorting behavior for an indi-vidual column.
By overriding the DataGridColumnHeader style as described earlier, you can also control the sort indicator shown in the column header.
Finally, using SortMemberPath, you can configure a column to sort itself based on a different field from the one configured in the column’s Binding property.