Styling WPF datagrid

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)

New Project Wizard

New Project Wizard

Solution Explorer

Solution Explorer

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
StartupUri=”WPFGrid.xaml”

2) Renamed windows .xaml file
x:Class=”StylingWPFGrid.WPFGrid”

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

<Application x:Class="StylingWPFGrid.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="WPFGrid.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ResourcesDataGridCustomizations.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

WPFGrid.xaml will look like this

<Window x:Class="StylingWPFGrid.WPFGrid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dg="http://schemas.microsoft.com/wpf/2008/toolkit"
        Title="Styling WPF Grid" Height="400" Width="600">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        <dg:DataGrid x:Name="datagrid" AutoGenerateColumns="False"
                     SelectionUnit="FullRow" FrozenColumnCount="1"
                     SelectionMode="Extended" CanUserAddRows="False"
GridLinesVisibility="Horizontal" Margin="5,5,5,0"
                    Grid.Row="0">
            <dg:DataGrid.Columns>
                <dg:DataGridTextColumn Binding="{Binding FirstName}" Header="First Name">
                </dg:DataGridTextColumn>
                <dg:DataGridTextColumn Binding="{Binding LastName}" Header="Last Name">
                </dg:DataGridTextColumn>
                <dg:DataGridTextColumn Binding="{Binding Age}" Header="Age">
                </dg:DataGridTextColumn>
            </dg:DataGrid.Columns>
        </dg:DataGrid>

        <Button x:Name="btnOK" Content="Ok" Click="btnOK_Click" Grid.Row="1" />
    </Grid>
</Window>

WPFGrid.xaml.cs will look like this

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

namespace StylingWPFGrid

    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class WPFGrid : Window
    {
        public WPFGrid()
        {
            DataGridRowHeader b = new DataGridRowHeader();
            b.Background = null;
            InitializeComponent();
            datagrid.ItemsSource = new List<Person> {
                                        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)
        {
            this.Close();
        }
    }

    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

Default WPF Grid

Default WPF Grid

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

WPF Grid visual explained here

WPF Grid visual explained here

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.

Tagged with: ,
  • Pingback: Tweets that mention Styling WPF datagrid -- Topsy.com()

  • Thank you very much
    it’s very intresting

  • Valuable info. Lucky me I found your site by accident, I bookmarked it.

  • Wow! This site is amazing! How can I make it look this good !

  • I’ve recently started a blog, the information you provide on this site has helped me tremendously. Thank you for all of your time & work.

  • Nice post ! Thanks for, visiting this blog dude. I will message you soon! I didn’t realise that.

  • You saved my day, these datagrids are painful to style.

  • Best implementation of wpf extended datagrid can be found here WPF Extended DataGrid

    Project Description

    This is extended version of WPF toolkit DataGrid control.

    This grid has features like

    1:Column Choosers.
    2:AutoFilter Control.
    3:Export To Excel Feature.
    4:Copy Paste To Excel and Copy Paste From Excel 5:To DataGrid.
    6:Three State Sorting.
    7:Displaying Sort Order If Multiple Sort is done

  • andrea

    good.
    But, where is the core
    datagridcustomization.xaml ??????

  • Excellent day! I just want to hand over a huge thumbs
    up for the great information you might have here on this post.
    I will be coming again to your weblog for extra soon.