Change Background Color of whole datagrid row upon selection

Question

I'm currently building up a WPF Window holding a table using the DataGrid. Binding and updates work fine, I'm also quite contempt with the styling, but I ran into troubles when it comes to selection. This are the prerequisites:

Table is ReadOnly
Whole Row Selection

This is the source code for my table: (Yes, I know I did set the selection color 3 times, once for DataGrid, once for the row, once for the cell. I thought maybe one of those would be helping, but it's not the case.)

<DataGrid x:Name="dgv" SelectionMode="Single" SelectionUnit="FullRow" AutoGenerateColumns="False" Grid.Column="0" Grid.RowSpan="3" Margin="8" RowHeight="32" GridLinesVisibility="Horizontal" HeadersVisibility="Column" HorizontalScrollBarVisibility="Hidden"
              CanUserAddRows="False"
              CanUserDeleteRows="False"
              CanUserReorderColumns="False"
              CanUserResizeColumns="False"
              CanUserResizeRows="False"
              CanUserSortColumns="True"
              IsReadOnly="True"
              LoadingRow="dgv_LoadingRow"
              >
        <DataGrid.CellStyle>
            <Style TargetType="DataGridCell">
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"></SolidColorBrush>
                </Style.Resources>
                <Setter Property="VerticalAlignment" Value="center"></Setter>
                <Setter Property="Padding" Value="4"></Setter>
                <Setter Property="Margin" Value="4"></Setter>
            </Style>
        </DataGrid.CellStyle>
        <DataGrid.RowStyle>
            <Style TargetType="DataGridRow">
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"></SolidColorBrush>
                </Style.Resources>
            </Style>
        </DataGrid.RowStyle>
        <DataGrid.Style>
            <Style TargetType="DataGrid">
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"></SolidColorBrush>
                </Style.Resources>
            </Style>
        </DataGrid.Style>

It then continues to Column- and RowDefinitions ...

I run into the following problems:

Only the cells get selected, not the whole line. The margins in the Cells make it look quite weird (See Screenshot)
The row doesn't select when I click on a margin of a cell (the areas in the Screenshot that are not rendered in red) - makes selecting rows quite unintuitive...
The cell that I click on to select the row still gets hihglighted (notice the black border around "Peter Müller" in the selected row)

Here's a screenshot of the outcome:

enter image description here

Well I guess since nobody came up with anything different I'll have to use the programmatic approach and react to the selectionChanged Event... — Eisenhorn

Harrison Harrison · Accepted Answer · 2013-03-18T17:01:15

What if you were to remove the margin in the cell definition? That is accounting for the cells taking up extra space and the red not covering that space. If you removed the margin, do you get what you are looking for. I think the real answer may be in the DataGrid.RowBackground [Property][1].

Property Value Type: System.Windows.Media.Brush The brush that paints the background of a row. The registered default is null. For more information about what can influence the value, see DependencyProperty.

You could use a trigger on the IsSelected state to set the color. By default the entire row of a DataGrid is selected.

<DataGrid Name="dataGrid1" Margin="12,12,0,0">
    <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            <Setter Property="Background" Value="LightBlue" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>
</DataGrid>

Change Background Color of whole datagrid row upon selection

2 Answers