GridViewDataColumn Background with color enumeration and selected row

[Jon]

Was trying to do a quick spike that changed the Background of the grid and in haste I used a named color instead of the hex value

<telerik:GridViewDataColumn Background="Black" IsReadOnly="True"
DataType="{x:Null}" HeaderText="Company Name" UniqueName="CompanyName" />

instead of

 

<telerik:GridViewDataColumn Background="#10000000" IsReadOnly="True"
DataType="{x:Null}" HeaderText="Company Name" UniqueName="CompanyName" />

and the selected row was no longer visible.  Finding the hex value for Black is not difficult, so if you bump into this issue that is the workaround.  It seems the issue is related to the Alpha portion of the color.  The named colors have alpha set to Opaque, so you must set the alpha channel to something less than FF.  I'm currently using E5 (90%) which makes a very faint highlight.

 

 

[Hristo Deshev]

Hi Jon,

That's a cool technique to achieve a highlight effect for the cells in a column. Thanks for sharing it!

All the best,
Hristo Deshev
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Jon]

I borrowed the code from the C# Examples and modified it to show the issue as well as another problem I'll address in a separate posting.  Notice that the selected row is visible using ColorThree and ColorFour, but not visible using ColorOne and ColorTwo.  The only difference is the alpha channel of Three and Four are 50.  Wouldn't it be better if the GridViewDataColumn modified the Named Color to the alpha modified version by default?

<Window x:Class="ThemeIssue.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
    xmlns:GridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    Title="Dynamic Resource Troubles">
<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Margin="5"
                    Orientation="Horizontal"
                    Background="{DynamicResource ColorOne}"
                    HorizontalAlignment="Center">
            <TextBlock Name="TextBlock1"
                       Margin="5"
                       VerticalAlignment="Center"
                       Background="{DynamicResource ColorTwo}"
                       Foreground="{DynamicResource ColorOne}" />
            <Button Content="Light" Click="butLight_Click" Margin="5"/>
            <Button Content="Dark" Click="butDark_Click" Margin="5"/>
        </StackPanel>

        <telerik:RadGridView Name="RadGridView1" DataLoadMode="Asynchronous" Grid.Row="1" ColumnsWidthMode="Auto"
                   IsReadOnly="True" AutoGenerateColumns="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn
                    HeaderText="ID"
                    Background="{DynamicResource ColorTwo}"
                    DataMemberPath="ID" />
                <telerik:GridViewDataColumn
                    Width="*"
                    HeaderText="Name"
                    Background="{DynamicResource ColorOne}"
                    DataMemberPath="Name" />
                <telerik:GridViewDataColumn
                    DataFormatString="{}{0:c2}"
                    HeaderText="UnitPrice"
                    Background="{DynamicResource ColorThree}"
                    DataMemberPath="UnitPrice" />
                <telerik:GridViewDataColumn
                    DataFormatString="{}{0:d}"
                    HeaderText="Date"
                    Background="{DynamicResource ColorFour}"
                    DataMemberPath="Date" />
                <telerik:GridViewDataColumn HeaderText="Discontinued" DataMemberPath="Discontinued">
                    <telerik:GridViewDataColumn.CellStyle>
                        <Style TargetType="GridView:GridViewCell">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="GridView:GridViewCell">
                                        <Border BorderThickness="{TemplateBinding BorderThickness}"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            Background="{TemplateBinding Background}">
                                            <CheckBox HorizontalAlignment="Center" VerticalAlignment="Center"
                                                  IsChecked="{Binding Discontinued}" IsEnabled="False" />
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </telerik:GridViewDataColumn.CellStyle>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Windows;
using System.Windows.Media;

