How to change DataGrid selected row color WPF

Question

I have created a data grid in my WPF application. I want to change the selected row color. I have following code

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:navigationApp.Resources">

    <Style x:Key="DataGridColumnHeaderGripper" TargetType="Thumb">
        <Setter Property="Width" Value="18"/>
        <Setter Property="Background" Value="#252526"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border Padding="{TemplateBinding Padding}" Background="Transparent" BorderBrush="#3e3e45">
                        <Rectangle HorizontalAlignment="Center" Width="1" Fill="{TemplateBinding Background}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type DataGridCell}">
        <Setter Property="Padding" Value="8,5" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridCell}">
                    <Grid Background="Transparent">
                        <ContentPresenter
                            Margin="{TemplateBinding Padding}"
                            Content="{TemplateBinding ContentControl.Content}"
                            ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                            ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
                            SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type DataGridRow}">
        <Setter Property="Margin" Value="0"/>
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridRow}">
                    <Grid>
                        <Border x:Name="BorderOutline" BorderThickness="2,1,1,1" />
                        <Border x:Name="BorderInline" BorderThickness="0" />
                        <Grid Background="Black" Opacity="0" />
                        <SelectiveScrollingGrid>
                            <SelectiveScrollingGrid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </SelectiveScrollingGrid.ColumnDefinitions>
                            <SelectiveScrollingGrid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </SelectiveScrollingGrid.RowDefinitions>
                            <DataGridCellsPresenter
                                ItemsPanel="{TemplateBinding ItemsControl.ItemsPanel}"
                                SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
                                Grid.Column="1" />
                            <DataGridDetailsPresenter
                                Visibility="{TemplateBinding DataGridRow.DetailsVisibility}"
                                Grid.Column="1"
                                Grid.Row="1"
                                SelectiveScrollingGrid.SelectiveScrollingOrientation="Both" />
                            <DataGridRowHeader
                                Visibility="Visible"
                                Grid.RowSpan="2"
                                SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" />
                        </SelectiveScrollingGrid>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsSelected" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" Value="{DynamicResource ApplicationAccentBrush}" TargetName="BorderOutline" />
                            <Setter Property="Opacity" Value="0.8" TargetName="BorderOutline" />
                            <Setter Property="Background" Value="{DynamicResource ApplicationAccentBrushSecondary}" TargetName="BorderInline" />
                            <Setter Property="Opacity" Value="0.2" TargetName="BorderInline" />
                        </MultiTrigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="BorderBrush" Value="{DynamicResource ApplicationAccentBrush}" TargetName="BorderOutline" />
                            <Setter Property="Background" Value="{DynamicResource ApplicationAccentBrushSecondary}" TargetName="BorderInline" />
                            <Setter Property="Opacity" Value="0.3" TargetName="BorderInline" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Padding" Value="8,2,8,2"/>
        <Setter Property="Background" Value="#252526"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                    <Grid>
                        <Border Name="HeaderBorder" Padding="{TemplateBinding Padding}" BorderThickness="1,1,1,1" BorderBrush="#3e3e45" Background="#252526">
                            <ContentPresenter
                                Name="HeaderContent"
                                Margin="0,0,0,1"
                                RecognizesAccessKey="True"
                                Content="{TemplateBinding ContentControl.Content}"
                                ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                                ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
                                HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
                                SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                        </Border>
                        <!--<Thumb x:Name="PART_HeaderGripper" HorizontalAlignment="Right" Margin="0,0,-9,0" Style="{StaticResource DataGridColumnHeaderGripper}"/>-->
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="HeaderBorder" Property="Background" Value="{DynamicResource ApplicationAccentBrushSecondary}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="HeaderBorder" Property="Background" Value="{DynamicResource ApplicationAccentBrush}"/>
                            <Setter TargetName="HeaderContent" Property="Margin" Value="1,1,0,0"/>
                        </Trigger>
                        <Trigger Property="Selector.IsSelected" Value="True">
                            <Setter Property="TextElement.Foreground" Value="White"/>
                        </Trigger>

                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Currently, the selected row color is white or transperent. So i cant see the selected row details.

Answer 1

In my project, I did as followed:

<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource DataGridCell}">
<Setter Property="Background" Value="{StaticResource DataGridCellBackgroundBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource DataGridBorderBrush}" />
<Setter Property="BorderThickness" Value="0"/>

<Style.Triggers>
    <!--  IsSelected  -->
    <Trigger Property="IsSelected" Value="True">
        <Setter Property="Foreground" Value="{StaticResource BlackBrush}" />
    </Trigger>
    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="Controls:DataGridCellHelper.IsCellOrRowHeader" Value="True" />
            <Condition Property="IsSelected" Value="True" />
        </MultiTrigger.Conditions>
        <Setter Property="Background" Value="{StaticResource DataGridCellBackgroundBrush}" />
        <Setter Property="BorderBrush" Value="{StaticResource DataGridCellBackgroundBrush}" />
    </MultiTrigger>
//others properties 

DataGridCellBackgroundBrush and DataGridBorderBrush is my color predefined

Answer 2

You can change the color of the selected row by using triggers.As shown in the datagridrow style. Set the color to the background property of parent control (i.e Grid as TargetName) when row is selected .

<Style TargetType="{x:Type DataGridRow}">       
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridRow}">
                    <Grid x:Name="selectedRow">                        
                            <DataGridCellsPresenter
                                ItemsPanel="{TemplateBinding ItemsControl.ItemsPanel}"
                                SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
                                Grid.Column="1" />
                            <DataGridDetailsPresenter
                                Visibility="{TemplateBinding DataGridRow.DetailsVisibility}"
                                Grid.Column="1"
                                Grid.Row="1"
                                SelectiveScrollingGrid.SelectiveScrollingOrientation="Both" />
                            <DataGridRowHeader
                                Visibility="Visible"
                                Grid.RowSpan="2"
                                SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" />
                        </SelectiveScrollingGrid>
                    </Grid>
                    <ControlTemplate.Triggers>                                                        
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" Value="{DynamicResource ApplicationAccentBrushSecondary}" TargetName="selectedRow" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>