HeaderCellStyle in Metro +BorderThickness

[Andreas]

Hi Guys!

As I decided to switch to the Metro Theme I wanted to change the HeaderCellStyle of the RadGridView and now I struggle with the following problem:
I want a border with thickness 1 around each header cell. Therefore I adapted the style but to my confusion it seems
that the border is not constant as declared. Some cells have a thicker right (or left) border than other cells.
I tried to modify the ControlTemplate as well and figured out that there is only one border (x:name=GridViewHeaderCell) who seems to cause this problem.

This is my custom style (in addition to the style declared in the metro theme):

<Style TargetType="telerik:GridViewHeaderCell">
        <Setter Property="Foreground" Value="{StaticResource MainBrush}" />
        <Setter Property="Background" Value="{StaticResource AccentBrush}" />
        <Setter Property="BorderBrush" Value="{StaticResource StrongBrush}"/>
        <Setter Property="BorderThickness" Value="1,1,1,1"/>
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="FontWeight" Value="Bold" />
</Style>
Is there a way to fix this problem?

Thanks in advance,
Andi

P.S.: Attached you can find a screenshot describing this problem. (I removed everything from the ControlTemplate except that border)

[Vanya Pavlova]

Hello,

 

If you want to remove the Border around a single GridViewHeaderCell you may do this through defining a simple style targeted at GridViewHeaderCell and reset its BorderThickness from there:

<UserControl.Resources>



    <Style x:Key="ss" TargetType="telerik:GridViewHeaderCell" telerik:StyleManager.BasedOn="Metro">

        <Setter Property="BorderThickness" Value="0,0,0,0"/>

        </Style>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">

        <telerik:RadGridView CanUserFreezeColumns="False" AutoGenerateColumns="False" telerik:StyleManager.Theme="Metro" ItemsSource="{Binding Collection}">

            <telerik:RadGridView.Columns>

                <telerik:GridViewDataColumn HeaderCellStyle="{StaticResource ss}" DataMemberBinding="{Binding Property1}"/>

                    <telerik:GridViewDataColumn HeaderCellStyle="{StaticResource ss}" DataMemberBinding="{Binding Property1}"/>

                        <telerik:GridViewDataColumn HeaderCellStyle="{StaticResource ss}" DataMemberBinding="{Binding Property1}"/>

                            <telerik:GridViewDataColumn HeaderCellStyle="{StaticResource ss}" DataMemberBinding="{Binding Property1}"/>

                                <telerik:GridViewDataColumn HeaderCellStyle="{StaticResource ss}" DataMemberBinding="{Binding Property1}"/>

                </telerik:RadGridView.Columns>

            </telerik:RadGridView>

    </Grid>

</UserControl>

Then you may see the result at the attached picture. However there is a 1px blue Border to the left of these cells. Actually this is the indicator of GridViewHeaderRow and you may reset its BorderThickness through predefining the template of GridViewHeaderRow against Metro theme. 
Can you clarify how this works for you?

All the best,
Vanya Pavlova
the Telerik team

[Andreas]

My problem is that I want to have a constant border of 1 px on each side of the cell.
Unfortunately this is not the case if I declare the BorderThickness = 1 in the HeaderCellStyle.
There is a border but it is sometimes 1px and sometimes more?! (see my screenshot attached to my first post)

I actually use MetroTheme in general (through the telerik StyleManager)....
I tried to change the BorderThickness of the HeaderRowStyle to 0 but it doesn't change anything.

Andi

[Vanya Pavlova]

Hello,

 
You should keep in mind that the styles used in our themes are theme specific. Actually you are defining a style against the default Office_Black theme, not Metro. By that reason you get the inner Border elements and the result is the same as shown at the attached picture. The key part here is that you have to mark your style based on Metro:

<Style x:Key="ss" TargetType="telerik:GridViewHeaderCell" telerik:StyleManager.BasedOn="Metro">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="Red"/>
</Style>

 

Then the changes will be handled correspondingly against Metro theme, not the default one.
Please check the attached project for further reference. 

All the best,
Vanya Pavlova
the Telerik team

[Andreas]

Thank you for the hint that the style has to be based on metro.
It seems that this solved my problem!

Andi