GridViewHeaderCell Border not visible/unstable

[Hardik]

Hi All,

I am having a grid view, whose style I've customized. I have added border of 1px to the cell (so that it matches with the rows in the GridView). The border is visible when there are less no of columns.
The problem is when there are many columns, the border of 1px is not visible. However when I try resizing a particular column that time the border becomes visible.
If I increase the border from 1px to 2px, on resizing it keeps toggling the border (thick and thin).
I want the border to be always visible and of the same width during resizing.

I have given a width of " * " (star) to all the columns which I have used.

Kindly help me out.

Thanks and Regards,
Hardik

[Hardik]

Hii,
I am attaching my XAML style.. Kindly check and let me know, whether I am doing the right thing or not..Try adding around 10-12 columns and Then try resizing the column.

<!--  telerik:GridViewHeaderCell Common Style START  -->
    <SolidColorBrush x:Key="GridView_HeaderInnerBorder" Color="#FFCFCFCF"/>
    <SolidColorBrush x:Key="GridView_HeaderOuterBorder_Over" Color="White"/>
    <SolidColorBrush x:Key="GridView_HeaderInnerBorder_Over" Color="White"/>
    <LinearGradientBrush x:Key="GridView_HeaderBackground_Over" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF2f343e" Offset="1"/>
        <GradientStop Color="#FF627189"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="GridView_HeaderOuterBorder_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="White" Offset="0"/>
        <GradientStop Color="White" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="GridView_HeaderInnerBorder_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFB69A78"/>
        <GradientStop Color="#FFFFE17A" Offset="0.126"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="GridView_HeaderBackground_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#4f535e" Offset="1"/>
        <GradientStop Color="#acb8d3"/>
    </LinearGradientBrush>
    <Style x:Key="StretchedContentControl" TargetType="ContentControl">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    </Style>
    <SolidColorBrush x:Key="GridView_SortIndicatorColor" Color="Black"/>
    <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}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2">
                <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder}" BorderThickness="0,0,1,0" 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,0,1,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,0,1,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>
    <LinearGradientBrush x:Key="GridView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#49505c" Offset="1"/>
        <GradientStop Color="#8796ac"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="GridView_HeaderOuterBorder" Color="Red"/>
    <SolidColorBrush x:Key="GridView_HeaderForeground" Color="White"/>
    <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>


    <!--  telerik:GridViewHeaderCell Common Style END  -->


<!--Grid View HEader Row Style Start-->
 <SolidColorBrush x:Key="GridView_HeaderRowInnerBorder" Color="#FF4B4B4B"/>
    <SolidColorBrush x:Key="GridView_HeaderInnerBorder2" Color="#FF4B4B4B"/>
    <LinearGradientBrush x:Key="GridView_HeaderBackground2" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#49505c" Offset="1"/>
        <GradientStop Color="#8796ac"/>
    </LinearGradientBrush>
    <DataTemplate x:Key="GridViewHeaderIndentCellDataTemplate">
        <telerik:GridViewHeaderIndentCell telerik:StyleManager.Theme="{StaticResource Theme}"/>
    </DataTemplate>
    <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    <ControlTemplate x:Key="FrozenColumnsSplitterTemplate" TargetType="telerik:FrozenColumnsSplitter">
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,0,0,0" Width="6">
            <Border BorderThickness="0,0,2,0" Background="{TemplateBinding Background}" Margin="0"/>
        </Border>
    </ControlTemplate>
    <LinearGradientBrush x:Key="GridView_FrozenColumnBackground" EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="#00000000"/>
        <GradientStop Color="#00000000" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="GridView_FrozenColumnBorder" Color="White"/>
    <Style x:Key="FrozenColumnsSplitterStyle1" TargetType="telerik:FrozenColumnsSplitter">
        <Setter Property="Template" Value="{StaticResource FrozenColumnsSplitterTemplate}"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Background" Value="{StaticResource GridView_FrozenColumnBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource GridView_FrozenColumnBorder}"/>
    </Style>
    <ControlTemplate x:Key="DataCellsPresenterTemplate" TargetType="telerik:DataCellsPresenter">
        <Grid>
            <ItemsPresenter/>
            <telerik:FrozenColumnsSplitter x:Name="PART_FrozenColumnsSplitter" HorizontalAlignment="Left" telerik:StyleManager.Theme="{StaticResource Theme}" Style="{StaticResource FrozenColumnsSplitterStyle1}"/>
        </Grid>
    </ControlTemplate>
    <Style x:Key="DataCellsPresenterStyle1" TargetType="telerik:DataCellsPresenter">
        <Setter Property="Template" Value="{StaticResource DataCellsPresenterTemplate}"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerik:GridViewCellsPanel/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <ControlTemplate x:Key="GridViewHeaderRowTemplate" TargetType="telerik:GridViewHeaderRow">
        <telerik:SelectiveScrollingGrid>
            <telerik:SelectiveScrollingGrid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </telerik:SelectiveScrollingGrid.ColumnDefinitions>
            <Border x:Name="PART_GridViewHeaderRowBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                <Border BorderBrush="{StaticResource GridView_HeaderRowInnerBorder}" BorderThickness="0" Background="{TemplateBinding Background}"/>
            </Border>
            <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Grid.Column="3" telerik:StyleManager.Theme="{StaticResource Theme}" Style="{StaticResource DataCellsPresenterStyle1}"/>
            <Border x:Name="PART_IndicatorPresenter" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{TemplateBinding RowIndicatorVisibility}" Width="25">
                <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder2}" BorderThickness="0" Background="{StaticResource GridView_HeaderBackground2}"/>
            </Border>
            <telerik:IndentPresenter x:Name="PART_IndentPresenter" Grid.Column="1" ItemTemplate="{StaticResource GridViewHeaderIndentCellDataTemplate}" IndentLevel="{TemplateBinding IndentLevel}" MinHeight="{TemplateBinding MinHeight}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" telerik:StyleManager.Theme="{StaticResource Theme}"/>
            <Border x:Name="PART_HierarchyIndentPresenter" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1" Grid.Column="2" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HasHierarchy, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" Width="25">
                <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder2}" BorderThickness="1" Background="{StaticResource GridView_HeaderBackground2}"/>
            </Border>
        </telerik:SelectiveScrollingGrid>
    </ControlTemplate>
    <LinearGradientBrush x:Key="GridView_HeaderRowBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#49505c" Offset="1"/>
        <GradientStop Color="#8796ac"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="GridView_HeaderRowOuterBorder" Color="#FF848484"/>
    <Style TargetType="telerik:GridViewHeaderRow">
        <Setter Property="Template" Value="{StaticResource GridViewHeaderRowTemplate}"/>
        <Setter Property="Background" Value="{StaticResource GridView_HeaderRowBackground}"/>
        <Setter Property="MinHeight" Value="27"/>
        <Setter Property="BorderBrush" Value="{StaticResource GridView_HeaderRowOuterBorder}"/>
        <Setter Property="BorderThickness" Value="1,0,0,0"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="Padding" Value="0"/>
    </Style>
    <!-- telerik:GridViewHeaderRow Common Style END-->

Thanks and Regards,
Hardik