WPF: DataGrid Display Error

Question

I have a DataGrid with 3 columns, 2 of which are DataGridTextColumns and the last is a DataGridTemplateColumn that contains a CheckBox. It is bound to an ObservableCollection of Field objects.

The user can change the data in the DataGrid based on the SelectedItem of a ComboBox, which appears just above the DataGrid. This ComboBox is bound to a List of RecordType objects. I chose a List as the values in it do not change.

The problem I'm having is strange. Sometimes, but not always (the error is very temperamental), when changing the value in the ComboBox, the rows in the DataGrid display oddly (please see the screenshot) as you scroll down the list. Certain rows in the DataGrid appear with a small grey area to the left hand side of them and the row's content is pushed to the right, making it difficult to read the cells' values. As you continue to scroll up or down, so other cells display in the same way, though the problem only seems to affect a minimal number of rows, 5 at max roughly. The rows affected are not always the same and can change as the ComboBox item is changed.

To confirm, I have blanked out certain Field names in the screenshot to protect our client's privacy.

Could anyone suggest what might be causing this display issue? The XAML code I'm using for the ComboBox and DataGrid is given below.

Any suggestions/comments/help would be greatly appreciated.

Many thanks!

<ComboBox ItemsSource="{Binding RecordTypes}" SelectedItem="{Binding SelectedRecordType}" DisplayMemberPath="DisplayName" HorizontalAlignment="Left" Margin="9,71,0,0" VerticalAlignment="Top" Width="195"/>
<DataGrid SelectedItem="{Binding SelectedField}" ItemsSource="{Binding Fields}" GridLinesVisibility="None" AutoGenerateColumns="False" HorizontalAlignment="Left" Margin="10,98,0,0" VerticalAlignment="Top" Height="385" Width="400" IsReadOnly="True" CanUserReorderColumns="False" CanUserResizeRows="False" HeadersVisibility="Column" SelectionMode="Single" MaxColumnWidth="300">
    <DataGrid.CellStyle>
        <Style TargetType="DataGridCell">
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="ToolTip" Value="{Binding Description}" />
            <Style.Triggers>
                <Trigger Property="ToolTip" Value="{x:Static system:String.Empty}">
                    <Setter Property="ToolTipService.IsEnabled" Value="False" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.CellStyle>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding DisplayName}" Header="Field" Width="150" />
        <DataGridTextColumn Binding="{Binding DisplayPath}" Header="Path" Width="*" />
        <DataGridTemplateColumn MinWidth="25" MaxWidth="25">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="5" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

Answer 1

Try setting the RowHeaderWidth parameter for your datagrid to 0 , like:

<DataGrid
    RowHeaderWidth="0"
    ... your other parameters for the datagrid ...
>

(It appears to be the same problem as asked here: WPF DataGrid Row Header Visibility Error .)