WPF DataGrid - SelectedItem not changing on FullRow selection outside text

Question

I'm building a Datagrid that has rows with height=40. On a row selection, the program opens a new tab with a User Control specific to that item.

When I click anywhere in the row that's outside of the cell contents (Red boxes in this image), The event fires but 'CurrentItem' does not get updated.

Essentially, the row only gets selected if the cell contents are clicked. Has anyone else dealt with this, and have a solution for what's going on?

Here's my styling:

        <DataGrid Name="MachinesGrid" ItemsSource="{Binding MainData.Machines}">
        <DataGrid.Style>
            <Style TargetType="DataGrid">
                <Setter Property="SelectionMode" Value="Single" />
                <Setter Property="SelectionUnit" Value="FullRow" />
                <Setter Property="AutoGenerateColumns" Value="False" />
                <Setter Property="ColumnWidth" Value="Auto" />
                <Setter Property="CanUserAddRows" Value="False" />
                <Setter Property="Background" Value="{StaticResource BrushBackground}" />
                <Setter Property="RowBackground" Value="{StaticResource BrushGreyMid}" />
                <Setter Property="AlternatingRowBackground" Value="{StaticResource BrushGreyDark}" />
                <Setter Property="GridLinesVisibility" Value="None" />
                <Setter Property="ColumnHeaderStyle">
                    <Setter.Value>
                        <Style TargetType="DataGridColumnHeader">
                            <Setter Property="Background" Value="{StaticResource BrushBlue}" />
                            <Setter Property="Foreground" Value="{StaticResource BrushWhite}" />
                            <Setter Property="Height" Value="40" />
                            <Setter Property="FontWeight" Value="SemiBold" />
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="CellStyle">
                    <Setter.Value>
                        <Style TargetType="DataGridCell">
                            <Setter Property="VerticalAlignment" Value="Center" />
                            <Setter Property="Foreground" Value="{StaticResource BrushWhite}" />
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="BorderThickness" Value="0"/>
                            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="RowStyle">
                    <Setter.Value>
                        <Style TargetType="DataGridRow">
                            <Setter Property="Height" Value="40" />
                            <EventSetter Event="MouseLeftButtonUp" Handler="EventSetter_OnHandler" />
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="{StaticResource BrushGreyLite}" />
                                </Trigger>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Background" Value="{StaticResource BrushBlue}" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
        </DataGrid.Style>

Answer 1

As far as I know your problem is that selection is initially triggered in DataGridCell, by setting

<Setter Property="VerticalAlignment" Value="Center" />

your are telling that DataGridCell should vertically centered within a DataGridRow which leads to some space top and bottom which is not part of the DataGridCell and therefore not triggering any selection.

To solve this you have to set VerticalAlignment to Stretch(default) but then your content isn't centered anymore, for this you have to override the ControlTemplate of DataGridCell:

<ControlTemplate TargetType="{x:Type DataGridCell}">
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
        <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
    </Border>
</ControlTemplate>

Now you can set VerticalContentAlignment and HorizontalContentAlignment on DataGridCell to align your content.

---

Your DataGridCell-Style should then look like this

<Style TargetType="DataGridCell">
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Foreground" Value="{StaticResource BrushWhite}" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>