Question

I am binding the DataGrid to an ObservableCollection of custom objects. Intermittently I get (on maybe 2 or 3 rows) that a button like nubbie object (about maybe 4 pixels wide and the height of the row) appears on the left edge and causes the columns to indent slightly for that row so that they don’t line up. I don’t think there is anything special about those rows because if I rebind the grid to the same objects, the nubbies might not happen at all or might appear on different rows.

I am using some custom styling, and my first column is a DataTemplate, so I have included that below in case anyone can see anything in it that might be causing my issue. I’m kinda stumped at this point…

<DataGrid  Style="{DynamicResource WPFDataGridStyle}" Background="White" BorderBrush="LightGray" FontSize="13"
        CanUserReorderColumns="True" HorizontalGridLinesBrush="#FFEFEFEF" VerticalGridLinesBrush="#FFEFEFEF" HeadersVisibility="Column" 
        AlternatingRowBackground="#FFF4F4F4" CanUserResizeRows="False" SelectionMode="Single" AutoGenerateColumns="False" 
        CanUserAddRows="False" CanUserDeleteRows="False" CanUserSortColumns="True" FrozenColumnCount="3"
        ItemsSource="{Binding VM.FilteredSteamJobs,Mode=TwoWay,Source={StaticResource VM}}" 
        SelectedItem="{Binding VM.SelectedJob,Mode=TwoWay,Source={StaticResource VM}}"
        Visibility="{Binding VM.IsScheduleLoaded,Mode=OneWay,Source={StaticResource VM},Converter={StaticResource BoolToVisConv}}"  >
    <DataGrid.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#AAA7CDF0"/>
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#AAA7CDF0"/>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black"/>

        <Style x:Key="WPFDataGridStyle" TargetType="{x:Type DataGrid}" BasedOn="{StaticResource {x:Type DataGrid}}">
            <Setter Property="ColumnHeaderStyle" Value="{DynamicResource ColumnHeaderStyle1}"/>
            <Setter Property="CellStyle" Value="{DynamicResource CellStyle1}"/>
        </Style>

        <Style x:Key="ColumnHeaderStyle1" TargetType="DataGridColumnHeader" BasedOn="{StaticResource {x:Type DataGridColumnHeader}}">
            <Setter Property="Height" Value="25"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFC8E0FF" Offset="1"/>
                        <GradientStop Color="#FFF5FAFF" Offset="0"/>
                        <GradientStop Color="#FFDBEBFF" Offset="0.5"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Padding" Value="3"/>
            <Setter Property="BorderThickness" Value="0.5,0"/>
            <Setter Property="BorderBrush" Value="DarkGray"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontSize" Value="13" />
        </Style>

        <Style x:Key="CellStyle1" TargetType="{x:Type DataGridCell}">
            <Setter Property="Height" Value="25"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="FontSize" Value="13"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Padding" Value="3,0"/>
        </Style>
    </DataGrid.Resources>

    <DataGrid.Columns>

        <!--Selection Checkbox Column-->
        <DataGridTemplateColumn IsReadOnly="True" CanUserResize="False" CanUserSort="False" Width="Auto">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid>
                        <CheckBox VerticalAlignment="Center" HorizontalAlignment="Center" Margin="3"
                                  IsChecked="{Binding Path=IsSelected,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                                  Visibility="{Binding Status,Converter={StaticResource StatusToSelectVisConv}}">
                            <CheckBox.LayoutTransform>
                                <ScaleTransform ScaleX="1.2" ScaleY="1.2"/>
                            </CheckBox.LayoutTransform>
                        </CheckBox>
                    </Grid>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
            <DataGridTemplateColumn.HeaderTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <CheckBox VerticalAlignment="Center" Checked="HeaderSelect_Checked" Unchecked="HeaderSelect_Unchecked">
                            <CheckBox.LayoutTransform>
                                <ScaleTransform ScaleX="1.3" ScaleY="1.3"/>
                            </CheckBox.LayoutTransform>
                        </CheckBox>
                    </StackPanel>
                </DataTemplate>                 
            </DataGridTemplateColumn.HeaderTemplate>
        </DataGridTemplateColumn>

Answer 1

I have been struggling with this issue as well, and if i’m not mistaking you have to set RowHeaderWidth="0" on the DataGrid to avoid this “bug”.

Apparently the row headers are being shown for some random rows, even though HeadersVisibility is set to Column.