[Solved] How to style RadGridView row style (and others)?

[Debbie]

Hi there

I've got a RadGridView, with a RowStyle generated by going to Object > Edit other Styles > Edit Rowstyle > Edit a Copy..
I've modified it in Blend by manually changing the XAML values of backgrounds etc... in the actual Style definition, but these don't visually change in Blend.
Then, if I manually change the background colour of the PART_IndicatorPresenter you can see this colour coming through in Blend, but when I run it, it still looks exactly like the default control (grey with orange mouseovers). What am I missing?

Here is my ugly XAML:

<UserControl.Resources>
        <DesignTimeData:ListGridData x:Key="ListGridDataDS" d:IsDataSource="True"/>

        <Color x:Key="GridViewRowMouseOverColorStop1">#FF81D821</Color>
        <Color x:Key="GridViewRowMouseOverColorStop2">#FF58AF17</Color>
        <LinearGradientBrush x:Key="GridViewRowHoveredBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="{StaticResource GridViewRowMouseOverColorStop1}" Offset="1"/>
            <GradientStop Color="#FF58AF17" Offset="0"/>
        </LinearGradientBrush>
        <Color x:Key="GridViewElementSelectedColorStop2">#FF3DF3DA</Color>
        <Color x:Key="GridViewElementSelectedColorStop1">#FF18C4AC</Color>
        <LinearGradientBrush x:Key="GridViewRowSelectedBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="{StaticResource GridViewElementSelectedColorStop2}" Offset="1"/>
            <GradientStop Color="#FFC7F9F2" Offset="0"/>
        </LinearGradientBrush>
        <ControlTemplate x:Key="GridViewRowTemplate" TargetType="telerikGridViewControls:GridViewRow">
            <Grid x:Name="grid">
                <vsm:VisualStateManager.VisualStateGroups>
                    <vsm:VisualStateGroup x:Name="FocusStates">
                        <vsm:VisualState x:Name="Unfocused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NavigatorIndicator" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="Focused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NavigatorIndicator" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                    </vsm:VisualStateGroup>
                    <vsm:VisualStateGroup x:Name="SelectionStates">
                        <vsm:VisualState x:Name="Unselected"/>
                    </vsm:VisualStateGroup>
                    <vsm:VisualStateGroup x:Name="CommonStates">
                        <vsm:VisualState x:Name="Normal"/>
                        <vsm:VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridViewRowHoveredBackground}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="Selected">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridViewRowSelectedBackground}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                    </vsm:VisualStateGroup>
                    <vsm:VisualStateGroup x:Name="ValueStates">
                        <vsm:VisualState x:Name="Valid">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InvalidBorder" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="Invalid">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InvalidBorder" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                    </vsm:VisualStateGroup>
                </vsm:VisualStateManager.VisualStateGroups>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Border Margin="{TemplateBinding Margin}" MinHeight="{TemplateBinding MinHeight}" x:Name="SelectionBackground" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Column="2"/>
                <telerikGridViewControls:IndicatorPresenter x:Name="PART_IndicatorPresenter" Visibility="{TemplateBinding RowIndicatorVisibility}" Background="#FF3193F5" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,0,1,1" Grid.Column="0">
                    <Path Height="8" Margin="7,0,0,0" x:Name="NavigatorIndicator" Width="5" Visibility="Collapsed" Data="M254.5,183.75 L254.5,193.33333 260.75,188.16682 z" Fill="#FF000000" Stretch="Fill"/>
                </telerikGridViewControls:IndicatorPresenter>
                <telerikGridViewControls:IndentPresenter x:Name="PART_IndentPresenter" Background="{TemplateBinding Background}" Grid.Column="1" IndentLevel="{TemplateBinding IndentLevel}" />
                <telerikGridViewControls:DataCellsPresenter Height="Auto" MinHeight="{TemplateBinding MinHeight}" x:Name="PART_DataCellsPresenter" Background="#FFF79797" Grid.Column="2"/>
                <Rectangle Height="Auto" Margin="0" x:Name="InvalidBorder" Width="Auto" Visibility="Collapsed" Grid.Column="0" Grid.ColumnSpan="3" Stroke="Red" StrokeThickness="2"/>
            </Grid>
        </ControlTemplate>
        <Style x:Key="GridViewRowStyle1" TargetType="telerikGridViewControls:GridViewRow">
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Template" Value="{StaticResource GridViewRowTemplate}"/>
            <Setter Property="Background" Value="#FF6EF3EE"/>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <SolidColorBrush Color="#FFF98C17"/>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderThickness" Value="3"/>
            <Setter Property="MinHeight" Value="24"/>
            <Setter Property="FontSize" Value="11"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Foreground" Value="#FF000000"/>
        </Style>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <telerikGridView:RadGridView ShowColumnHeaders="True" AutoGenerateColumns="True" CanUserResizeColumns="False" CanUserReorderColumns="False" IsFilteringAllowed="False" ShowGroupPanel="False" ItemsSource="{Binding Mode=OneWay, Path=GridData, Source={StaticResource ListGridDataDS}}" RowIndicatorVisibility="Collapsed" AlternateRowStyle="{StaticResource GridViewRowStyle1}" RowStyle="{StaticResource GridViewRowStyle1}" >
            <telerikGridView:RadGridView.RowAppearance>
                <telerikGridView:RowAppearanceSettings UseAlternateRowStyle="False"/>
            </telerikGridView:RadGridView.RowAppearance>
        </telerikGridView:RadGridView>
    </Grid>
