How to: Change the Appearance of Selected Cells

  • 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.

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