How to: Change the Appearance of Selected Cells

• Jun 07, 2019
• 3 minutes to read

You should implement your own CellStyle. In this CellStyle, implement style triggers for the SelectionState property. Four values can be assigned to this property: None, Focused, Selected, FocusedAndSelected.

Tip

GitHub Example: How to change selected cells’ appearance when GridControl’s multi-cell selection is enabled

Window.xaml

<Window x:Class="DXGrid_ChangeRowAppearance.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
        Title="Window1" Height="300" Width="505"
        xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys">
    <Window.Resources>
        <Style x:Key="SelectionStateCellStyle" TargetType="dxg:LightweightCellEditor" 
               BasedOn="{StaticResource ResourceKey={dxgt:GridRowThemeKey ResourceKey=LightweightCellStyle}}">
            <Style.Triggers>
                <Trigger Property="SelectionState" Value="Selected">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
                <Trigger Property="SelectionState" Value="Focused">
                    <Setter Property="Background" Value="Green"/>
                    <Setter Property="TextBlock.Foreground" Value="Pink"/>
                </Trigger>
                <Trigger Property="SelectionState" Value="FocusedAndSelected">
                    <Setter Property="Background" Value="Gray"/>
                    <Setter Property="TextBlock.Foreground" Value="Black"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="FocusedRowStyle" TargetType="dxg:RowControl">
            <Style.Triggers>
                <Trigger Property="dxg:GridViewBase.IsFocusedRow" Value="True">
                    <Setter Property="Background" Value="Gray" />
                    <Setter Property="Foreground" Value="White" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <dxg:GridControl x:Name="grid" AutoGenerateColumns="AddNew" SelectionMode="Cell">
            <dxg:GridControl.View>
                <dxg:TableView AutoWidth="True" 
                               CellStyle="{StaticResource SelectionStateCellStyle}" 
                               ShowGroupPanel="False" AllowGrouping="False" 
                               UseLightweightTemplates="All">
                </dxg:TableView>
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</Window>

Window.xaml.cs

using System.Windows;
using System.Collections.Generic;

namespace DXGrid_ChangeRowAppearance {
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
            grid.ItemsSource = Products.GetData();
        }
        public class Products {
            public static List<Product> GetData() {
                List<Product> data = new List<Product>();
               data.Add(new Product() { ProductName = "Chai", 
                    UnitPrice = 18, UnitsOnOrder = 10 });
                data.Add(new Product() { ProductName = "Ipoh Coffee",
                    UnitPrice = 36.8, UnitsOnOrder = 12 });
                data.Add(new Product() { ProductName = "Outback Lager",
                    UnitPrice = 12, UnitsOnOrder = 25 });
                data.Add(new Product() { ProductName = "Boston Crab Meat",
                    UnitPrice = 18.4, UnitsOnOrder = 18 });
                data.Add(new Product() { ProductName = "Konbu",
                    UnitPrice = 6, UnitsOnOrder = 24 });
                return data;
            }
        }
        public class Product {
            public string ProductName { get; set; }
            public double UnitPrice { get; set; }
            public int UnitsOnOrder { get; set; }
        }
    }
}

Window.xaml.vb

Imports Microsoft.VisualBasic
Imports System.Windows
Imports System.Collections.Generic

Namespace DXGrid_ChangeRowAppearance
    Partial Public Class Window1
        Inherits Window
        Public Sub New()
            InitializeComponent()
            grid.ItemsSource = Products.GetData()
        End Sub
        Public Class Products
            Public Shared Function GetData() As List(Of Product)
                Dim data As New List(Of Product)()
               data.Add(New Product() With {.ProductName = "Chai", .UnitPrice = 18, .UnitsOnOrder = 10})
                data.Add(New Product() With {.ProductName = "Ipoh Coffee", .UnitPrice = 36.8, .UnitsOnOrder = 12})
                data.Add(New Product() With {.ProductName = "Outback Lager", .UnitPrice = 12, .UnitsOnOrder = 25})
                data.Add(New Product() With {.ProductName = "Boston Crab Meat", .UnitPrice = 18.4, .UnitsOnOrder = 18})
                data.Add(New Product() With {.ProductName = "Konbu", .UnitPrice = 6, .UnitsOnOrder = 24})
                Return data
            End Function
        End Class
        Public Class Product
            Private privateProductName As String
            Public Property ProductName() As String
                Get
                    Return privateProductName
                End Get
                Set(ByVal value As String)
                    privateProductName = value
                End Set
            End Property
            Private privateUnitPrice As Double
            Public Property UnitPrice() As Double
                Get
                    Return privateUnitPrice
                End Get
                Set(ByVal value As Double)
                    privateUnitPrice = value
                End Set
            End Property
            Private privateUnitsOnOrder As Integer
            Public Property UnitsOnOrder() As Integer
                Get
                    Return privateUnitsOnOrder
                End Get
                Set(ByVal value As Integer)
                    privateUnitsOnOrder = value
                End Set
            End Property
        End Class
    End Class
End Namespace