Weird spacing between columns

[Alex]

I'm having an issue with mysterious spacing showing up between my columns. In the attached picture you can see it between the first two columns. I'm not sure if this is being caused my header row/column styling or cell styling. It looks like even when there are no rows some of the headers seem to have different spacing between them. Any ideas what might cause this?

Here are the styles I'm using.

<Style TargetType="{x:Type telerik:RadGridView}">
    <Setter Property="Background" Value="{StaticResource GridBackgroundBrush}" />
     <Setter Property="GridLinesVisibility" Value="None" />
 </Style>


<Style TargetType="{x:Type telerik:GridViewHeaderRow}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderRow}">
                    <SelectiveScrollingGrid>
                        <SelectiveScrollingGrid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </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 Background="{TemplateBinding Background}"/>
                        </Border>
                        <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Grid.Column="3" IsTabStop="False" />
                        <Border x:Name="PART_IndicatorPresenter" BorderThickness="0" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="Collapsed">
                            <Border Background="{StaticResource ResourceKey=GridBackgroundBrush}"/>
                        </Border>
                        <telerik:IndentPresenter x:Name="PART_IndentPresenter" Grid.Column="1" IsTabStop="False" IndentLevel="{TemplateBinding IndentLevel}" MinHeight="{TemplateBinding MinHeight}"
                                SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                            <telerik:IndentPresenter.ItemTemplate>
                                <DataTemplate>
                                    <telerik:GridViewHeaderIndentCell IsTabStop="False" />
                                </DataTemplate>
                            </telerik:IndentPresenter.ItemTemplate>
                        </telerik:IndentPresenter>
                        <Border x:Name="PART_HierarchyIndentPresenter" BorderThickness="1" Grid.Column="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Width="25">
                            <Border.Visibility>
                                <Binding Path="HasHierarchy" RelativeSource="{RelativeSource TemplatedParent}">
                                    <Binding.Converter>
                                        <BooleanToVisibilityConverter/>
                                    </Binding.Converter>
                                </Binding>
                            </Border.Visibility>
                        </Border>
                    </SelectiveScrollingGrid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="{DynamicResource GridBackgroundBrush}"/>
        <Setter Property="MinHeight" Value="27"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
<Style x:Key="BaseTelerikCell" TargetType="{x:Type telerik:GridViewCell}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:GridViewCell}">
                    <Grid Background="{TemplateBinding Background}">
                        <Border VerticalAlignment="Stretch" BorderThickness="{StaticResource GridGapThickness}"
                                BorderBrush="{StaticResource GridBackgroundBrush}">
                            <ContentPresenter x:Name="CellContentPresenter" VerticalAlignment="Center"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background">
                    <Setter.Value>
                        <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Foreground">
                    <Setter.Value>
                        <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

