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


Top 5 Contributors of the Month
david stephan

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
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


    
        
            
                
            
        
    


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;
            InitializeComponent();
            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)
        {
            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



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:

Responses

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