GridView HeaderRow Background

[Oleg]

Hi there!

I am fighting the whole day with the colors of the GridView to make it as simple as possible for design purposes. I want to have it completely transparent, only the separation line between item rows and header row should be visible/have color.

The only problem - header row (column headers) are always white in their backgrounds. I override the style for GridView, RowStyle and HeaderRowStyle - nothing helps... Need assistance :)

Thanks!

[Vlad]

Hello,

 Have you tried our Transparent theme? You can check this demo for more info:
http://demos.telerik.com/silverlight/#GridView/Theming

All the best,
Vlad
the Telerik team

[Oleg]

This almost helped me... I copied the styles and templates from the installation folder "themes" and set all brushes to "transparent" to test if it will make the grid completely blank.

I took the styles for RadGridView, GridViewRow and GridViewHeaderRow and altered these. Unfortunately the header row (ToggleButtons or whatever these are) is still black/orange. Can you tell me what element i need to override in style to achieve the full transparency?

Thx!

[Oleg]

Are these Headers ToggleButtons?

[Oleg]

Anyone? :-(

[Vlad]

Hello,

Actually my suggestion was to use directly our Transparent theme - not to copy Transparent theme style over default grid theme (Office Black). 

Regards,
Vlad
the Telerik team

[Oleg]

I did it, and the theme was not completely transparent. It was glassy and with a bit of 3D effect.

What i need is 100% transparent grid. 

I made a screenshot of what I achieved - i need only to made the headers same as rows (blank) and make some row and column lines white. 

[Vlad]

Hi,

 Can you post the code where you've applied the Transparent theme?

Best wishes,
Vlad
the Telerik team

[Oleg]

...

<UserControl.Resources>

<telerik:TransparentTheme x:Key="TransparentTheme"></telerik:TransparentTheme>

</UserControl.Resources>

...

<telerik:RadGridView telerik:StyleManager.Theme="{StaticResource TransparentTheme}"
Name="UsersDataGrid" RowIndicatorVisibility="Collapsed"
ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource AncestorType=controls:UsersList}}"
AutoGenerateColumns="False"
ColumnWidth="*"
ShowGroupPanel="False"
CanUserDeleteRows="False"
CanUserInsertRows="False"
CanUserReorderColumns="False"
CanUserResizeColumns="False"
ShowInsertRow="False"
VerticalGridLinesBrush="Transparent"
HorizontalGridLinesBrush="Transparent"
>
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn>
<telerik:GridViewDataColumn.CellStyle>
<Style TargetType="telerik:GridViewCell">
<Setter Property="Template">
<Setter.Value>
<DataTemplate>
<controls:Avatar DisplayMode="ExtraSmall" User="{Binding}" VerticalAlignment="Center"></controls:Avatar>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</telerik:GridViewDataColumn.CellStyle>
</telerik:GridViewDataColumn>
<telerik:GridViewDataColumn Header="FirstName" DataMemberBinding="{Binding FirstName}"/>
<telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}"/>
<telerik:GridViewDataColumn Header="Email" DataMemberBinding="{Binding Email}"/>
<telerik:GridViewDataColumn Header="Company" DataMemberBinding="{Binding Company}"/>
<telerik:GridViewDataColumn Header="Position" DataMemberBinding="{Binding Position}"/>
</telerik:RadGridView.Columns>
</telerik:RadGridView>

[Oleg]

With this transparent theme from telerik I get this style: (check attachment)

[Oleg]

Yay, I finally found the right point! This is what I meant:

<Style TargetType="t:GridViewHeaderCell">

<Setter Property="Background" Value="Transparent"></Setter>

</Style>

So i just overwrite the whole GridViewHeaderCell Style and Template to get what I want. 

Thx anyway!