Question

I’m using the WPF DataGrid and have it set to place a red border around any row that the user modifies. It works well, however when the border appears all the cells inside that row get pushed over a pixel or two. In other words a cell’s left and right border no longer lines up with the one above or below it, so it looks weird.

Here’s the code I’m using to get the red border to appear OnEdit (Note: IsDirty is a property on my bound object that’s set when a value gets modified):

<Style TargetType="DataGridRow">
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsDirty}" Value="true">
            <Setter Property="BorderBrush" Value="Red" />
            <Setter Property="BorderThickness" Value="1" />                    
        </DataTrigger>
    </Style.Triggers>
</Style>

What can I add so that I can modify the red border margins so that it won’t interfere with the cells’ borders?

Thanks

Answer 1

The Visual Tree looks something like this

• DataGridRow
  • Border
    • DataGridCellsPresenter

When you change the BorderThickness of the Border you could compensate this by adding negative Margin.Left to the DataGridCellsPresenter at the same time. Not the prettiest solution but it works

<DataGrid ...>
    <DataGrid.Resources>
        <Style TargetType="DataGridCellsPresenter">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsDirty}" Value="true">
                    <Setter Property="Margin" Value="-1,0,0,0" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </DataGrid.Resources>
    <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsDirty}" Value="true">
                    <Setter Property="BorderBrush" Value="Red" />
                    <Setter Property="BorderThickness" Value="1" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>
    <!--...-->
</DataGrid>