Datagrid ColumnHeader Style renders weird double border

Question

I'm made a style for DataGridColumnHeader. Most of it is working, but I get second Border through my header text and I don't know how to solve this. See the image below for the result I get:

I only want the one border that's below the text. This is the style I've made:

<Style TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                <Grid Name="HeaderGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="14" />
                    </Grid.ColumnDefinitions>
                    <Border
                        x:Name="BackgroundBorder"
                        Grid.ColumnSpan="2"
                        BorderBrush="{DynamicResource Dark}"
                        BorderThickness="0,0,1,1"/>
                    <ContentPresenter
                        Grid.Column="0"
                        Margin="6,3,6,3"
                        VerticalAlignment="Center" />
                    <Path
                        x:Name="SortArrow"
                        Grid.Column="1"
                        Width="6"
                        Height="4"
                        Margin="0,0,8,0"
                        VerticalAlignment="Center"
                        Data="M 0 4 L 3.5 0 L 7 4 Z"
                        Fill="{DynamicResource Dark}"
                        RenderTransformOrigin="0.5,0.4"
                        Stretch="Fill"
                        Visibility="Collapsed" />
                    <Thumb
                        x:Name="PART_RightHeaderGripper"
                        Grid.Column="1"
                        HorizontalAlignment="Right"
                        Cursor="SizeWE">
                        <Thumb.Style>
                            <Style TargetType="{x:Type Thumb}">
                                <Setter Property="Width" Value="2" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type Thumb}">
                                            <Border Background="Transparent" BorderBrush="Transparent" />
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Thumb.Style>
                    </Thumb>
                </Grid>
                
                <ControlTemplate.Triggers>
                    <Trigger Property="SortDirection" Value="Ascending">
                        <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
                        <Setter TargetName="SortArrow" Property="RenderTransform">
                            <Setter.Value>
                                <RotateTransform Angle="180" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="SortDirection" Value="Descending">
                        <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Can someone show me where I went wrong with the style I made?

EDIT:

I've put all the elements inside the border, but this doesn't seem to fix it. When I give the border a different thickness, this is the result:

BorderThickness="0,2,1,4"

Both the top and bottom border appear twice. Giving the header a MinHeight removes the double borders. This doesn't seem like a perfect fix, but works for now.

Answer 1

I recommend you take a careful look at how the original template works.

It's not clear what you're trying to achieve, but you need two thumbs for resizing.

On the following page

https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/datagrid-styles-and-templates

Search on columnheader then cycle through the hits until you see markup looks like:

<!--Style and template for the DataGridColumnHeader.-->
<Style TargetType="{x:Type DataGridColumnHeader}">
   <Setter Property="VerticalContentAlignment"
         Value="Center" />
   <Setter Property="Template">
     <Setter.Value>
       <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
    <Grid>
      <Border x:Name="columnHeaderBorder"
              BorderThickness="1"
              Padding="3,0,3,0">
        <Border.BorderBrush>
          <LinearGradientBrush EndPoint="0.5,1"
                               StartPoint="0.5,0">
            <GradientStop Color="{DynamicResource BorderLightColor}"
                          Offset="0" />
            <GradientStop Color="{DynamicResource BorderDarkColor}"
                          Offset="1" />
          </LinearGradientBrush>
        </Border.BorderBrush>
        <Border.Background>
          <LinearGradientBrush EndPoint="0.5,1"
                               StartPoint="0.5,0">
            <GradientStop Color="{DynamicResource ControlLightColor}"
                          Offset="0" />
            <GradientStop Color="{DynamicResource ControlMediumColor}"
                          Offset="1" />
          </LinearGradientBrush>
        </Border.Background>
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
      </Border>

      <Thumb x:Name="PART_LeftHeaderGripper"
             HorizontalAlignment="Left"
             Style="{StaticResource ColumnHeaderGripperStyle}" />
      <Thumb x:Name="PART_RightHeaderGripper"
             HorizontalAlignment="Right"
             Style="{StaticResource ColumnHeaderGripperStyle}" />
     </Grid>
   </ControlTemplate>
 </Setter.Value>

Notice particularly:

You need a PART_LeftHeaderGripper thumb.

Both thumbs are arranged using horizontalalignment left and right which would stop them filling the cell like yours does.

There is a width set in the style.

As a final piece of advice.

I strongly recommend you start with a working copy of a standard control template. Then carefully make small iterative changes. That way, when it breaks you know what broke it.