asp:Feature
LANGUAGES: C#
ASP.NET VERSIONS: 3.5
Columns & Rows: Part II
Silverlight 2.0 DataGrid Columns
By Bilal Haidar
Having a Silverlight DataGrid control displaying its columns in an auto-generated fashion does not satisfy most developers. Rather, it is usually the case that developers require in-depth control over the DataGrid columns to decide what to show, what to hide, and even to customize the appearance of the columns.
The Silverlight DataGrid gives developers the opportunity to manipulate and configure its columns in an easy and flexible way. Several built-in columns ship with Silverlight out of the box and within the DataGrid control to help in the customization process.
You were introduced to the DataGrid s major properties in the first installment of this series properties you can use to configure the appearance and behavior of the DataGrid (see the June issue of asp.netPRO). In this article, you ll be introduced to using the DataGrid with column auto-generation, learning how to add a DataGrid control to a User Control page with columns being auto-generated. You ll be introduced to the built-in columns available for you to use out of the box . You ll also learn how to define DataGrid columns in XAML. And, finally, you ll learn how to add at runtime a DataGrid control, together with its columns.
References to Silverlight 2.0
This article assumes you have a fair knowledge of using Silverlight 2.0, especially data-binding features, and is not intended to explain how to use Silverlight 2.0. If you feel you need more information on Silverlight 2.0, it is recommended you check the official website of Silverlight at www.silverlight.net (it contains dozens of articles and videos). Another major resource to learn Silverlight 2.0 is www.silverlightshow.net. This website focuses on delivering rich and comprehensive tutorials covering Silverlight. In addition, you can download from www.microsoft.com/Downloads/details.aspx?familyid=BCE7684A-507B-4FC6-BC99-6933CD690CAB&displaylang=en the Microsoft Silverlight 2 SDK Documentation that covers all the features of Silverlight.
Simple DataGrid
This article follows a step by step approach to present the DataGrid control and its defined columns. To start, we ll add a simple DataGrid control and bind it to some data. Figure 1 shows the XAML used to add a DataGrid control.
The XAML in Figure 1 shows the custom namespace defined at the User Control header definition. As mentioned in Part I, the DataGrid control is part of the Silverlight 2.0 Software Development Kit (SDK), and must be imported to this User Control. The data namespace alias is used whenever you add a DataGrid control to the page, as a way to note to the XAML compiler that the DataGrid control is defined within a different namespace than that of the current User Control.
AutoGenerateColumns="True"
IsReadOnly="True"
HeadersVisibility="Column"
RowBackground="Beige"
AlternatingRowBackground="AliceBlue"
SelectionMode="Single"
GridLinesVisibility="Horizontal"
ColumnWidth="SizeToHeader" ItemsSource="{Binding}"> Figure 1: Simple DataGrid control Defining a DataGrid control instance is as simple as
defining the control with the x:Name
only. However, the DataGrid in Figure 1 configures a few major properties,
like:
IsReadOnly:
When set to false, the user can double-click any cell and edit its value;
however, having its value set to true makes the entire DataGrid read-only,
without allowing any cell editing.
AutoGenerateColumns:
This property tells the DataGrid whether to auto-generate the columns based on
the data source being bound to it when this property is set to true, or whether
the DataGrid control should expect column definitions when the value of this
property is set to false. The rest of the properties were discussed in Part I
of this series. Running the Silverlight application displays the diagram shown in
Figure 2. Figure 2: DataGrid with auto generated
columns The DataGrid control shown in Figure 1 is bound to
the data source in the code-behind as follows: this.dgEmployees.DataContext = EmployeeManager.GetEmployeeList(); The EmployeeManager.GetEmployeeList method is a
simple method that returns a collection of Employee objects to be displayed in
the DataGrid. To bind the DataGrid control to a data source, use either of
these properties:
ItemsSource:
You set the ItemsSource property to an IEnumerable implementation. Examples are
List
DataContext:
You set the ItemsSource property to the Binding extension markup {Binding}
value. In the code-behind you simply bind on the DataContext property and not
the ItemsSource property. Once you bind the DataGrid control to a data
source, each object in the bound collection will be represented by one row, and
every property on the bound object will be represented by a column, as in the
case of AutoGeneratedColumns=true . DataGrid Built-in Columns The DataGrid control ships with three built-in
columns that help the developer customize the data displayed by the DataGrid.
The built-in columns are:
DataGridTextColumn:
The DataGridTextColumn is the default, and simplest column type. By default,
when the AutoGeneratedColumns property of the DataGrid is set to true, the
DataGrid control uses the DataGridTextColumn to represent all the data bound
object s properties (except those of Boolean values). In the read-only mode,
the DataGridTextColumn uses a TextBlock control to represent the underlying
data source object s property value. While in edit mode, a TextBox control is
used to display the data, allowing the use of inline editing. For more detailed
information, visit msdn.microsoft.com/en-us/library/system.windows.controls.datagridtextcolumn(VS.95).aspx.
DataGridCheckBoxColumn:
The DataGridCheckBoxColumn is used by the DataGrid control to represent Boolean
values, in the underlying data source, as a CheckBox control. This means that
if you have a property in the object that is of type Boolean, that property
will be displayed inside the DataGrid control as a CheckBox control. For more
detailed information, visit msdn.microsoft.com/en-us/library/system.windows.controls.datagridcheckboxcolumn(VS.95).aspx.
DataGridTemplateColumn:
The DataGridTemplateColumn is the most flexible and popular DataGrid column. In
some cases you might feel unsatisfied with the other two built-in columns, and
thus feel the need for a flexible way to define new column types. For such
cases, the DataGridTemplateColumn is used. For the read-only state, set the
CellTemplate property to any UI with which you want to display the underlying
data. In the case of editing state, set the CellEditingTemplate property to the
UI to show when the DataGrid s row is in edit mode. For more detailed
information, visit msdn.microsoft.com/en-us/library/system.windows.controls.datagridtemplatecolumn(VS.95).aspx. Now that you know the different column types
available, let s have a look at some of the major properties each column holds. Common Properties Some properties are shared among all the columns previously
cited:
CanUserReorder:
Allows/Prevents user from reordering the column. The value set at the column
level overrides the one set at the DataGrid level.
CanUserResize:
Allows/Prevents user from resizing the column. The value set at the column
level overrides the one set at the DataGrid level.
CanUserSort:
Allows/Prevents user from clicking on the column to sort the data accordingly.
The value set at the column level overrides the one set at the DataGrid level.
Header:
Allows setting a header text for the column.
IsFrozen:
If this is true , the specified column will be frozen and outside the range of
the horizontal scrollbar.
IsReadOnly:
When set to true , the column is always displayed as read-only.
Double-clicking the column in this case will not enter the row into the editing
mode. When this property is set both at the DataGrid level and column level,
the true value always wins.
MaxWidth:
This property specifies the maximum width a column can reach.
MinWidth:
This property specifies the minimum width a column can reach.
SortMemberPath:
By default in the DataGridTextColumn and DataGridCheckBoxColumn, this property
is set to the bounding property on the column. In the case of
DataGridTemplateColumn, this property must be set to enable sorting on the
template column.
Visibility:
This property controls the visibility of the column.
Width:
This property sets the width of the column. This property is of type
GridLength, which helps in auto-sizing the column. It can be any of the
following values: o SizeToHeader: This value auto-sizes the
width of the cell to that of the header column cell. o SizeToCells: This value auto-sizes the
width of the cell to the largest cell showing in the same column, ignoring the
header column cell width. o Numeric: This value specifies the exact
width as a double value. o Auto: This is a combination of the
SizeToHeader and SizeToCells values. With this value, the cell s width would
auto-size to the header column cell width, or to the largest cell width. DataGridTextColumn.
The DataGridTextColumn has a few properties of its own:
FontFamily:
Allows you to set the font family of the cell s content.
FontSize:
Allows you to set the font size of the cell s content.
FontStyle:
Allows you to set the font style of the cell s content.
FontWeight:
Allows you to set the font weight of the cell s content.
Foreground:
Allows you to set the foreground color of the cell s content. DataGridCheckBoxColumn.
The DataGridCheckBoxColumn has a single, specific property:
IsThreeState:
This property decides whether the underlying CheckBox control allows three or
two states. In addition to Checked and Unchecked, the CheckBox can have a null
state, which happens when you bind the CheckBox control to a null value when
its IsThreeState property is enabled. DataGridTemplateColumn.
The DataGridTemplateColumn has two main specific properties:
CellTemplate:
You set this property to a DataTemplate to control how to display the data in
this custom cell when the row is in read-only mode.
CellEditingTemplate:
You set this property to a DataTemplate to control how to display the data in
this custom cell when the row is in edit mode. In the coming sections you ll see how to use the
above columns to customize the display of data using the DataGrid control. DataGrid XAML-defined Columns In this section of the article, we ll look at how
to add a DataGrid control to a User Control and define its columns explicitly. Figure
3 shows a DataGrid control definition.
Binding="{Binding Path=FirstName}"
CanUserReorder="False" CanUserResize="True"
CanUserSort="True" IsReadOnly="True"
Width="100" Header="First Name">
Binding="{Binding Path=LastName}"
Width="100" Visibility="Collapsed"
Header="Last Name">
Binding="{Binding
Path=IsMarried}" Header="Is Married?"
Visibility="Visible" IsThreeState="True" />
ItemsSource="{Binding Path=MemberOf, Mode=OneTime}"
BorderThickness="0" Background="Transparent" />
Figure 3: DataGrid with XAML-defined columns To define DataGrid columns, simply use the Columns
property on the DataGrid by using the property element syntax. The Columns
property holds a collection of columns. The first column is defined as a DataGridTextColumn
as follows: Binding="{Binding
Path=FirstName}"
CanUserReorder="False"
CanUserResize="True"
CanUserSort="True" IsReadOnly="True" Width="100"
Header="First Name">
The Binding property is set to the bound object s
property; in this case, FirstName . Other common properties are set, like the
CanUserReorder, CanUserResize, CanUserSort, IsReadOnly, Width, and Header. The above column makes use of the ElementStyle
property, which can be used to edit the Style of the cell displayed. The second column defined also is a DataGridTextColumn,
and is similar to the above column; however, its Visibility property is set to
Collapsed , which means the column will be hidden. The third column is defined as a
DataGridCheckBoxColumn:
IsThreeState="True" /> Defining a DataGridCheckBoxColumn is as simple as
adding the column definition and configuring a few properties on the
corresponding column (as shown above). Notice in Figure 2 the MemberOf column. This column
corresponds to a property on the data source object that is of type
List A DataGridTemplateColumn is needed to solve this
problem, as shown in the MemberOf column here:
ItemsSource="{Binding Path=MemberOf, Mode=OneTime}"
BorderThickness="0" Background="Transparent" /> When you add a DataGridTemplateColumn, the
important thing to define is the CellTemplate. The CellTemplate is set to a
DataTemplate that defines the UI of the cell. In this case, the DataTemplate
defines a ListBox control to list all the entries of the bounding property, the
MemberOf collection. DataGrid Columns at Runtime Now that you ve seen how to define columns inside
XAML, it s time to see how we can accomplish the same thing at runtime or
through code. The following code shows how to define the DataGrid
control and specify its columns using code-behind. Start by creating a new
instance of the DataGrid control: DataGrid gdEmployees = new DataGrid(); Configure some properties and the data source: gdEmployees.AutoGenerateColumns = false; gdEmployees.ItemsSource =
EmployeeManager.GetEmployeeList(); gdEmployees.IsReadOnly = false; Add the DataGrid instance to the User Control; in
this case, the DataGrid is added as a child control into the User Control s
Grid layout panel: this.LayoutRoot.Children.Add(gdEmployees); Start adding a few columns and adding some major
properties to them: DataGridTextColumn jobTitle = new DataGridTextColumn(); jobTitle.Header = "Job Title"; jobTitle.Binding = new Binding("JobTitle"); jobTitle.IsReadOnly = true; Add into the DataGrid s Column collection the
column created: gdEmployees.Columns.Add(jobTitle); Another column is added of type
DataGridCheckBoxColumn: DataGridCheckBoxColumn isMarried = new
DataGridCheckBoxColumn(); isMarried.Binding = new Binding("IsMarried"); isMarried.Header = "Is Married?"; isMarried.IsThreeState = true; gdEmployees.Columns.Add(isMarried); As you can see, creating a DataGrid at runtime and
defining its columns is as simple as creating it through XAML-defined columns. There are additional major properties that can be
manipulated on the DataGrid control. The code download accompanying this
article explores additional important properties; take some time to explore how
they are implemented. I also suggest you visit bhaidar.net/SilverlightDataGrid/GridColumns.aspx
to browse a live sample and play around with all the major DataGrid properties. In addition, you can download the accompanying
solution code for this article and open it in Visual Studio 2008. This will
help you browse all the DataGrid properties that were not tackled in this
article, yet are covered in the accompanying code. If Visual Studio gives the
following error upon opening the code solution: The project
type is not supported by this installation. all you need to do is reinstall on your machine the
Visual Web Developer of the current installation of Visual Studio 2008. Conclusion This article provides an overview to the built-in
DataGrid columns that ship with Silverlight 2.0. It goes deeper by
experimenting with defining DataGrid columns at the XAML level and at runtime
through code. Source code accompanying this article is available for download. Bilal Haidar ([email protected]) is a Microsoft MVP in
ASP.NET. He is an MCP, MCTS, MCPD, MCT, and Telerik MVP. He is a lead software
developer at CCC, a multinational construction company based in Athens, Greece.