<Thickness x:Key="GridGapThickness" Bottom="1" Top="1" Right="1.5" Left="1.5" />
    <ControlTemplate x:Key="GridViewHeaderCellControlTemplate1" TargetType="{x:Type telerik:GridViewHeaderCell}">
        <Grid x:Name="PART_HeaderCellGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Border x:Name="GridViewHeaderCell" BorderBrush="{x:Null}" Grid.ColumnSpan="2">
                <Border BorderBrush="{StaticResource GridBackgroundBrush}" Background="LightGray" BorderThickness="{StaticResource GridGapThickness}"/>
            </Border>
            <Border x:Name="GridViewHeaderCell_Over" BorderBrush="LightGray" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0" />
            <Border x:Name="GridViewHeaderCell_Selected" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
            </Border>
            <ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
                            Grid.Column="0" Foreground="LightGray" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            IsTabStop="{TemplateBinding IsTabStop}" Margin="{TemplateBinding Padding}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                <ContentControl.Style>
                    <Style TargetType="{x:Type ContentControl}">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                    </Style>
                </ContentControl.Style>
            </ContentControl>
            <Path x:Name="PART_SortIndicator" Grid.ColumnSpan="2" Data="M0,0L1,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,0z"
                  Fill="Black" HorizontalAlignment="Center" Height="3" Margin="0,3,0,0" Opacity="0" RenderTransformOrigin="0.5,0.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" IsTabStop="False"
                                       Margin="0,0,8,0" Visibility="{TemplateBinding FilteringUIVisibility}">
                <telerik:StyleManager.Theme>
                    <telerik:Office_BlackTheme/>
                </telerik:StyleManager.Theme>
            </telerik:FilteringDropDown>
            <Thumb x:Name="PART_LeftHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Left" IsTabStop="{TemplateBinding IsTabStop}">
                <Thumb.Style>
                    <Style TargetType="{x:Type 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="{x:Type 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>
                </Thumb.Style>
            </Thumb>
            <Thumb x:Name="PART_RightHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Right" IsTabStop="{TemplateBinding IsTabStop}">
                <Thumb.Style>
                    <Style TargetType="{x:Type 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="{x:Type 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>
                </Thumb.Style>
            </Thumb>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="SortingState" Value="Ascending">
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="Opacity" TargetName="PART_SortIndicator" Value="1"/>
                <Setter Property="LayoutTransform" TargetName="PART_SortIndicator">
                    <Setter.Value>
                        <ScaleTransform ScaleY="1" ScaleX="1"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1"/>
            </Trigger>
            <Trigger Property="SortingState" Value="Descending">
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="Opacity" TargetName="PART_SortIndicator" Value="1"/>
                <Setter Property="LayoutTransform" TargetName="PART_SortIndicator">
                    <Setter.Value>
                        <ScaleTransform ScaleY="-1" ScaleX="1"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1"/>
            </Trigger>
            <Trigger Property="SortingState" Value="None">
                <Setter Property="Opacity" TargetName="PART_SortIndicator" Value="0"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <Style x:Key="DefaultHeaderColumnStyle"  TargetType="telerik:GridViewHeaderCell">
        <Setter Property="Template" Value="{StaticResource GridViewHeaderCellControlTemplate1}"/>
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="Background" Value="{x:Null}"/>
        <Setter Property="BorderBrush" Value="{x:Null}"/>
        <Setter Property="BorderThickness" Value="0"/>
    </Style>

[Dimitrina]

Hi,

You have predefined the templates of some visual elements and I am not sure what is the gap you mean. There is actually a gap between all the columns, not only the first two - painted in light pink. Do you have the same problem with the default templates, before applying your predefined ones?

Greetings,
Didie
the Telerik team

[Alex]

Sorry, my description was a bit confusing. There is gray between all the columns. But, between the first two columns there's also a thin white space between the gray which I'm trying to track down.

[Dimitrina]

Hello,

 Have you set any frozen columns for the GridView?

Greetings,
Didie
the Telerik team

[Alex]

Nope. I have CanUserFreezeColumns="False".

[Alex]

I'm attaching another image. I made a simple test project to replicate this behavior. As you can see it looks like the age column header is slightly overlapping with the width column header. This is creating an artifact on the left side of the weight column header. This sample grid I made has no styling applied to it.

<telerik:RadGridView Name="radGridView"
                             EnableColumnVirtualization="True"
                             AutoGenerateColumns="False"
                             SelectionUnit="Cell"
                             SelectionMode="Single"
                             RowIndicatorVisibility="Hidden"
                             ItemsSource="{Binding Proxies}">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Age}" IsSortable="False"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Weight}" IsFilterable="False"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Width}"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Location}"/>
                <telerik:GridViewColumn>
                    <telerik:GridViewColumn.CellTemplate>
                        <DataTemplate>
                                <Button Content="Pin"/>
                        </DataTemplate>
                    </telerik:GridViewColumn.CellTemplate>
                    </telerik:GridViewColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

[Yordanka]

Hi Alex,

Could you specify the version of the Telerik controls you use?
 
Kind regards,
Yordanka
the Telerik team

[Alex]

I'm using TelerikCore.2012.1.1\lib\net40\Telerik.Windows.Controls.GridView.dll

[Dimitrina]

Hello,

You say that "I have CanUserFreezeColumns="False"." but I do not see such definition in your code snippet. The vertical line on the picture look like FrozenColumnSplitter. May I ask you to add this setting as well:

FrozenColumnsSplitterVisibility="Collapsed" 

Furthermore our latest version is 2012.3.1017. Would you please test with that version to check if the problem still remains even without defining any additional styles?

Regards,
Didie
the Telerik team

[Alex]

I'm not talking about the vertical line. I'm talking about the little vertical line on the left of the Weight column header. I'm attaching another screen shot with all of the frozen columns stuff turned off. I'll try to update to the newest version and see if that fixes the issue.

[Dimitrina]

Hi,

We have fixed some issues with those lines, so please test with the latest binaries. If the problem still persists, would it be possible for you to open a support ticket and send a demo project demonstrating it? Here you can find some details on how to isolate a problem in a sample project.

All the best,
Didie
the Telerik team