namespace ThemeIssue
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1
    {
        private DateTime start;
        private ResourceDictionary lightColors = new ResourceDictionary();
        private ResourceDictionary darkColors = new ResourceDictionary();

        public Window1()
        {
            CreateResourceDictionaries();
            Resources.MergedDictionaries.Add(lightColors);

            InitializeComponent();

            start = DateTime.Now;

            Loaded += Example_Loaded;

            RadGridView1.DataLoaded += RadGridView1_DataLoaded;
            RadGridView1.SortDescriptions.PropertyChanged += ResetTime;
            RadGridView1.GroupDescriptions.PropertyChanged += ResetTime;
        }

        private void CreateResourceDictionaries()
        {
            var light = new SolidColorBrush(Colors.Yellow);
            var dark = new SolidColorBrush(Colors.Green);
            var lightAlpha = new SolidColorBrush(ModifyAlpha(light, 50));
            var darkAlpha = new SolidColorBrush(ModifyAlpha(dark, 50));

            lightColors.Add("ColorOne", dark);
            lightColors.Add("ColorTwo", light);
            lightColors.Add("ColorThree", darkAlpha);
            lightColors.Add("ColorFour", lightAlpha);

            darkColors.Add("ColorOne", light);
            darkColors.Add("ColorTwo", dark);
            darkColors.Add("ColorThree", lightAlpha);
            darkColors.Add("ColorFour", darkAlpha);
        }

        private Color ModifyAlpha(SolidColorBrush light, byte alpha)
        {
            Color lightlightModified = light.Color;
            lightModified.A = alpha;
            return lightModified;
        }

        private void ResetTime(object sender, PropertyChangedEventArgs e)
        {
            start = DateTime.Now;
        }

        private void Example_Loaded(object sender, RoutedEventArgs e)
        {
            RadGridView1.ItemsSource = new MyBusinessObjects().GetData(100);
        }

        private void RadGridView1_DataLoaded(object sender, EventArgs e)
        {
            RadGridView1.FilterDescription.PropertyChanged += FilterDescription_PropertyChanged;
            TextBlock1.Text = String.Format("Total time to load data: {0} ms",
                                            Math.Round((DateTime.Now - start).TotalMilliseconds));
        }

        private void FilterDescription_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            RadGridView1.FilterDescription.PropertyChanged -= FilterDescription_PropertyChanged;
            ResetTime(sender, e);
        }

        private void butLight_Click(object sender, RoutedEventArgs e)
        {
            Resources.MergedDictionaries.Clear();
            Resources.MergedDictionaries.Add(lightColors);
        }

        private void butDark_Click(object sender, RoutedEventArgs e)
        {
            Resources.MergedDictionaries.Clear();
            Resources.MergedDictionaries.Add(darkColors);
        }
    }

    public class MyBusinessObjects
    {
        private string[] names = new string[]
                                     {
                                         "Côte de Blaye", "Boston Crab Meat",
                                         "Singaporean Hokkien Fried Mee", "Gula Malacca", "Rogede sild",
                                         "Spegesild", "Zaanse koeken", "Chocolade", "Maxilaku", "Valkoinen suklaa"
                                     };

        private double[] prizes = new double[]
                                      {
                                          23.2500, 9.0000, 45.6000, 32.0000,
                                          14.0000, 19.0000, 263.5000, 18.4000, 3.0000, 14.0000
                                      };

        private DateTime[] dates = new DateTime[]
                                       {
                                           new DateTime(2007, 5, 10), new DateTime(2008, 9, 13),
                                           new DateTime(2008, 2, 22), new DateTime(2009, 1, 2),
                                           new DateTime(2007, 4, 13),
                                           new DateTime(2008, 5, 12), new DateTime(2008, 1, 19),
                                           new DateTime(2008, 8, 26),
                                           new DateTime(2008, 7, 31), new DateTime(2007, 7, 16)
                                       };

        private bool[] bools = new bool[] {true, false, true, false, true, false, true, false, true, false};

        public IEnumerable<MyBusinessObject> GetData(int maxItems)
        {
            var rnd = new Random();

            return from i in Enumerable.Range(0, maxItems)
                   select new MyBusinessObject(i, names[rnd.Next(9)], prizes[rnd.Next(9)],
                                               dates[rnd.Next(9)], bools[rnd.Next(9)]);
        }

        public class MyBusinessObject
        {
            private int id;
            private string name;
            private double unitPrice;
            private DateTime date;
            private bool discontinued;

            public MyBusinessObject(int ID, string Name, double UnitPrice, DateTime Date,
                                    bool Discontinued)
            {
                this.ID = ID;
                this.Name = Name;
                this.UnitPrice = UnitPrice;
                this.Date = Date;
                this.Discontinued = Discontinued;
            }

            public int ID
            {
                get { return id; }
                set { id = value; }
            }

            public string Name
            {
                get { return name; }
                set { name = value; }
            }

            public double UnitPrice
            {
                get { return unitPrice; }
                set { unitPrice = value; }
            }

            public DateTime Date
            {
                get { return date; }
                set { date = value; }
            }

            public bool Discontinued
            {
                get { return discontinued; }
                set { discontinued = value; }
            }
        }
    }
}

[Kalin Milanov]

Hi Jon Masters,

We are aware that the grid does not show MouseOver and Selection states when you set the Background of the DataColumn to a non-transparent color. 

Following your suggestion (and sample code) I am sending you a slight modification which will let you set a NamedColor and apply a transparency to it. Here it is:

XAML

<telerik:GridViewDataColumn x:Name="Col1"
                    HeaderText="ID"
                    Background="Red"
                    DataMemberPath="ID" />

C#    

Brush MyColor = Col1.Background;
Col1.Background = new SolidColorBrush(ModifyAlpha((SolidColorBrush)MyColor, 50));

As for your suggestion: We would like to provide customization options and let you set opaque colors to the columns without losing the MouseOver and Selected states. We are keeping high hopes that this feature will be available in one of our upcoming releases. 

Thank you for your suggestion and your interest in our controls.

Kind regards,
Kalin Milanov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Gert]

Hi and thanks for this gread solution! It solves my problem.

On my attached pic you can see that I lost als behaviors on column 2 and partly on col 3,4.

On the other cols I did the hack with the alpa chanel. 

So after about 10 years is there an easier way to get this behavior?

[Gert]

[quote]Gert said:

Hi and thanks for this gread solution! It solves my problem.

On my attached pic you can see that I lost als behaviors on column 2 and partly on col 3,4.

On the other cols I did the hack with the alpa chanel. 

So after about 10 years is there an easier way to get this behavior?

[/quote]

[Dinko | Tech Support Engineer]

Hello Gert,

Thank you for the attached image.

I have double check this behavior on my side using the latest version of our controls. Can you specify which version are you referencing in your project? If it is not the latest one can you try it and let me know if this behavior occurs on your side.

Regards,
Dinko
Progress Telerik

[Gert]

We are using 2018.2.515.45.

I hope you did not missunderstood my first post..!? The alpha-hack works well on all column! 

That I also tried before on column 2,3,4 was like this:

 

<Window.Resources>
 <Style x:Key="MyCellStyle" TargetType="telerik:GridViewCell">
    <Setter Property="Background" Value="Red"/>
 </Style>
</Window.Resources>

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" CellStyle="{StaticResource MyCellStyle}"/>

[Dinko | Tech Support Engineer]

Hello Gert,

Thank you for the additional details. I now understand what you mean. This behavior comes from the fact that setting the Background property of the cell will set the Background property of the Border element on top of the cell. This Border is on top of the selection row Border. At this moment I can't suggest you different workaround from the one which you are currently using.

Regards,
Dinko
Progress Telerik