This project is read-only.

Alternating background colors DataGrid Rows.

Oct 13, 2014 at 11:29 AM
Edited Oct 13, 2014 at 11:30 AM
Hi there,

I've been trying to alternate the background colours of the DataGrid.
I managed to do so using a converter that finds the index of each individual item in its collection(the itemssource bound collection) and returning a colour based on it's "% 2 == 0" result.
But either because the DataGrid uses it's own internal collection to sort or because the background of the rows are not being refreshed when the list gets reordered, the backgrounds get all mangled up. I.e. the row colours for each individual row stays the same but that same row is now positioned below a same coloured row.

Do you have any suggestions as to how I can accomplish this so that sorting still works?
Oct 13, 2014 at 11:56 AM
Yes, the DataGrid uses internally a ObservableCollectionView for sorting and filtering... Can you post your value converter?
Oct 13, 2014 at 12:35 PM
Here is a version of the converter, the one i use has more collections so the converter can be used for more then one collection.
public class AlternatingBackgroundConverter : DependencyObject, IValueConverter
        public ObservableCollection<Timesheet> TimeSheets
            get { return (ObservableCollection<Timesheet>)GetValue(TimeSheetsProperty); }
            set { SetValue(TimeSheetsProperty, value); }
        public static readonly DependencyProperty TimeSheetsProperty = DependencyProperty.Register("TimeSheets", typeof(ObservableCollection<Timesheet>),
                                            typeof(AlternatingBackgroundConverter), new PropertyMetadata(null));

        public SolidColorBrush EvenBrush { get; set; }
        public SolidColorBrush OddBrush { get; set; }

        public object Convert(object value, Type targetType, object parameter, string language)
            var index = 0;
            if (value is Timesheet)
                index = TimeSheets.IndexOf(value as Timesheet);
            return index % 2 == 0 ? EvenBrush : OddBrush;
To bind the background of a rowstyle I use a class to help me get the row item as the value(the item in the itemssource collection) for the converter.
The XAML for that looks like this
            <Style x:Name="AlternatingDataGridRowStyle" TargetType="ListBoxItem" BasedOn="{StaticResource StandardListBoxItemStyle}">
                <Setter Property="util:SetterValueBindingHelper.PropertyBinding">
                        <util:SetterValueBindingHelper Property="Background" Binding="{Binding Converter={StaticResource
Oct 13, 2014 at 12:39 PM
Did you try to bind TimeSheets to the Items property of the DataGrid? This is the sorted and fitered version of the list which is bound to the DataGrid
Oct 13, 2014 at 12:44 PM
I assume you mean The ItemsSource on the datagrid.

Both the converter and the datagrid are both bound to the same observablecollection. I'm going to try setting the collection as a resource on the page and bind it that way. Atm I'm binding both the converter and the datagrid to the same collection on a viewmodel.
Oct 13, 2014 at 12:45 PM
Bind ItemsSource of DataGrid to your source collection and
bind TimeSheets of your converter to Items of DataGrid
Oct 13, 2014 at 2:24 PM
so I've managed to bind the Items property of the datagrid to the converter.
I had to do so in the code behind on a loaded function for the datagrid, Do you know of a way to do this in the xaml?

I'm also wondering if there is a native way to have more then one selected item? like a SelectedItems property?
Oct 14, 2014 at 9:13 PM
Multiple selection is currently not possible... Ill think about adding this in the future... But the list of new features is long and i dont have a lot of time... Maybe you can implement it and ill integrate it?
Oct 15, 2014 at 9:51 AM
Ok, thank you. I'm going to see if I can figure this multiple selection out.
the alternating background is working perfectly now. Thanks!!
Oct 15, 2014 at 10:07 AM
The datagrid uses internally a listbox which supports multiple selected items... Ill try to implement this in the datagrid asap. I think it should not be a big effort
Oct 15, 2014 at 1:22 PM
Ok, that would be great!
Oct 18, 2014 at 5:03 PM
I've added multiple selection to the DataGrid control. Please download the current code from here:

If everything works for you, ill release a new nuget package version...
Oct 19, 2014 at 9:03 PM
NuGet version v2.3.15 with this change is now available...
Oct 20, 2014 at 12:48 PM
Thank you very much. You're doing a very good job with this toolkit!