Telerik Forums / UI for Silverlight Forum / GridView /

Removing all borders from the grid header

Telerik UI for Silverlight
Resources Buy Try

4 posts, 0 answers

Jonathan

15 posts

Member since:
Dec 2014
Posted 16 Apr 2015 Link to this post

Hi,

I'm trying to remove all borders from my GridView, but I'm having issues with the header. Please see the attached image to understand the problem.

I have set the HeaderInnerBorder and HeaderOuterBorder to White. I also added the following to my RadGridView:

<telerik:RadGridView.HeaderRowStyle>

    <Style TargetType="telerik:GridViewHeaderRow">

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

        <Setter Property="BorderBrush" Value="White" />

    </Style>

</telerik:RadGridView.HeaderRowStyle>

I can't figure it out. Any ideas?

Thanks,
Jonathan

headerborder.png
Vanya Pavlova
Admin

2019 posts

Posted 16 Apr 2015 Link to this post

Hi Jonathan,

As a rule of thumb, inner broders of all elements could be modified via predefining the template of GridViewHeaderRow. The black border could come from a non-resolved resource in case you have already predefined the template of this element.

Can you verify this one?

Regards,
Vanya Pavlova
Telerik

See What's Next in App Development. Register for TelerikNEXT.
Jonathan

15 posts

Member since:
Dec 2014

Posted 16 Apr 2015 in reply to Vanya Pavlova Link to this post

Hi Vanya,

I'm not really sure what you mean. Would it help if I posted my style markup? Here it is anyway.

