.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Imran Ghani
Sohaib Khalid

Home >> Articles >> WPF >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Styling WPF DataGrid

Posted By:Dhiraj Ranka       Posted Date: October 31, 2010    Points: 50    Category: WPF    URL: http://www.dotnetspark.com  

This article will guide you that how easily one can apply style to their WPF Data Grid

In this article we will see how easy it is to style WPF DataGrid

Following are some properties and values to getting started.

Property Type Values Default
AlternatingRowBackground Brush Any Brush Null
Background Brush Any Brush Theme default
ColumnHeaderHeight Double 0 to any positive double NaN
ColumnHeaderStyle Style Any Style Null
ColumnWidth DataGridLength 0 to any positive double, Auto, *, SizeToCells, SizeToHeader SizeToHeader
HeadersVisibility DataGridHeadersVisibility All, Row, Column, None All
MaxColumnWidth Double 0 to any positive double Positive Infinity
MaxRowHeight Double 0 to any positive double Positive Infinity
MinColumnWidth Double 0 to any positive double 20
MinRowHeight Double 0 to any positive double 0
RowBackground Brush Any Brush Theme default
RowDetailsVisibilityMode DataGridRowDetailsVisibilityMode Visible, VisibleWhenSelected, Collapsed VisibleWhenSelected
RowHeadersWidth Double 0 to any positive double NaN
RowHeight Double 0 to any positive double NaN
AlternationCount int 2+ coerced to 2
GridLinesVisibility DataGridGridLinesVisibility All, Horizontal, Vertical, None All
HorizontalGridLinesBrush Brush Any Brush Black(via metadata)
VerticalGridLinesBrush Brush Any Brush Black(via metadata)
ItemTemplate DataTemplate Any DataTemplate Null
RowDetailsTemplate DataTemplate Any DataTemplate Null
CellStyle Style Any Style Null
ItemContainerStyle Style Any Style Null
RowHeaderStyle Style Any Style Null
RowStyle Style Any Style Null
Style Style Any Style Null
Template ControlTemplate ControlTemplate TargetType=Datagrid Null

Though I have not used all of them, but still if someone interested in using those then is a good resource. I have taken this from Microsoft, of course!

In order to start, create a new project in Visual Studio (I am using Visual Studio 2010)

As highlighted please select .NET Framework 3.5

Once project created, then create a new folder named "Resources", in this folder we will keep our DataGrid's style .xaml file

After this step your solution explorer should look like this

Also I have changed name of  "Window1.xaml" to "WPFGrid.xaml" which you can see in above picture. You can name it as per your choice.

Note: If you changing the name of Window1.xaml then you have to make more changes in following places

1) App.xaml

2) Renamed windows .xaml file

3) Renamed windows .cs file
public partial class WPFGrid : Window - [Class name of window]

public WPFGrid() - [Default Constructor of window]

Ok, now that we have done with all small changes, its time to start actual coding

Note: Please add the reference of WPF Toolkit

App.xaml will look this


WPFGrid.xaml will look like this


WPFGrid.xaml.cs will look like this

using System.Windows;
using Microsoft.Windows.Controls.Primitives;
using System.Collections.Generic;

namespace StylingWPFGrid

    /// Interaction logic for Window1.xaml
    public partial class WPFGrid : Window
        public WPFGrid()
            DataGridRowHeader b = new DataGridRowHeader();
            b.Background = null;
            datagrid.ItemsSource = new List {
                                        new Person(){ FirstName="Dhiraj", LastName="Ranka", Age=25},
                                        new Person(){ FirstName="Sunil", LastName="Yadav", Age=25},
                                        new Person(){ FirstName="Husain", LastName="Kachwala", Age=25}

        private void btnOK_Click(object sender, RoutedEventArgs e)

    public class Person
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
If you will run this application you will see a default DataGrid with 3 rows in it as following

In order to see where all we can apply style to DataGrid then here is a visual representation of DataGrid with already applied style

In entire code one just has to add one line that is

Style="{DynamicResource DataGridDemoStyle}"
in DataGrid tag, and that's it you are done.

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend