Click here to Skip to main content
11,929,971 members (59,144 online)
Click here to Skip to main content
Add your own
alternative version


11 bookmarked

Changing the background color for one or more columns in a Silverlight DataGrid

, 2 Jan 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Column.BackgroundColor = "Yellow"? I wish.


This is something you would think would be pretty simple, but it isn't, unless I'm missing something. I thought I'd write a little step by step of how I arrived at the solution I came up with in case I took a more difficult path than I needed to and someone can point out where I took a wrong turn.


Here is the basic XAML for a DataGrid and what it looks like in the browser. You have sorting, validation, and two way binding, which is pretty nice:



The dilemma

All this works fine and until someone says they want the first two columns read-only and they want the third column with a yellow background so the user can easily tell which columns are editable. "No problem" you say, whereupon you become perplexed at the curious lack of a Background or a BackgroundColor property in the text column:


You, being an industrious person not easily discouraged by such trifles, decide to turn to the templated cell to gain more control over what is going on, making a template for the read only view (a TextBlock) and for the edit mode (a TextBox). The TextBox does have a Background property, sweet success! But the TextBlock doesn't have a Background property, crushing defeat. To add insult to injury, now sorting and validation don't work either. But, we do have a different background color in edit mode, so that is progress of a sort.



Utilizing your finely honed Google-Fu, you correct the two issues just created, with the following:


And then, if the TextBlock doesn't have a Background property, let's just throw something behind it that does, like a Border, and we should be all done, right?



Well, that's pretty close, but now, as we mouse over the rows, we don't see the nice highlight effect that was there, and it just, generally, doesn't look that great. It would be nice if we could still have the nice UI cues that were there in the first place, but just, well, with a different background color. At this point, you may start pondering a dive into the visual state manager and animations, but as you watch everyone else leaving the office, you start wondering why you've been spending all day messing with the background color of a column.

Ignoring this irrelevant piece of information, you sense inspiration, and think, "Ah! if the background were only partially visible, the existing animation might be more visible, and no additional work would be needed!"


Which is kinda true... Except now, the font is slightly transparent as well, and no amount of font bolding or manual setting of opacity seems to help:



Cursing the stars and heavens while simultaneously pounding your keyboard with your elbows, you accidentally stumble into this, which does work! Eureka, you have done it!



Except... You feel kind of dirty because in order to change the *&#$^*&^$% background color, you have exploded one line of XAML into 15, which seems excessive. Furthermore, there is great redundancy in the name of the column, the background color used, and you are going to have to copy and paste this multiple times for multiple columns. You briefly consider using a style, but that will only get you so far since you'd still have to specify the two templates for each column using this method.

A voice in the back of your head is telling you to set fire to this DataGrid and look into vendor grids, but no, you won't be undone by these minor issues.. You will find a way to beat this issue into submission. Shortly before running out of curse words and keyboards, you arrive at the final solution which looks and acts exactly like how you would expect it to:



public class DataGridTextColumnExtended : DataGridTemplateColumn
    public string Background { get; set; }

    public string BindingProperty
            if (value == null)
                throw new ArgumentNullException("BindingProperty");

            //otherwise sort won't work on template column
            base.SortMemberPath = value.ToString();

            CellTemplate = (DataTemplate)XamlReader.Load(@"
             <Border Background='" + Background + @"' Opacity='.5' />
             <TextBlock Text='{Binding Path=" + value + @"}' Margin='4' />

            CellEditingTemplate = (DataTemplate)XamlReader.Load(@"
             <TextBox Background='" + Background + @"' Text='{Binding 
             NotifyOnValidationError=True, ValidatesOnExceptions=True, 
             Path=" + value + @", Mode=TwoWay}' />

            _BindingProperty = value;

           return _BindingProperty;
    private string _BindingProperty = null;


Points of Interest

No actual keyboards or desks were harmed in the making of this article.

Also, if you have a cleaner way of creating the custom column with the code being in a separate XAML file instead of C# (while keeping the usage XAML the same), I'd love to hear about it.


  • 2-Jan-2010 - Initial version.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Paul B.
United States United States
I've been a software developer since 1996 and have enjoyed C# since 2003. I have a Bachelor's degree in Computer Science and for some reason, a Master's degree in Business Administration. I currently do software development contracting/consulting.

You may also be interested in...

Comments and Discussions

GeneralExtraordinarily funny... Pin
Drazen Dotlic3-Nov-14 0:30
memberDrazen Dotlic3-Nov-14 0:30 
BugLittle bug on the DataGridTextColumnExtended class in the article Pin
diego mesa tabares22-Aug-13 12:59
memberdiego mesa tabares22-Aug-13 12:59 
QuestionGreat article! Pin
belikemike12127-Feb-12 13:44
memberbelikemike12127-Feb-12 13:44 
QuestionHaving a problem with highlighting a cell when mouse over Pin
andrey_Itra27-Sep-11 4:57
memberandrey_Itra27-Sep-11 4:57 
GeneralAmusing article... Pin
Andrew Rissing6-Jan-10 5:10
memberAndrew Rissing6-Jan-10 5:10 
GeneralNice example of extending a class Pin
kelly3175-Jan-10 7:04
memberkelly3175-Jan-10 7:04 
I have struggled with missing attributes like this before. Thanks for sharing the frustrating process as well as a solution.

"You will never be ready to be married until you are ready to never be married."

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151126.1 | Last Updated 3 Jan 2010
Article Copyright 2010 by Paul B.
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid