WPF DataGrid highlight entire row

Question

I'm using a WPF datagrid to display data. I'm trying to figure out how to highlight the entire row when an item is clicked, including the empty columns/space on the end if there is empty space on the end (I'm using dynamically generated columns). Note, I'm NOT trying to highlight just a particular cell. This https://i.sstatic.net/GSLlK.jpg is what I'm seeing. The unused space at the end of the row is space where there is not currently a column, and is not highlighted. I would like for that space to be highlighted as well when the row is clicked. I've tried:

Setting the width to the last column of auto to fill the remaining space. This doesn't work for me because doing this disables the horizontal scroll bar, which I need since I'm using dynamically created columns.

I've also tried adding a style for DataGridRows:

<Trigger Property="IsSelected"
                 Value="true">
            <Setter Property="Background"
                    Value="{StaticResource SelectedBrush}" />
        </Trigger>

This kind of works, although, when the datagrid loads, or when my program is not in focus, it looks like this: https://i.sstatic.net/Qx4jU.jpg where only the last area of unused space is highlighted.

If possible, I'd prefer not to workaround this by just adding a blank dummy column on the end because this leads to the same problems as just setting the last column width to auto above.

Any suggestions?

Edit:

Here is the code for the DataGridRow style:

<Style TargetType="{x:Type DataGridRow}"
       x:Key="DataGridRowStyle">

    <Setter Property="Background"
            Value="White" />

    <Style.Triggers>
        <Trigger Property="AlternationIndex"
                 Value="1">
            <Setter Property="Background"
                    Value="#efefef" />
        </Trigger>

        <Trigger Property="IsMouseOver"
                 Value="true">
            <Setter Property="Background"
                    Value="{StaticResource RolloverBrush}" />
        </Trigger>
        <Trigger Property="IsSelected"
                 Value="true">
            <Setter Property="Background"
                    Value="{StaticResource SelectedBrush}" />
        </Trigger>
    </Style.Triggers>
</Style>

And the selected brush:

<LinearGradientBrush x:Key="SelectedBrush"
                     StartPoint="0,0"
                     EndPoint="0,1">
    <GradientStop Offset="0"
                  Color="#3399FF" />
</LinearGradientBrush>

The code for the datagrid:

        <DataGrid x:Name="JobListView"
              AutoGenerateColumns="False"
              ItemsSource="{Binding UnitStatusCollection, Mode=TwoWay}"
              CanUserDeleteRows="False"
              Style="{StaticResource JobGridViewStyle}"
              SelectedIndex="{Binding JobsListViewSelectedIndex, Mode=TwoWay}"
              SelectedItem="{Binding JobsListViewSelectedUnitStatusPair}"
              Utility:DataGridColumnsBehavior.BindableColumns="{Binding DataGridColumns}"
              ContextMenu="{StaticResource ListViewContextMenu}"
              Margin="10,0"
              Grid.Row="1"
              HorizontalAlignment="Stretch"
              HorizontalContentAlignment="Stretch"
              RowStyle="{StaticResource DataGridRowStyle}"
              AlternationCount="2"
              HorizontalGridLinesBrush="#5A5A5F"
              VerticalGridLinesBrush="#5A5A5F">

Answer 1

I found another solution, that's actually a bit simpler:

<DataGrid.Resources>
    <!-- Select everything with orange... -->
    <SolidColorBrush 
        Color="#ff9933" 
        x:Key="{x:Static SystemColors.HighlightBrushKey}" />
    <!-- ...all the time -->
    <SolidColorBrush 
        Color="#ff9933" 
        x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" />
</DataGrid.Resources>

The problem was that the entire row was highlighted, but when focus was lost, the "unselected" cells were highlighted with a different color: The Inactive Selection Highlight color.

The dead area background at the end of the row is being set by your IsSelected=True trigger. Get rid of that, and the dead area won't "select" at all. Use three distinct colors for that, HighlightBrushKey, and InactiveSelectionHighlightBrushKey, and it all becomes clear.

Anton Danylov was very, very close. But the answer is not to make those brushes transparent, it's to make them the color you want them to be.

Answer 2

In order to make this work, I used Anton's suggestion:

Also, a row in DataGrid consists of 2 parts, one of them is occupied by cells and the second one is not. You can set CellStyle also with the same SelectedBrush. In that case cells will be highlighted in the right color.

What I did was make a style for DataGridCellStyle and made a trigger for IsSelected:

<Style x:Key="DataGridCellStyle"
       TargetType="{x:Type DataGridCell}">
    <Style.Triggers>
        <Trigger Property="IsSelected"
                 Value="True">
            <Setter Property="Background"
                    Value="{StaticResource SelectedBrush}" />
        </Trigger>
    </Style.Triggers>
</Style>

Which paints the background of the cells the same color as the background of the selected row. This is in addition to having:

<Style TargetType="{x:Type DataGridRow}"
       x:Key="DataGridRowStyle">
    <Style.Triggers>
        <Trigger Property="IsSelected"
                 Value="true">
            <Setter Property="Background"
                    Value="{StaticResource SelectedBrush}" />
        </Trigger>
    </Style.Triggers>
</Style>

This allows the painted color to extend across the entire row on load or when the program loses focus.

Answer 3

You may clear default highlight color, so that your SelectedBrush would be used instead:

    <DataGrid ...>
        <DataGrid.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#00000000"/>
            <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="#00000000"/>
        </DataGrid.Resources>
    </DataGrid>