Use the DataGrid control
The DataGrid control can display a collection of data in multiple columns and rows. It includes functionality to sort by columns.
For more information about the DataGrid control, see DataGrid Class (System.Windows.Controls) on MSDN.
To create sample data to display in a DataGrid control
You can use any type of data in the DataGrid control. If you don't already have data that you can use in the procedure "To populate a DataGrid control," later in this topic, follow this procedure to set up sample data that will fully illustrate the features of the DataGrid control.
If you can't see the Data panel, click Data on the the Window menu.
In the Data panel, click Add sample data source
.png "Ee341396.30540d76-7256-43ce-b5d9-4b2edf3d339f(en-us,Expression.30).png")
, and then click Define New Sample Data.In the Define New Sample Data dialog box, you can change the default name for the data set, and select the part of your project to which you want the data made available.
Select the Enable sample data when application is running box.
Tip
The Enable sample data when application is running box lets your project display the sample data when you run your application. When the box is not selected, Microsoft Expression Blend will display the sample data only on the artboard.
For more information, see Make your application display sample data when it runs.
Click OK.
A sample data source that includes a collection
.png "Ee341396.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(en-us,Expression.30).png")
of properties (string .png "Ee341396.0baebca0-a722-4aa2-ad58-a96325a0536d(en-us,Expression.30).png")
and Boolean .png "Ee341396.b09651ed-c8ae-4f66-b10c-d8478c5337c7(en-us,Expression.30).png")
) is created..png "Ee341396.496d7ebc-fe46-42f6-95a8-57b0e5be5d49(en-us,Expression.30).png")
To fully explore the features of sample data and the DataGrid control, add an image property to the collection.
Next to Collection
, click Add simple property .png "Ee341396.203a14a5-0db2-486e-9b94-4fdf658d531b(en-us,Expression.30).png")
to add a new property to the collection.Tip
You can click the drop-down arrow next to the Add simple property button
to select different types of properties to add: simple, complex, and collection.Next to the new property (Property4), click Change property type
.png "Ee341396.c4968582-0dae-407e-961b-80ffa2838f3b(en-us,Expression.30).png")
. In the editor that appears, click the drop-down arrow next to Type, and then click Image.Click anywhere outside the editor to close it.
The icon next to Property4 updates to identify it as an image
.png "Ee341396.675c8aad-5da1-4df3-8a7a-b26418c4e8cf(en-us,Expression.30).png")
property.
You now have a sample data collection ready to display in a DataGrid control.
For information about modifying sample data and adding more data properties, see Modify sample data.
To populate a DataGrid control
There are multiple ways to bind data to a control on the artboard. The following procedure shows you the fastest way when you are using a DataGrid control.
For other options, see Bind an object to data.
In the Tools panel, click Assets
.png "Ee341396.0d8b8d29-1af9-418f-8741-be3097d76eab(en-us,Expression.30).png")
.Tip
Alternatively, you can display the Assets panel in a docked panel by clicking Assets on the Window menu.
In the Assets panel, expand Controls, click All, and then click the DataGrid
.png "Ee341396.55bfb0df-05d2-4b58-8312-24a3aed103e3(en-us,Expression.30).png")
control.The button underneath Assets
in the Tools panel displays the icon for the DataGrid control and is selected.Using your mouse, draw a large DataGrid object on the artboard in your main document.
In the Data panel, drag your sample data collection (
Collection) onto the new data grid object.The data grid displays the collection in the sample data source, converting image properties to image objects, and converting Boolean properties to check boxes.
Press F5 to run your application.
If you are using the sample data from the previous procedure, and you enabled the sample data when testing your application, you should see the following:
.png "Ee341396.c5466ecc-fe83-4d23-96c0-ca058daa29d0(en-us,Expression.30).png")
Tip
To update a DataGrid object on the artboard after modifying the sample data that it displays, you can drag individual data properties onto the control to add new columns, or you can drag the entire collection again. In the Objects and Timeline panel, you can expand the Columns node of the DataGrid object to delete and reorder the columns.
To change column labels in a DataGrid control
When you drag a collection of data onto a data grid control, the column labels are set by the names of the properties. However, you can change the column labels after you populate the data grid control.
In the Objects and Timeline panel, expand the [DataGrid] object to reveal the column objects.
Select the first column object ([DataGridTemplateColumn] "Property1"). In the Properties panel, next to the Header property, type a descriptive name, such as "Description," and then press ENTER.
Select the other two column objects and change their names.
Press F5 to run your application.
If you are using the sample data from the previous procedure, and you enabled the sample data when testing your application, you should see something similar to the following:
.png "Ee341396.749194f0-94df-4ceb-bdcb-30b35c6ae56b(en-us,Expression.30).png")
Change the appearance of the DataGrid control
You can change the appearance of controls by modifying their properties or by modifying the templates that are used to style them. You can modify the overall template, an empty row template, and the templates applied to individual cells, header templates, and others.
For more information, see Create or modify a template.
To change the appearance of column headers
In the Objects and Timeline panel or on the artboard, right-click the DataGrid object, point to Edit Additional Templates, point to Edit ColumnHeaderStyle, and then click Edit a Copy.
.png "Ee341396.976995f7-d28e-4af7-8bba-4b1555eaff54(en-us,Expression.30).png")
In the Create Style Resource dialog box, click OK.
Expression Blend enters template-editing mode. The breadcrumb bar at the top of the artboard shows that you are editing a template inside the DataGrid object.
In the Objects and Timeline panel, add other objects to the template, or modify the properties of existing objects in the Properties panel. For example, in the [Grid] object, there is a path named SortIcon that represents an icon for a sort button. You could change this to an image or modify the path. The sort button appears when you run your application and click a column header.
Tip
Some properties might show a yellow bounding box to indicate that they are bound to data or bound to properties of the control that uses the template (template binding).
For more information about template binding, see Styling a control that supports templates.
To change the appearance of cells that contain images
On the artboard, right-click a cell in the data grid object that is displaying an image, point to Edit Column Templates, point to Edit CellTemplate, and then click Edit Current.
In the Objects and Timeline panel, add other objects to the [StackPanel] layout container (such as a copyright symbol), or select the [Image] object and modify its properties in the Properties panel.
The changes that you make will affect all the cells that contain images.
To change the colors of alternating rows
In the Objects and Timeline panel, select the [DataGrid] object.
In the Properties panel, under Rows, click inside the rectangle next to the AlternatingRowBackground property.
A brush editor appears.
Select a type of brush by clicking one of the tabs at the top of the color editor. If you use the existing brush (Solid color brush
.png "Ee341396.b62aabb4-fad4-4a9b-a84c-16c98012cf27(en-us,Expression.30).png")
) and change the color, make sure to increase the Alpha property so that the color is not transparent.You can change the colors of the other rows by modifying the RowBackground property.
For more information about modifying brushes, see Setting colors, brushes, and masks.