Unexpected vertical lines when resizing a DataGrid

Question

I'm working with a DataGrid using the following code:

<DataGrid Name="DataGridBids" 
          VerticalAlignment="Stretch" 
          HorizontalAlignment="Stretch" 
          HeadersVisibility="Column"
          Background="#0d4338"
          CanUserAddRows="False"
          CanUserDeleteRows="False"
          CanUserReorderColumns="False"
          ItemsSource="{Binding Bids}"
          AutoGenerateColumns="False"
          IsReadOnly="True"
          IsManipulationEnabled="False"
          HorizontalScrollBarVisibility="Disabled"
          VerticalScrollBarVisibility="Disabled"
          GridLinesVisibility="None"
          Margin="0,0,0,0"
          BorderThickness="0">

    <DataGrid.Resources>
        <Style TargetType="DataGridCell">
            <Setter Property="TextBlock.TextAlignment" Value="Center"/>
            <Setter Property="Background" Value="#0d4338"/>
            <Setter Property="Foreground" Value="#11b376"/>
            <Setter Property="BorderThickness" Value="0,0,0,0"/>
        </Style>
    </DataGrid.Resources>

    <DataGrid.Columns>
        <DataGridTextColumn Header="Agent" Width="*"  Binding="{Binding Agent}"/>
        <DataGridTextColumn Header="Quantity" Width="*" Binding="{Binding Quantity}"/>
        <DataGridTextColumn Header="Buy" Width="*" Binding="{Binding Price, StringFormat='N2'}"/>
    </DataGrid.Columns>

</DataGrid>

The DataGrid works exactly as I expected when I open it:

But when I resize the window, these unexpected white vertical lines show up constantly (though not always):

For some reason the white line only shows up between the second and third columns, and always vertically.

I don't know whether this is a WPF bug or not, but either way I'd like to fix it.

Any suggestion is appreciated, thank you!

Answer 1

It must be something weird with the rendering. Since your columns are all intended to have the same background, your style could target DataGridRow instead of DataGridCell like the snippet below. Note: I am using transparent since the DataGrid already has the background color you want, but you could just as easily use your green color "#0d4338".

<DataGrid.Resources>
    <!--Target DataGridRow instead... -->
    <Style TargetType="DataGridRow">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="TextBlock.TextAlignment" Value="Center" />
        <Setter Property="Foreground" Value="#11b376" />
        <Setter Property="BorderThickness" Value="0,0,0,0" />
    </Style>
</DataGrid.Resources>

This got rid of any weird aliasing for me that I saw when resizing the grid, but I could not reproduce exactly what you showed.