How to change background color of selected text inside datagrid cell in WPF

Question

How can i change the background color of text when the cell is selected in datagrid in WPF

Answer 1

Here is a full example on this in case you have a TextBox on those DataGridRows:

<Window x:Class="DataGridCellsBackground.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <DataGrid SelectionUnit="Cell" 
              ItemsSource="{Binding items}" 
              AutoGenerateColumns="False">
        <DataGrid.Resources>
            <Style TargetType="TextBox">
                <Style.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter Property="Background" Value="Red"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </DataGrid.Resources>
        <DataGrid.Columns>
            <DataGridTemplateColumn>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBox Text="{Binding Name}"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

All the magic happens here:

    <Style TargetType="TextBox">
         <Style.Triggers>
             <Trigger Property="IsFocused" Value="True">
                 <Setter Property="Background" Value="Red"/>
             </Trigger>
         </Style.Triggers>
    </Style>

A simple Person class for this:

public class Person : INotifyPropertyChanged
{
    private string _Name;

    public string Name
    {
        get { return _Name; }
        set
        {
            _Name = value;
            PropertyChanged(this, new PropertyChangedEventArgs("Name"));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
}

And the code behind for testing purposes:

public partial class MainWindow : Window
{
    public ObservableCollection<Person> items { get; set; }

    public MainWindow()
    {
        InitializeComponent();
        items = new ObservableCollection<Person>();
        items.Add(new Person() { Name = "FirstName" });
        items.Add(new Person() { Name = "SecondName" });

        this.DataContext = this;
    }
}

Case 2

You define your DataTemplate as non editable and still want to select the cell:

<DataGridTemplateColumn>
       <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                   <TextBlock Text="{Binding Name}"/>
            </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

You change you style to :

        <Style TargetType="DataGridCell">
             <Style.Triggers>
                 <Trigger Property="IsFocused" Value="True">
                      <Setter Property="Background" Value="Red"/>
                 </Trigger>
              </Style.Triggers>
        </Style>

Why is this working like this?

Because the SelectionUnit property of the DataGrid is set to Cell, only a single cell is affected. If the SelectionUnit is set to FullRow, then the background color is applied to all cells in the selected row.

Answer 2

You Can achieve this using Triggers Like this.

<DataGrid.CellStyle>
    <Style TargetType="DataGridCell" >
       <Style.Triggers>
         <Trigger Property="IsEditing" Value="True">
            <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="DataGridCell">
                         <TextBox Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content.Text, Mode=TwoWay, UpdateSourceTrigger=Default}"
                     HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="0" BorderThickness="0" Background="SeaGreen"/>
                   </ControlTemplate>
                </Setter.Value>
           </Setter>
        </Trigger>
     <Style.Triggers>
  </Style>
</DataGrid.CellStyle>