How to: Change the Appearance of the Focused Data Row and Focused Cell

  • 2 minutes to read

This example demonstrates how to use the View's RowStyle and CellStyle properties to apply custom styles to the focused row and cell. To identify whether the row and cell are focused, the attached IsFocusedRow and IsFocusedCell properties are used.

<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"
        xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys"
        Title="Window1" Height="300" Width="505">
    <Window.Resources>
        <Style x:Key="FocusedCellStyle" TargetType="dxg:LightweightCellEditor">
            <Style.Triggers>
                 <Trigger Property="dxg:DataViewBase.IsFocusedCell" Value="True">
                    <Setter Property="Background" Value="Green" />
                    <Setter Property="Foreground" Value="Yellow" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="FocusedRowStyle" TargetType="dxg:RowControl">
            <Style.Triggers>
                <Trigger Property="dxg:DataViewBase.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">
            <dxg:GridControl.View>
                <dxg:TableView AutoWidth="True" ShowGroupPanel="False" 
                               AllowGrouping="False" 
                               CellStyle="{StaticResource FocusedCellStyle}" 
                               RowStyle="{StaticResource FocusedRowStyle}" />
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</Window>
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; }
        }
    }
}