Download Sample Project (205.84 kb)
In the last article How to use DataGrid in Silverlight I showed you a very simple use of DataGrid control in Silverlight applications. In that sample I used AutogenerateColumns peoperty of the control to let it generate all the columns. But in real life applications you want to have better control on what columns should be displayed and how they should be rendered. In this article I will show how you can hand pick the columns that you want to to displayed.
For this example I decided that I only want to show 4 columns corresponding to ProductID,Name,Size and ListPrice data of Products. First thing to do was set AutogenerateColumns property of DataGrid to false or remove it from XAML. There are following pre-defined column types that you can add.
- DataGridTextColumn
- DataGridCheckBoxColumn
Both of these are derived from DataGridBoundColumn which is abstract column type that can be bound to any property of your data source. For custom rendering of column, you can use DataGridTemplateColumn and then specify template that should be used to display this column.
For this example, I used DataGRidTextColumn type to display all 4 fields of the data. There is one more thing that I wanted to do. I want to change background color of row based on List Price of product. To customize renderinf of each row i added handler for LoadingRow event of DataGrid that get fired when each row is bebing loaded. XAML for this example look as follows.
<data:DataGrid x:Name="AdventureWorks_Grid" AutoGenerateColumns="False" Height="200" Grid.Column="0" Grid.Row="2" GridLinesVisibility="Horizontal" LoadingRow="AdventureWorks_Grid_LoadingRow"> <data:DataGrid.Columns> <data:DataGridTextColumn Binding="{Binding ProductID}" Header="ID" /> <data:DataGridTextColumn Binding="{Binding Name}" Header="Name" /> <data:DataGridTextColumn Binding="{Binding ListPrice}" Header="List Price" /> <data:DataGridTextColumn Binding="{Binding Size}" Header="Size" /> </data:DataGrid.Columns></data:DataGrid>
Customizing Rendering Of DataGrid Row
In event handler for LoadingRow event, I access Product object associated with that row throw DataContext property of Row object passed in DataGridRowEventArgs parameter of event handler. The following code snippet shows how Background of each row is changed based on ListPrice of product.
private void AdventureWorks_Grid_LoadingRow(object sender, DataGridRowEventArgs e){ Product prod = e.Row.DataContext as Product; if (prod.ListPrice > 500) { e.Row.Background = new SolidColorBrush(Color.FromArgb(255, 100, 100, 100)); } else { e.Row.Background = new SolidColorBrush(Color.FromArgb(255, 200, 200, 200)); }}
I had to set Background of each row the way it should be displayed. If you don't do that, then when you scroll the items up and down you will notice that each row starts using the color you set for condition of ListPrice > 500.
Subscribe