I have spent several days trying to find a way to change the colour of individual cells based on their value and/or the values of other data elsewhere in the grid.  However, although there seems to be a lot of questions on the forums by users, the answers aren't really conclusive.  I have read and contributed to several topics:

• http://xceed.com/CS/forums/thread/23506.aspx
• http://xceed.com/CS/forums/thread/23509.aspx
• http://xceed.com/CS/forums/thread/17155.aspx
• http://xceed.com/CS/forums/thread/19595.aspx

There is also a related article here which seemed to have some clues with some comments from our very own Jenny: http://ajhorus.wordpress.com/2007/11/22/xceed-datagrid-custom-cell-styling/

However, I am still having difficulties.  There does not seem to be any clear information or documentation or examples on how to achieve this.  I have put together a small sample application (attached) that demonstrates four methods - one is reminiscent of the above wordpress.com article, the other three are invoked by buttons on the form.  Although the method from the wordpress.com article works, this is not ideal because it uses some DataRow event in a spurious manner and is not suitable if I wish to programmatically go through the DataRows and DataCells later on to modify the colours again.

Could I please have assistance on this as I have been racking my brain for days over this?

Many thanks,

Jason

---

Associate, .NET Development
Morgan Stanley, UK

The best way to change the background of one or more cells is through an implicit style. It is NOT recommended to set local values on containers (e.g., DataRow and DataCell) since these are recycled and have a "limited" lifespan. That said, here is an example, which I will explain below:

<Style TargetType="{x:Type xcdg:DataCell}">

    <Style.Triggers>

        <MultiDataTrigger>

            <MultiDataTrigger.Conditions>

                <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=FieldName}"

                           Value="ShipCountry" />

                <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=Content}"

                           Value="Canada" />

                <Condition Binding="{Binding Path=ShipVia}"

                           Value="1" />

            </MultiDataTrigger.Conditions>

            <Setter Property="Background"

                    Value="DeepPink" />

        </MultiDataTrigger>

    </Style.Triggers>

</Style> 

In this style I want to set the background of some of the cells in the ShipCountry column to DeepPink (only color that will work ) only if the content contains "Canada" and if the value of the ShipVia field is 1. To accomplish this, I use a MultiDataTrigger with 3 conditions: the first one to check the FieldName of the cell, the second to check its Content, and the third to check the value of the ShipVia field on the underlying data item, which just happens to be the cell's DataContext, hence the "Path=ShipVia" binding. Only when all three conditions are met will the background of the cell by changed to a lovely shade of pink.

 Hope this clears things up! If not, let me know

---

Senior Technical Writer
- Xceed Software

In three words I can sum up everything I've learned about life: it goes on.

On another note, support has indicated to me that you are a Vanguard subscriber, in which case you should be sending your questions to the priority email to ensure that you get a quicker answer.

---

Senior Technical Writer
- Xceed Software

In three words I can sum up everything I've learned about life: it goes on.

Hi Jenny,

Thanks for the assistance with this.  And yes, I agree, this seems a much better way to set the DataCell values rather than programmatically setting their local values for the reasons you said.

However, the reason I wanted to do it programmatically is because I want to set the colours of cells based on values of cells in other rows.  In particular, I want to set the Background of a cell to a different colour if the equivalent cell (same field) in the previous row is different.  In fact, I want to do this by grouping as well!

In the example attached (a modified version of the example I attached to a previous post), the DataRow_SizeChanged event handler (registered in the Page constructor) programmatically changes the Background of each cell if the same-column cell in the previous row (Index minus one) has a different value.  Could the same effect be achieved in XAML using Style Triggers and Setters?

And if I do end up having to do this programmatically rather than through XAML, there must be a better way of getting at the DataRow than having to catch the SizeChanged event?  And remember, I need to do this by Group as well, which will be set up programmatically through the DataGridControl.Items.GroupDescriptions property beforehand.

If all else, fails, I can always change the structure of the source data (a DataTable) to include an extra field with the value in each row for this field containing an array of fields (or field names) for that row that contain different values to the equivalent fields in the previous row.  If I did it that way, would I be able to use the Condition Binding that you suggested in XAML to see if the field (name) is contained within field containing the array of field (names) using a converter or something?  E.g.:

<Condition Binding="{Binding Path=ChangedFields, Converter={StaticResource fieldNamesConverter}}" Value="True" />

I look forward to any help you can give.

Many thanks,

Jason

---

Associate, .NET Development
Morgan Stanley, UK

Hi Jason, Jenny

