WPF cannot remove right border for DataGrid cell

Question

I'm using DataGrid to show some information. However every row's right column displays an extra border line which does not align with the DataGrid border.

I've tried to set the cell BorderThickness to 0, but the right border line still exists. The style xaml code is as below.

<!-- DataGrid Cell -->
<Style TargetType="{x:Type DataGridCell}" x:Key="RightCell">
<Setter Property="BorderThickness" Value="0 0 0 0"/>
</Style>
<!--Text Block-->
<Style TargetType="{x:Type TextBlock}" x:Key="RegularTextBlock">
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="FontSize" Value="{StaticResource FontSizeSuperSmall}" />
</Style>

The UI xaml code is as below.

<!-- DataGrid -->
<DataGrid Grid.Column="0" 
Margin="0,0,10,0" 
x:Name="ResultDataGrid"
ItemsSource="{Binding ResultList, UpdateSourceTrigger=PropertyChanged}"
AutoGenerateColumns="False"
CanUserAddRows="False"
CanUserSortColumns="False"
CanUserDeleteRows="False"
CanUserReorderColumns="False"
GridLinesVisibility="All"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
HorizontalAlignment="Center"
RowHeaderWidth="0"
BorderBrush="{StaticResource CustomPureBlackBrush}"
BorderThickness="1"
Background="{StaticResource CustomPureWhiteBrush}">
<!-- Set Columns -->
<DataGrid.Columns>
<!-- First two columns have been deleted for simplicity.-->
<!-- Type Column-->
<DataGridTemplateColumn Header="Type" Width="*" IsReadOnly="True" HeaderStyle=" 
   {StaticResource FlattenRightHeader}" CellStyle="{StaticResource RightCell}" >
  <DataGridTemplateColumn.CellTemplate>
      <DataTemplate>
          <Grid>
              <TextBlock Name="BuyTYpe" Text="test" Style="{StaticResource RegularTextBlock}" />
          </Grid>
      </DataTemplate>
  </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>

Could someone give me some suggestions? Thanks.

Answer 1

it sounds like the problem lies with the default styling of the DataGrid and how it renders its columns and rows. Even though you've set the BorderThickness of the DataGridCell to 0, the gridlines of the DataGrid itself can still cause visual borders.To remove the right border from your DataGrid cells, you might want to adjust the GridLinesVisibility property:

<DataGrid GridLinesVisibility="Vertical" ...>

This will show only the vertical gridlines, removing the horizontal ones.If that doesn't solve the issue, another trick you can try is to set a negative margin on the right side of the DataGrid columns, which effectively hides the rightmost border:

<DataGridTemplateColumn ...>
    <DataGridTemplateColumn.CellStyle>
        <Style TargetType="DataGridCell">
            <Setter Property="Margin" Value="0,0,-1,0"/>
        </Style>
    </DataGridTemplateColumn.CellStyle>
    ...
</DataGridTemplateColumn

This will effectively "shift" the content of each cell to the right, overlaying the border.However, be cautious when using negative margins as they can sometimes lead to unexpected layout behaviors. Always check the result in various scenarios to ensure it meets your requirements. Hope one of these suggestions helps!