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.

the border should be surround something or? At the moment the border has no child element, thus it end up being this vertical line, i think. Try to remove the border element, if you dont need it. Or add the other elements into it ` your elements Border>` Do you need to reuse this very often or just for one header? if it is just for one header, it is easier to just set the DataGridColumnHeader datatemplate directly in the datagrid itself — Welcor, Jul 17 '20 at 15:53
@Blechdose Yea, I need to use this often. Even if I put all the other elements in the Border it shows the line through the text. I fixed it for now by giving the header a min height, not perfect but will do for now. — K.Luth, Jul 20 '20 at 05:42

score 0 · Answer 1 · answered Jul 18 '20 at 14:37

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.

Thank you! When I have time I'll look at this! – K.Luth Jul 20 '20 at 05:44 — K.Luth, Jul 20 '20 at 05:44

Datagrid ColumnHeader Style renders weird double border

1 Answers1