Step 3 Customize the grid
Change the Row Count field to 25, and the data grid will automatically expand to include the additional data.
You may notice that the data in the grid is compressed together, making it difficult to read. This can be fixed by changing the DefaultColumnWidth property of the data grid. Set the property to 120, then you’ll be able to read the data in the grid.
Now, what if you didn’t want all of the columns in the data source to be displayed as part of the data grid? Change the default column minimum width back to 0, so that you can see all the columns. Then, disable the AutoGenerateColumns property. The data preview will be removed, since no columns have been selected.
The Columns panel on the left side of the configurator displays a list of the available columns that you can add to the data grid. Click the plus icon next to the columns that you want to be displayed. For our example, enable these columns:
- FirstName (String)
- LastName (String)
- JobTitle (String)
- Salary (Double)
Notice that the columns are added to the preview, and that the column width is automatically set based on the fields. You can also manipulate how the columns are displayed in our grid using the properties of the columns. Select FirstName (String) in the list of available columns. In the column properties, change the HeaderText property to only “First”. This changes the display name of the column without modifying the data source. Change the width of the column to 75, and disable Is Star Sized.
Repeat these steps for the LastName column, so that it is only displayed as "Last."
Next, you’ll move on to the Salary column. Notice that the sample data varies on how the data is being displayed. Change the Numeric Sample Data values and set the Minimum and Maximum Values. Set the Minimum Value to 50000 and the Maximum Value to 500000.
That fixes some of how the data is displayed, but you’ll still want to make it look like you’re representing money. First, set the FormatString property to Currency. You can also make other display changes to the column. Here are the settings used in the example:
- TextColor: Black
- Background: Green
- Header FontSize: 18
- Header TextColor: Black
- Header FontAttributes: Bold
The Control Configurator also lets you easily change how the data is visually represented in the data grid. By default, the configurator will set the columns based on the data type that is in the column. For example, the FirstName column is a string, so it is represented as a Text column. If you wanted to change how a column is represented, simply select the column and use the Type configurator in the ribbon to select another data type.
After you’ve configured our data the way that you want, click the Data Grid tab of the configurator, and then click Apply & Close.
After you format the code, all the properties that you defined in the configurator have been generated for you in the XAML code.
Now you can run the app and see that the data grid is designed exactly how you configured it using the control configurator.