</UserControl>

[Kalin Milanov]

Hi Debbie,

When you use Object > Edit other Styles > Edit Rowstyle > Edit a Copy... you are actually getting the style of the GridViewRow which also includes its Template (the ugly XAML). 

The next step you need to do is to tell Blend to edit the row template. You can do that by:

Object > Edit Control Parts (Template) > Edit Template

Note that you do not need to make a copy os the template because you already have the style.

From there you can edit the colors and the borders of various row elements to match your case. 

The same is valid for all the styles you can find in Edit Other Styles submenu. 

I hope this works.

Kind regards,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Debbie]

Hi Kalin

Believe me, we've tried this route! But when we run it in Blend, it STILL defaults to the grey and orange colours, even though we have changed as many colours as possible in Blend.
Also the HeaderRow doesn't seem to look any different in Blend or when running it, even though we've changed the colours. If I try to edit the HeaderRowStyle (Object > Edit Other Styles > Edit HeaderRowStyle), "Edit Style" is disabled, but if I check "Apply Resource" my "GridViewHEaderRowStyle1" is checked!?

It seems as though the header style is somehow not being connected to the control properly - could there be something missing like the RadTab's HeaderTemplate not being connected because of the missing ContentTemplate="{TemplateBinding HeaderTemplate}" ?
Or are we just missing some XAML / templates somewhere?!

All we want is a simple GridView with a header style, one row style, and a few row states. Any chance you could send us a skeleton sample project which we can easily style in Blend?

Thanks!

[Kalin Milanov]

Hello Debbie,

I am sending you a sample of restyled RadGridView. Everything you see is done entirely in Blend 2.

I hope it can give you some pointers to that needs to be done in order to change colors of Rows, Cells, Header Cells and working with the Visual States. 

On another note I will be making a series of articles on how to style RadGridView in Blend (hopeully the first one should arrive tomorrow), which will give you even more insight on working with RadControls in Blend.

Keep me posted about your progress.

Regards,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Debbie]

Hi Kalin

Thanks for the time and effort to help me! I'm having a look at your code now and I see that you have static DataColumns in your GridView, each with a HeaderCellStyle. My GridView is going to be bound to a datasource so I don't have access to the individual columns to specify a specific style per cell; rather I'd like to apply a HeaderRowStyle to the GridView which should take care of the header row. If I try simulate this in your example by removing the 

