[Solved] Can't style GridViewHeaderIndentCell background

[RandomDeveloper]

Howdy folks,

Our company just purchased Telerik controls and we're in the process of replacing our Silverlight DataGrids with Telerik RadGridViews.  The problem that I'm having is with the GridViewHeaderIndentCell's background color.  I created a custom style per Telerik's documentation here: http://www.telerik.com/help/silverlight/common-styling-apperance-themes-custom-theme-project-telerik-approach.html    

I'm able to style most of the grid, but the header indent cells that appear when a column is being grouped (both in the header row and the data rows).  For the header cell, I modified the style in GridViewHeaderIndentCell.xaml as follows:

<Style TargetType="grid:GridViewHeaderIndentCell">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="grid:GridViewHeaderIndentCell">

                <Border x:Name="OuterBorder" Width="25"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        Padding="{TemplateBinding Padding}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Border x:Name="InnerBorder" BorderBrush="{StaticResource GridView_HeaderInnerBorder}" Background="Red" BorderThickness="0" />
                </Border>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="BorderBrush" Value="White" />
    <Setter Property="Background" Value="Red" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Padding" Value="0" />
</Style>

The cell still appears to be a light blue gradient color, like it was before I made the changes to the style (when I created my style, I used the xaml files from the Vista theme).

When I examine the header cell in Silverlight Spy, it's still showing that the background is a gradient brush consisting of the following colors: FFB8E5FD, FFC6EAFF, FFD8EFFC, and FFECF8FF.  I can't figure out where this brush is coming from because I set the color to Red in GridViewHeaderIndentCell.xaml.  I even did a search and replace of all #FFB8E5FD in the entire project with Red and it still shows the light blue color.  I have no idea where the grid is getting this value since it no longer appears in any of my style xaml files.

I found somebody with a similar question on this thread: http://www.telerik.com/community/forums/wpf/gridview/how-to-style-the-group-items.aspx

I downloaded the project provided by Vanya who answered the question in that thread, and it does indeed work in that project, however I noticed that the project actually a WPF project.  When I made the same changes to my Silverlight project, it does not work.

Does anybody know how I can restyle this group header cell (and the corresponding group cells in the data rows as I'm having the same problem there).  The color does indeed change when I use a built-in theme like Summer...just not with my own custom theme so I don't know what I'm doing wrong.

I don't have Expression Blend (nor do I know how to use it) so I have been editing my theme's xaml files by hand, which so far hasn't been too bad with this one exception.

Thanks.

Edited to add: I'm using the 2011.Q2 silverlight controls.

[Vanya Pavlova]

Hello Dan,

 

Indeed the approach when you create custom theme either in Silverlight is a bit different from the one in WPF.
I am attaching you a runnable project with custom theme for RadGridView/Silverlight.
May you please try with this one and let me know whether the issue still persists?


 

Regards,
Vanya Pavlova
the Telerik team

[RandomDeveloper]

The project provided by Vanya did work, but I was still unable to get it to work in my project as I couldn't see the differences between my project and the sample provided here.

I opened a ticket with Telerik yesterday and provided them with my own sample project that I couldn't get to function correctly.  I was told that the style changes I was making were correct, but I had missed one thing.  I needed to replace the following line in all of the xaml files that I had copied from the Vista theme:

<telerik:VistaTheme x:Key="Theme" />

In each xaml file, I added the following to the ResourceDictionary tag:

xmlns:myControls="clr-namespace:MyControlsNamespace"

And then replace the theme tag (see above) located in the file with the following:

<myControls:MyTheme x:Key="Theme" />

Making these changes did the trick.

The tricky part was that my original changes did work as long as my Silverlight application didn't have a reference to Telerik's Vista theme.  When that reference was removed, my changes started working.  Making the changes to the "Theme" key in each xaml file now allows me to have a reference to Telerik's Vista theme in my project now without my theme picking up bits and pieces of the Vista theme in the GridView.

Much thanks to Telerik support for helping me find that!