Gridview Styling issues

[Nick Anderson]

I've searched through the forum and documentation but can't seem to find an answer to these styling issues.

1. How to style the header cell background when a column is sorted or the header cell is hovered.

2. How to style the foreground of a selected row

3. How to style the 'column freeze' bar

4. How to style the Horizontal and Vertical Scroll Bars

5. How to style the column filter indicator.

Any tips on these would be very appreciated.

[Kalin Milanov]

Hello Nick,

Basically all your styling issues require template editing.

1. The best way you can do it is to create a MultiTrigger and check for both MouseOver and SortedState. In addition it would be best if you set another Border element to accommodate for your style. The XAML will look something like:

<Border x:Name="GridViewHeaderCell_SelectedOver" Opacity="0" BorderBrush="#FFFFFDE6" BorderThickness="{TemplateBinding BorderThickness}" Background="White" />


.....


<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True" />
        <Condition Property="SortingState" Value="Ascending" />
    </MultiTrigger.Conditions>
    <Setter Property="Opacity" TargetName="GridViewHeaderCell_SelectedOver" Value=".3" />
</MultiTrigger>
<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True" />
        <Condition Property="SortingState" Value="Descending" />
    </MultiTrigger.Conditions>
    <Setter Property="Opacity" TargetName="GridViewHeaderCell_SelectedOver" Value=".3" />
</MultiTrigger>

2. When styling the selected row you will need to change the Foreground property when IsSelected is true. Unfortunately there is a bug preventing this from working properly and we will be addressing this one for the future. Otherwise the XAML will look something like:

<Trigger Property="IsSelected" Value="True">
    <Setter Property="Opacity" TargetName="BackgroundRectangle" Value="1"/>
    <Setter Property="Foreground" Value="Red" />
</Trigger>

3. You will need to edit the DataCellsPresenter and change the template of GridViewFrozenColumnsSplitter.

<Style TargetType="{x:Type telerik:FrozenColumnsSplitter}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:FrozenColumnsSplitter}">
                <StackPanel Width="6" Opacity="1" Orientation="Horizontal">
                    <Border HorizontalAlignment="Left" Width="1" Background="White"/>
                    <Border HorizontalAlignment="Left" Width="1" Background="#FF0D00FF"/>
                    <Border HorizontalAlignment="Left" Width="1" Background="#7F0D00FF"/>
                    <Border HorizontalAlignment="Left" Width="1" Background="#3E0D00FF"/>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="IsTabStop" Value="False"/>
</Style>

4. As the scroll viewer and the scroll bars are relatively complex controls I would advise you to use Blend, drop a GridViewScrollViewer control on the design surface and move to editing only the styles for the ScrollBars. Once you are done you can apply the style implicitly.

5. Unfortunately at this point changing the filtering indicator is not possible. Once again this is on the todo list I mentioned above.

I hope this will give enough insight for a successful RadGridView styling.

Last I am attaching the sample application from which the XAML above was take


Greetings,
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.