HeaderCellStyle

 

="{StaticResource GridViewHeaderCellStyle}"

 

from a/some columns, and then apply 

HeaderRowStyle

 

="{StaticResource GridViewHeaderRowStyle}"

 

to the GridView itself, the HeaderRowStyle seems to do nothing.

How can I easily style a simple HeaderRow with a databound GridView? Or how can I specify the HeaderCellStyle with a databound GridView?

Thanks!
Debbie

[Kalin Milanov]

Hello Debbie,

I am sending you an example with HeaderCell style applied when you dynamically generate columns. 

As for the HeaderRow we have discovered a bug when applying style (be it in XAML or in code) and we will be addressing this bug promptly. Right now your only option to style the header row is by editing RadGridView template as shown in the previous example I have sent you. 

Please keep me updated on your progress.

All the best,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Debbie]

Hi there

Still trying to finish our RadGridView styling! We're 98% there and all that is outstanding is the GridViewHeaderSplitter style. I used Silverlight Spy to peek into the XAML of the RadGridView header cells, and I see the GridViewCellsPanel is made up of alternating HeaderCells and HeaderSplitters. The problem is that in all my styles and template, there doesn't seem to be an existing template for the GridViewCellsPanel and so I can't get inside to the GridViewHeaderSplitter. All I want to do is change the colour of the splitter!!!

Please help ASAP - today is my second last day!
Thanks,
Debbie

[Kalin Milanov]

Hi Debbie,

Currently there is no way to restyle the HeaderSplitter in XAML. Howerver you can do that in code.

void RadGridView1_RowLoaded(object sender, RowLoadedEventArgs e)
{
    if (!(e.Row is GridViewHeaderRow))
        return;

    foreach (GridViewHeaderSplitter splitter in e.Row.ChildrenOfType<GridViewHeaderSplitter>())
    {
        splitter.ChildrenOfType<Rectangle>()[1].Fill = new SolidColorBrush(Colors.Transparent);
    }
}

All you need to do is change the highlighted color with the one you want or with Transparent if you do not want to see it.

Keep me posted with your progress.

All the best,
Kalin Milanov
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.

[James]

Hi Kalin,

Is the GridViewHeaderSplitter likely to be styleable from Xaml in future?

In the mean time I can use code, as in your example :)

Cheers,

James.

[Kalin Milanov]

Hello James,

Yes. It is on our list of styling improvements and we are most hopeful we can deliver on that for Q3 which will be somewhere in the first half of November. I hope the wait will not be too exhaustive.

Best wishes,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Celeste]

Hi!

I am changing headercell style of all columns. It is defined in a theme, because I want, it applies to all headercells.
So I have the next code:

<Style TargetType="Telerik_Windows_Controls_GridView:GridViewHeaderCell">
        <Setter Property="Template" Value="{StaticResource GridViewHeaderCellTemplate}"/>
        <Setter Property="Background" Value="{StaticResource CBSHeaderCellBackground}"/>
        <Setter Property="BorderThickness" Value="0,0,0,1"/>
        <Setter Property="Foreground" Value="{StaticResource CBSHeaderCellForeground}"/>
        <Setter Property="FontFamily" Value="Fonts/Fonts.zip#Tahoma"/>
        <Setter Property="FontSize" Value="25"/>
        <Setter Property="FontWeight" Value="Light"/>
</Style>

I put FontSize=25 to prove that it doesn´t apply style. To all resources I have defined in this xaml it´s working well, except for headercell, why it can be?

Thanks.

Celeste.

[Kalin Milanov]

Hello Celeste,

Attached I am sending you a sample (which uses Q2.SP1 binaries) and uses the HeaderCellStyle property of the column to set the font size of the cell to 24 and it works fine for me.

Could you please send me a sample which demonstrates the problem. On another note I notice you are using Q1.SP1 binaries. Are you developing a Silverlight 2 application?

Kind regards,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.