I am currently trying to achieve something similar to what Jason is doing.

However I seemed to have a problem maintaining the colors set when the column is sorted. And this problem can also be seen in Jason's example.

Jason - in ur example, when u attempt to sort the first column, the background color set to the cell disappears and after 3 clicks, it comes back again.

Is this a bug or am i missing something?

Cheerios,

Serene

If you have a cell selected, it doesn't show its background colour, it appears white.  It could be this.  Try clicking another cell before and after each click to check the colour of the cell when unselected.

Also, it could be due to the issue Jenny described about cells being recycled.  And bear in mind, DataRow_SizeChanged is executed each time you sort the column and doesn't use the unsorted list.

However, this doesn't happen for me with the latest example project I posted (my last post).

Cheers,

Jason

---

Associate, .NET Development
Morgan Stanley, UK

Hi all,

I've run into the same problem as well. I need to change the background colour of a cell depending on the value in the preceeding row cell. I wrote a MultiValueConverter to set this initially but as soon as there are a large number of rows user scrolling loses the "formating" (and in fact every cell gets the alternative background if you continue dragging the scrollbar up and down). I also tried other whacky ideas like hooking into Cell.Loaded for when cells come back into view but I had little joy with reliably achieving the desired result.

Jason: Thanks for your sample. It was good to try alternative approaches but I still find the same issues with large volumes of data.

Xceed: I understand the comments made on the issue of cell recycling, but are you in a position to state either way if what we desire is actually possible (we're using the pro edition)?

Hi again,

This may or may not be relevant to what other users are trying to do but I found everything worked fine for me when I disabled UI virtualisation.

<Style TargetType="xcdg:TableViewScrollViewer">
    <Setter Property="CanContentScroll" Value="False" />
</Style>

On the datagrid itself set ItemScrollingBehavior="Immediate"

and on the table view I set

<xcdg:TableView
IsColumnVirtualizationEnabled="False"
...
/>

Trevor, could you elaborate on that please?  Which method of changing cell colours row to row based on previous row values are you talking about?

Xceed: Any chance of some further support on this following on from my reply to Jenny's earlier post?

Thanks,

Jason

---

Associate, .NET Development
Morgan Stanley, UK

Hi Jason,

In all cases I found that when I injected large volumes of data the cell recycling caused the formatting to be lost and sometimes the value edited "appeared" in a different cell. Continually scrolling the cells up and down in the grid caused all cells to be eventually painted with the alternative cell colour I was using to highlight value changes.

In my case I have a grid with hundreds or products and a column with a price for each week of the year (before anyone gets excited it's what the client wants :-) ) Prices tend to be stable but when a value does change they want a different cell background colour to highlight the change. When the grid is reloaded this conditional formatting must also be preserved to visually highlight the price changes over time.

I found that disabling virtualisation allowed the formatting to be applied correctly when the grid loaded, was continually scrolled, and cells values edited, but I took a bit hit with load times.  To compensate for this I'm working on introducing the DataGridVirtualizingCollectionView to fetch the data asynchronously. Unfortunately I've run into another issue http://xceed.com/CS/forums/thread/24232.aspx  I was hoping someone from Xceed might comment on the issue as I'm really only asking if it's a bug.

Regards,

Trev

Hi Trevor,

Thanks very much for your reply and putting into context your particular problem.  What I meant by elaborate was more, which method in my example project were you talking about disabling data virtualisation, because I noted that you said in an earlier message that you'd tried my alternative approaches as per the example project I attached in my earlier post?

Would you possibly be able to attached a modified version of my example project with the virtualisation disabled so I can see how you've done it, then perhaps we can both work synchronously on the problem of load times being high?

Thanks,

Jason

---

Associate, .NET Development
Morgan Stanley, UK

Hi Jason,

What follows is your Page1.xaml with UI virtualisation disabled (no code changes necessary). There are three changes highlighted for your attention as "For Jason". I hope this helps.

<Page x:Class="WpfPropertyDetail.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:local="clr-namespace:WpfPropertyDetail"
    Title="Test Project">
    <StackPanel>
        <StackPanel.Resources>
            <xcdg:DataGridCollectionViewSource x:Key="mySource"
                                               Source="{Binding RelativeSource={RelativeSource AncestorType={x:Type Page}}, Path=MyDataList}">
            </xcdg:DataGridCollectionViewSource>
        </StackPanel.Resources>

        <!-- For Jason - set ItemScrollingBehavior="Immediate"
            can be "Deferred" but Xceed docs recommend "Immediate" when UI virtualsation is disabled -->
        <xcdg:DataGridControl
            Name="dgcMyData"
            ItemsSource="{Binding Source={StaticResource mySource}}"
            ItemScrollingBehavior="Immediate"
            >
            <xcdg:DataGridControl.Resources>

                <!-- For Jason - disable UI virtualisation -->
                <Style TargetType="xcdg:TableViewScrollViewer">
                    <Setter Property="CanContentScroll" Value="False" />
                </Style>

                <Style TargetType="{x:Type xcdg:DataCell}">
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=FieldName}"
                                           Value="MyProp2" />
                                <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=Content}"
                                           Value="Val4" />
                                <Condition Binding="{Binding Path=MyProp1}"
                                           Value="Val3" />
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Background" Value="DeepPink" />
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </xcdg:DataGridControl.Resources>

            <xcdg:DataGridControl.Columns>
                <xcdg:Column FieldName="MyProp1" />
                <xcdg:Column FieldName="MyProp2" />
            </xcdg:DataGridControl.Columns>

            <!-- For Jason - some properties depend on your licence key so I'm only showing one table view property here -->
            <xcdg:DataGridControl.View>
                <xcdg:TableView
                    IsColumnVirtualizationEnabled="False"/>
            </xcdg:DataGridControl.View>
           
        </xcdg:DataGridControl>

        <Button Click="btnMethod1_Click">Method 1</Button>
        <Button Click="btnMethod2_Click">Method 2</Button>
        <Button Click="btnMethod3_Click">Method 3</Button>
    </StackPanel>
