Hi,
We are using XAMGrid and we want to change background color of some of grid rows as per some conditions. Suppose I have three Column Name, Dob, Address. Now I will compare DOB with current date If It will be greater than 18 years In this scenario this particular row background color will be change in Yellow Color. If It will be less than 15 Years In this scenario this particular row background color will be change in Yellow Color.
Please let us aware. How we can approach it. and here We are using XAMGRID.
Thanks
Hello Pri kanwar,
In order to do this in the XamGrid, I would recommend creating a Style for CellControl and populating the Style.Triggers collection with a DataTrigger. The data context of the CellControl elements in a particular XamGrid will be the underlying data item that makes up the Row that the cell sits in, and so you could bind directly to your Dob property.
I imagine your Dob property is a DateTime type, and so I would then recommend a converter for this binding that determines whether or not the Dob property represents a time that is either greater than 18 years or less than 15 years away. You can then return a value to your DataTrigger that tells it whether or not to apply a particular setter, in this case, for the Background property of your CellControl objects.
I have attached a sample project that demonstrates this approach, in which a row will be colored yellow if the date of birth was over 25 years away. The data source is randomly generated to subtract a random number of years between 1 and 50 for each record.
I hope this helps you. Please let me know if you have any other questions or concerns on this matter.
Sincerely,AndrewAssociate Developer
Thanks you so much for your wonderful support. As per your suggestion and sample source I have added trigger and converter and background color also going to change as per converter value.
But here I just wish to know If we add multiple background color according to age. suppose Age will is 10 then color will be green. If Age will is 20 then color will be yellow, If age is 30 then color will be red and so on. I am just little bit stuck how we can approach it.
<Style.Triggers> <DataTrigger Binding="{Binding ExpirationDate, Converter={StaticResource expireDateConv}}" Value="True"> <Setter Property="Background" Value="Yellow"/> </DataTrigger> </Style.Triggers>
In above style background color already set yellow as per converter True False value. How we can set more than two background values?
The converter in this case is what is returning the values of True and False, which is checked in the DataTrigger, but the converter does not have to return a bool type. You can return essentially anything, and as long as the return type is in a format that can be checked by the DataTrigger, you can have as many conditions as you would like.
For example, rather than returning "True" for Age 20, you could return "20" from the converter. At that point, your DataTrigger would look like:
<DataTrigger Binding="{Binding ExpirationDate, Converter={StaticResource expireDateConv}}" Value="20"> <Setter Property="Background" Value="Yellow"/></DataTrigger>
Please let me know if you have any other questions or concerns on this matter.
Thanks for your reply, But I am already aware about converter that can pass multiple value or any kind of values. But only just wish to know how we can set multiple colors with different values.
Above style will change Row color Yellow, If value will be 20. If I get value 30 then background color should be Green or If I get value 40 then background color should be Red. Should I add multiple data trigger with multiple values for that like below. Or something else ?
<DataTrigger Binding="{Binding ExpirationDate, Converter={StaticResource expireDateConv}}" Value="30"> <Setter Property="Background" Value="Green"/></DataTrigger>
<DataTrigger Binding="{Binding ExpirationDate, Converter={StaticResource expireDateConv}}" Value="40"> <Setter Property="Background" Value="Red"/></DataTrigger>
The XamGrid has a property named IsAlternateRowsEnabled which applies a separate color to odd-indexed rows in the grid, and in this case will ignore your Style for CellControl. This property defaults to "True," and so the alternate rows are enabled at the start, which is why you are seeing the behavior you are seeing. If you set this to false, the CellControl style behavior that you are applying should be consistent across all rows in your grid.
In the case that you do not want to disable alternate row styling in the grid, you will need to pull in the default style for CellControl and modify it. This style can be found in the generic.xaml file commonly found at the following directory:
C:\Program Files (x86)\Infragistics\<your version here>\WPF\DefaultStyles\XamGrid
After including it, I would recommend commenting out the two VisualStates for MouseOver and Alternate, as these will apply the alternate styling. After doing that, you should locate a Rectangle named "AltMouseOver." This Rectangle is the alternatively colored row, and I would recommend setting its Fill property to {StaticResource CellItemAltNormalBackgroundBrush}, as this is the normal fill for the alternate rows, and that resource is necessary to pull in from the generic.xaml file for this default style to take effect. Finally, I would recommend adding your DataTriggers to the ControlTemplate.Triggers collection so that you can target both the Background property and the Fill property of the "AltMouseOver" Rectangle with your setters. This trigger would look like the following:
<DataTrigger Binding="{Binding Birthday, Converter={StaticResource conv}}" Value="True"> <Setter Property="Background" Value="Yellow"/> <Setter TargetName="AltMouseOver" Property="Fill" Value="Yellow"/></DataTrigger>
I have attached a modified version of the original sample project I had sent you to demonstrate the default style procedure mentioned above. In the sample, the default style exists in the App.xaml file.
Thanks for your support. We have added multiple DataTrigger like below.
<DataTrigger Binding="{Binding ExpirationDate, Converter={StaticResource expireDateConv}}" Value="10"> <Setter Property="Background" Value="Yellow"/> </DataTrigger>
<DataTrigger Binding="{Binding ExpirationDate, Converter={StaticResource expireDateConv}}" Value="20"><Setter Property="Background" Value="Red"/></DataTrigger>
But after applying this style grid is changing alternate color. If one row get value 10 It will not change the color, but the next row get value 10 will change in yellow color.
Please guide us where we are going to wrong.
Yes, you should add multiple DataTriggers with multiple values like you had explained above. If one DataTrigger fails, it will move to the next until it finds one that has a correct value. If none of the values are correct, the default behavior will continue.