How to: Change the Appearance of Selected Rows
- 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.
<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>
' 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:
' https://supportcenter.devexpress.com/ticket/details/e2066/how-to-change-the-appearance-of-a-focused-data-row-and-selected-rows
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
<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>
' 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:
' https://supportcenter.devexpress.com/ticket/details/e2066/how-to-change-the-appearance-of-a-focused-data-row-and-selected-rows
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
// 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:
// https://supportcenter.devexpress.com/ticket/details/e2066/how-to-change-the-appearance-of-a-focused-data-row-and-selected-rows
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; }
}
}
}