</Page>

And following on from the above, my solution to the issue was slightly different to those explored in your samples.

Here's the Xaml for my DataCell (still a work in progress as I revise the HighlightSeriesChangeConverter - a hang over from my first attempts).

So bascially how it works is that HighlightSeriesChangeConverter is called when the grid is "loading". It doesn't seem to be called at any other time so I added a DataTrigger on the cell tag for when a value is edited - the tag is set to True when cell validation is complete and the data is valid (e.g. a price can't be less than zero). None of this seems particuallary elegant but it works. :-)

<Style TargetType="{x:Type xcdg:DataCell}">
    <Setter Property="Background">
        <Setter.Value>
            <MultiBinding Converter="{StaticResource HighlightSeriesChangeConverter}">
                <Binding Mode="OneWay" RelativeSource="{RelativeSource Self}" />
                <Binding Mode="OneWay" RelativeSource="{RelativeSource Self}" Path="DataContext" />
            </MultiBinding>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" Value="True">
            <Setter Property="Background" Value="{StaticResource UserEditedCellBrush}"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

HighlightSeriesChangeConverter really just looks at the current index position and compares the value in the cell to the previous cell (there's more logic than this to handle the start position, data type under review etc. but this is basically all that it does)

int currentIndex = cell.ParentColumn.Index;
// validation ....... and then ....
if ((decimal)dataRow[currentIndex - 1] != (decimal)dataRow[currentIndex]) {
    cell.Background = _cellBrush;
}
return cell.Background;

CellValidationRule - key parts for when the user edits a value

decimal price = 0;
if (!decimal.TryParse(value.ToString(), out price) || price < 0) {
    return new System.Windows.Controls.ValidationResult(false, AssemblyResources.ValueLessThanZeroMessage);
}
// set the tag to trigger a cell background colour change
context.Cell.Tag = true;
// value entered is valid
return new System.Windows.Controls.ValidationResult(true, null);

Hi Trevor, Thanks for the code.  I've tried to work that into my sample project but not having much luck at the moment.  It's complaining about a missing resource UserEditedCellBrush.  Any idea what that could be?

I've attached my attempt at using your code so far.  I don't think I need to use cell validation as I'm not allowing the user to modify the grid in my application.

Thanks,

Jason

---

Associate, .NET Development
Morgan Stanley, UK

Hi Jason,

Sorry for not being more clear last time around.  The first post was demonstrating how to disable UI virtualisation in your sample. The second post was just to provide a brief overview of how I solved my own particular flavour of the problem in the project I was working on.

I've updated your sample with how you might consider using my approach. In this case the converter is working directly with the cell content as there is now no cell recycling (my underlying data source was a data table so I worked with the data row values) .

This sample just highlights changes in the series where the value of a cell is not the same as the value of the preceeding cell in the row.  You could of course interogate other properties of the cell (such as its DataContext) to evaluate more complex conditions.

Trevor