How to: Change the Appearance of Selected Rows

• Jun 07, 2019
• 4 minutes to read

This example demonstrates how to use the View's RowStyle property to apply custom styles to focused and selected rows. To identify whether a row is focused and selected, the attached IsFocusedRow and IsSelected properties are used.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-change-the-appearance-of-a-focused-data-row-and-selected-rows-e2066.

Application.xaml

<Application x:Class="DXGrid_ChangeRowAppearance.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="Window1.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

Application.xaml.vb

' Developer Express Code Central Example:
' How to change the appearance of a focused data row and selected rows
' 
' This example demonstrates how to use the View's RowStyle property to apply
' custom styles to focused and selected rows. To identify whether a row is focused
' and selected, the attached IsFocusedRow and IsSelected properties are used.
' 
' You can find sample updates and versions for different programming languages here:
' http://www.devexpress.com/example=E2066

Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Windows

Namespace DXGrid_ChangeRowAppearance
    ''' <summary>
    ''' Interaction logic for App.xaml
    ''' </summary>
    Partial Public Class App
        Inherits Application

    End Class
End Namespace

Window1.xaml

<Window x:Class="DXGrid_ChangeRowAppearance.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:dxcn="http://schemas.devexpress.com/winfx/2008/xaml/core/internal"
        xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys"
        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">
    <Window.Resources>
        <dxcn:BrushSet x:Key="{dxgt:GridRowThemeKey ResourceKey=CellBackgroundBrushes}">
            <dxcn:BrushSet.Elements>
                <dxcn:BrushInfo x:Key="Focused" Brush="{StaticResource {dxgt:GridRowThemeKey ResourceKey=CellBorderFocusedBrush}}" />
                <dxcn:BrushInfo x:Key="Selected" Brush="{StaticResource {dxgt:GridRowThemeKey ResourceKey=BorderSelectedBrush}}" />
                <dxcn:BrushInfo x:Key="FocusedAndSelected" Brush="{StaticResource {dxgt:GridRowThemeKey ResourceKey=BorderFocusedBrush}}" />
                <dxcn:BrushInfo x:Key="BorderBrush" Brush="{StaticResource {dxgt:GridRowThemeKey ResourceKey=GridDataRowDelimiterBrush}}" />
                <dxcn:BrushInfo x:Key="BorderBrushFocusedRow" Brush="{StaticResource {dxgt:GridRowThemeKey ResourceKey=GridDataRowDelimiterBrush}}" />
            </dxcn:BrushSet.Elements>
        </dxcn:BrushSet>
        <Style x:Key="SelectedRowStyle" TargetType="{x:Type dxg:RowControl}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=IsSelected}" Value="True">
                    <Setter Property="Background" Value="Gray" />
                    <Setter Property="Foreground" Value="White" />
                </DataTrigger>
                <Trigger Property="dxg:GridViewBase.IsFocusedRow" Value="True">
                    <Setter Property="Background" Value="Red" />
                    <Setter Property="Foreground" Value="White" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <dxg:GridControl x:Name="grid" AutoGenerateColumns="AddNew" SelectionMode="Row">
            <dxg:GridControl.View>
                <dxg:TableView AutoWidth="True" ShowGroupPanel="False" AllowGrouping="False" RowStyle="{StaticResource SelectedRowStyle}"/>
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</Window>

Window1.xaml.vb

' Developer Express Code Central Example:
' How to change the appearance of a focused data row and selected rows
' 
' This example demonstrates how to use the View's RowStyle property to apply
' custom styles to focused and selected rows. To identify whether a row is focused
' and selected, the attached IsFocusedRow and IsSelected properties are used.
' 
' You can find sample updates and versions for different programming languages here:
' http://www.devexpress.com/example=E2066

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
            Public Property ProductName() As String
            Public Property UnitPrice() As Double
            Public Property UnitsOnOrder() As Integer
        End Class
    End Class
End Namespace

Window1.xaml.cs

// Developer Express Code Central Example:
// How to change the appearance of a focused data row and selected rows
// 
// This example demonstrates how to use the View's RowStyle property to apply
// custom styles to focused and selected rows. To identify whether a row is focused
// and selected, the attached IsFocusedRow and IsSelected properties are used.
// 
// You can find sample updates and versions for different programming languages here:
// http://www.devexpress.com/example=E2066

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; }
        }
    }
}