GridViewDataColumn Background and Themes

[Jon]

I borrowed the code from the C# Examples and modified it to show the issue as well as another problem I've addressed in a separate posting.  Notice that changing the resource dictionary that is merged using the buttons at the top does not effect the display of the gridview as expected.  The other elements on the page do change, and if the alternate dictionary is loaded at the start it changes, but the buttons do not effect the grid.  What gives?

<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]

Hello Jon Masters,

Following your post we have discovered that there is a bug in setting the background of more than once. We will be addressing this issue in one of our upcoming releases. 

Thank you for helping us make our controls better.

All the best,
Kalin Milanov
the Telerik team

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

[Jon]

The wierd thing I noticed is that it gets the references to the resources before the control is even loaded.  If I set the default merge dictionary in the app.xaml, and then before i load the form with the grid on it, I clear the merge dictionaries and load a different one, it will still show the grid colors from the default.  It is almost like the controls are being pre-loaded at application start.

Re: our upcoming releases

When abouts will this happen? I'd really like to provide theme support in the application and right now that seems to be a non-starter with this flaw?

[Kalin Milanov]

Hello Jon Masters,

I apologize for the late response. We have been working on providing a permanent solution to the bug I mentioned in my previous reply. Currently we are hoping to ship the fix for that bug in Q1 SP1. In case we are unable to do so we will be fixing that for Q2.

We realize that this is an important feature for you. Therefore we can also send you a build once we have that bug fixed.

Thank you for your understanding.

Regards,
Kalin Milanov
the Telerik team

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

[Jon]

I saw the SP1 is coming out very soon.  Is the fix for this going to be within?

[Hristo Deshev]

Hi Jon Masters,

Sorry for the long delay. This took longer to investigate, and we still haven't quite figured this out.

The background-related bug got addressed for SP1. The DynamicReference issue, however, persists. I've spent some time researching the problem and here's what I found out:

• Background values do get fetched from the resources the first time the control loads.
• Cell backgrounds change after manually setting the column background with code.
• Changing the resources does not propagate the change back to the column background sets.
• Binding the column backgrounds and changing the source correctly propagates the new value to cells.

I suspect this has something to do with resource value propagation over the logical tree, and we will have to spend more time investigating why that does not work.

Until we find and eliminate the cause of the problem you can use bindings as a workaround. If you create a placeholder control that has no visual representation, you can store the theme-specific brushes in its properties and use DynamicResource expressions to get the correct values from resources:

<DynamicResourceColumnProperties:Theme x:Name="Theme"
           ColorOne="{DynamicResource ColorOne}"
           ColorTwo="{DynamicResource ColorTwo}"
           ColorThree="{DynamicResource ColorThree}"
           ColorFour="{DynamicResource ColorFour}"
           ></DynamicResourceColumnProperties:Theme>

Having that control in place will allow you to use bindings for your column backgrounds:

<telerik:GridViewDataColumn
    HeaderText="ID"
    Background="{Binding ColorTwo, ElementName=Theme}"
    DataMemberPath="ID" />
<telerik:GridViewDataColumn
    Width="*"
    HeaderText="Name"
    Background="{Binding ColorOne, ElementName=Theme}"
    DataMemberPath="Name" />
<telerik:GridViewDataColumn
    DataFormatString="{}{0:c2}"
    HeaderText="UnitPrice"
    Background="{Binding ColorThree, ElementName=Theme}"
    DataMemberPath="UnitPrice" />
<telerik:GridViewDataColumn
    DataFormatString="{}{0:d}"
    HeaderText="Date"
    Background="{Binding ColorFour, ElementName=Theme}"
    DataMemberPath="Date" />

I am attaching a test project based on the code you sent before.
Greetings,
Hristo Deshev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.