How to change color of a specific Row ?

Jun 2, 2009 at 1:48 PM

Hi guys.

Thanks for WPFToolkit, really usefull in most of my projects. Anyway I encounter au problem, everything is in the title : How can I change the color of a specific row ?

What I want to do is simple : I'd like, by using a Context Menu, to allow the user to select a color and then the Selected Row's Background in the Datagrid changes to the selected color.

Two problems :

- how to access to the selected row (and not item ...) ?

- how to change this color ?

Thank you for your help.


Jun 2, 2009 at 8:55 PM

This is not trivial due to row virtualization (actually container recycling).

To get the selected DataGridRow you can use DataGrid.ItemContainerGenerator.ContainerFromItem(SelectedItem).  Now you can set the Background property to a SolidColorBrush to change the color, but you're not done yet.  If the user scrolls the DataGrid we will recycle the row containers & random rows will have the new backround.

To deal with this you can hook DataGrid.LoadingRow and DataGrid.UnloadingRow to reset the Background poperty, but you'll have to manage the set of rows which require a special color yourself. 

Jun 3, 2009 at 2:30 PM

Thanks for your answer. It works.

Of course I have to manage this problem : when the user sorts the Datagrid oar does anything else, the background color changes back to white.

Jun 3, 2009 at 10:10 PM


I have a very similar issue.  I have DataGridTemplateColumn that contains just a ContentPresenter in the DataTemplate.  In response to an event from the UI, I am programmatically replacing the content with one of a few different visuals (a storyboard animation, an image, a border, etc).  This works fine, except when the grid is sorted (by clicking a column header) all of my visuals are lost.  Hooking up to DataGrid.LoadingRow is technically possible to recreate all of visuals based on the state of the data, but this seems horribly inefficient.

The real solution to this seems be to set the displayed visual using a DataTrigger with data binding.  Here is a simplified example of what I'm trying to do:

<dg:DataGrid x:Name="MyGrid" ... >
    ... other columns ...
    <dg:DataGridTemplateColumn Header="Sent" Width="Auto" >
                <ContentPresenter Name="SentPresenter"></ContentPresenter>
                    <DataTrigger Binding="{Binding Path=ProcessingState}" Value="1">
                        <Setter TargetName="SentPresenter" Property="Content">
                                <Rectangle Width="10" Height="10" Fill="Red"></Rectangle>
                    <DataTrigger Binding="{Binding Path=ProcessingState}" Value="2">
                        <Setter TargetName="SentPresenter" Property="Content">
                                <Image Source="Images\v2_successIcon.jpg" Width="25" Height="22"></Image>
</dg:DataGrid x:Name="MyGrid">

But when I run this I get an exception like: "'System.Windows.Shapes.Rectangle' is not a valid value for 'Setter.Value'; values derived from Visual or ContentElement are not supported."

Any help would be greatly appreciated.

Jad Startin




Jun 5, 2009 at 2:54 PM

Thanks for the post.