<UserControl.Resources>

    <SolidColorBrush x:Key="GridView_HeaderInnerBorder" Color="White"/>

    <SolidColorBrush x:Key="GridView_HeaderOuterBorder_Over" Color="White"/>

    <SolidColorBrush x:Key="GridView_HeaderInnerBorder_Over" Color="White"/>

    <SolidColorBrush x:Key="GridView_HeaderBackground_Over" Color="#FF84902f"/>

    <SolidColorBrush x:Key="GridView_HeaderOuterBorder_Selected" Color="White"/>

    <SolidColorBrush x:Key="GridView_HeaderInnerBorder_Selected" Color="White"/>

    <SolidColorBrush x:Key="GridView_HeaderBackground_Selected" Color="#FFb7c555"/>

    <Style x:Key="StretchedContentControl" TargetType="ContentControl">

        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

        <Setter Property="VerticalContentAlignment" Value="Stretch"/>

    </Style>

    <SolidColorBrush x:Key="GridView_SortIndicatorColor" Color="White"/>

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

    <Style x:Key="ColumnHeaderGripperStyle" TargetType="Thumb">

        <Setter Property="Width" Value="8"/>

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

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

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

        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

        <Setter Property="VerticalContentAlignment" Value="Stretch"/>

        <Setter Property="Padding" Value="0"/>

        <Setter Property="Cursor" Value="SizeWE"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="Thumb">

                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <SolidColorBrush x:Key="GridView_HeaderForeground_Selected" Color="White"/>

    <ControlTemplate x:Key="GridViewHeaderCellTemplate" TargetType="telerik:GridViewHeaderCell">

        <Grid x:Name="PART_HeaderCellGrid">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="Auto"/>

            </Grid.ColumnDefinitions>

            <VisualStateManager.VisualStateGroups>

                <VisualStateGroup x:Name="CommonStates">

                    <VisualStateGroup.Transitions>

                        <VisualTransition GeneratedDuration="00:00:00.2000000" To="Normal"/>

                        <VisualTransition GeneratedDuration="00:00:00.2000000" To="MouseOver"/>

                    </VisualStateGroup.Transitions>

                    <VisualState x:Name="Normal"/>

                    <VisualState x:Name="MouseOver">

                        <Storyboard>

                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">

                                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1"/>

                            </DoubleAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">

                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                    <VisualState x:Name="Ascending">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">

                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator">

                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected">

                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                    <VisualState x:Name="Descending">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">

                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator">

                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform" Storyboard.TargetName="PART_SortIndicator">

                                <DiscreteObjectKeyFrame KeyTime="0:0:0">

                                    <DiscreteObjectKeyFrame.Value>

                                        <ScaleTransform ScaleY="1" ScaleX="1"/>

                                    </DiscreteObjectKeyFrame.Value>

                                </DiscreteObjectKeyFrame>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected">

                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                </VisualStateGroup>

            </VisualStateManager.VisualStateGroups>

            <Border x:Name="GridViewHeaderCell" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="2">

                <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder}" Background="{TemplateBinding Background}"/>

            </Border>

            <Border x:Name="GridViewHeaderCell_Over" BorderBrush="{StaticResource GridView_HeaderOuterBorder_Over}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">

                <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder_Over}" BorderThickness="0" Background="{StaticResource GridView_HeaderBackground_Over}"/>

            </Border>

            <Border x:Name="GridViewHeaderCell_Selected" BorderBrush="{StaticResource GridView_HeaderOuterBorder_Selected}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">

                <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder_Selected}" BorderThickness="0" Background="{StaticResource GridView_HeaderBackground_Selected}"/>

            </Border>

            <ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="{TemplateBinding IsTabStop}" Margin="{TemplateBinding Padding}" Style="{StaticResource StretchedContentControl}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

            <Path x:Name="PART_SortIndicator" Grid.ColumnSpan="2" Data="M0,0 L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0 z" Fill="{StaticResource GridView_SortIndicatorColor}" HorizontalAlignment="Center" Height="3" Margin="0,3,0,0" Opacity="0" RenderTransformOrigin=".5,.5" Stretch="Fill" VerticalAlignment="Top" Width="5">

                <Path.RenderTransform>

                    <TransformGroup>

                        <ScaleTransform ScaleY="-1" ScaleX="1"/>

                        <SkewTransform AngleY="0" AngleX="0"/>

                        <RotateTransform Angle="0"/>

                        <TranslateTransform X="0" Y="0"/>

                    </TransformGroup>

                </Path.RenderTransform>

            </Path>

            <telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" Margin="0,0,8,0" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{TemplateBinding FilteringUIVisibility}"/>

            <Thumb x:Name="PART_LeftHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Left" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource ColumnHeaderGripperStyle}"/>

            <Thumb x:Name="PART_RightHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Right" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource ColumnHeaderGripperStyle}"/>

        </Grid>

    </ControlTemplate>

    <SolidColorBrush x:Key="GridView_HeaderBackground" Color="White"/>

    <SolidColorBrush x:Key="GridView_HeaderOuterBorder" Color="White"/>

    <SolidColorBrush x:Key="GridView_HeaderForeground" Color="#b7c555"/>

    <Style TargetType="telerik:GridViewHeaderCell">

        <Setter Property="Template" Value="{StaticResource GridViewHeaderCellTemplate}"/>

        <Setter Property="Background" Value="{StaticResource GridView_HeaderBackground}"/>

        <Setter Property="BorderBrush" Value="{StaticResource GridView_HeaderOuterBorder}"/>

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

        <Setter Property="VerticalContentAlignment" Value="Center"/>

        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

        <Setter Property="Padding" Value="5,0,3,0"/>

        <Setter Property="Foreground" Value="{StaticResource GridView_HeaderForeground}"/>

    </Style>

    <misc:ReportedTimeButtonStyleSelector x:Key="ReportedTimeButtonStyleSelector">

        <misc:ReportedTimeButtonStyleSelector.PartDayStyle>

            <Style TargetType="calendar:CalendarButton">

                <Setter Property="Foreground" Value="#484848" />

                <Setter Property="Background" Value="#E2EAC5" />

            </Style>

        </misc:ReportedTimeButtonStyleSelector.PartDayStyle>

        <misc:ReportedTimeButtonStyleSelector.HalfDayStyle>

            <Style TargetType="calendar:CalendarButton">

                <Setter Property="Foreground" Value="#484848" />

                <Setter Property="Background" Value="#E2EAC5" />

            </Style>

        </misc:ReportedTimeButtonStyleSelector.HalfDayStyle>

        <misc:ReportedTimeButtonStyleSelector.FullDayStyle>

            <Style TargetType="calendar:CalendarButton">

                <Setter Property="Foreground" Value="#484848" />

                <Setter Property="Background" Value="#E2EAC5" />

            </Style>

        </misc:ReportedTimeButtonStyleSelector.FullDayStyle>

        <misc:ReportedTimeButtonStyleSelector.HolidayStyle>

            <Style TargetType="calendar:CalendarButton">

                <Setter Property="Foreground" Value="#a8a8a8" />

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

            </Style>

        </misc:ReportedTimeButtonStyleSelector.HolidayStyle>

        <misc:ReportedTimeButtonStyleSelector.DefaultStyle>

            <Style TargetType="calendar:CalendarButton">

                <Setter Property="Foreground" Value="#484848" />

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

            </Style>

        </misc:ReportedTimeButtonStyleSelector.DefaultStyle>

    </misc:ReportedTimeButtonStyleSelector>



    <Style TargetType="telerik:RadGridView">

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

    </Style>

    <Style TargetType="telerik:GridViewFooterCell">

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

    </Style>



    <Style TargetType="telerik:GridViewHeaderRow">

        <Setter Property="BorderThickness" Value="1,2,3,4" />

    </Style>

</UserControl.Resources>
Vanya Pavlova
Admin

2019 posts

Posted 16 Apr 2015 Link to this post

Hi Jonathan,

I've checked your mark-up and the behavior you get is expected. You should predefine the template of GridViewHeaderRow and remove the inner borders from there.
Hope this helps.

Regards,
Vanya Pavlova
Telerik

See What's Next in App Development. Register for TelerikNEXT.

Removing all borders from the grid header

Jonathan

Vanya Pavlova

Jonathan

Vanya Pavlova