WPF: How to change the style of selected and Focused Row with AlternateRowColor of DevExpress Grid Control

To change the style of the selected row we will write a Trigger and will apply style for the row in the trigger. For that we will check for the SelectionState for selected Row & IsFocusedRow for the Focused Row Property.

Trigger For Focused Row

<Trigger Property='dxg:DataViewBase.IsFocusedRow' Value='True'>
       <Setter Property='Background' Value='{DynamicResource FocusedRowBackgroundStyle}'/>
       <Setter Property='BorderBrush' Value='#F2F2F2'/>
       <Setter Property='Foreground' Value='Black'/>
       <Setter Property='BorderThickness' Value='2'/>
 </Trigger>

Trigger For Selected Row

<DataTrigger Binding="{Binding Path=SelectionState}" Value="Selected">
    <Setter Property='Background' Value='{DynamicResource SeletedRowBackgroundStyle}'/>
    <Setter Property='BorderBrush' Value='#F2F2F2'/>
    <Setter Property='Foreground' Value='Black'/>
    <Setter Property='BorderThickness' Value='2'/>
</DataTrigger>

Sample XAML Code

    <Grid>

        <Grid.Resources>

            <SolidColorBrush x:Key='evenRowBrush' Color='#FFDCE2E2'/>

            <LinearGradientBrush x:Key='AlternateRowBackgroundStyle' StartPoint='0.5,0' EndPoint='0.5,1'>

                <GradientStop Offset='0' Color='#F5F5F5F5'/>

                <GradientStop Offset='1' Color='#EEEEEEEE'/>

            </LinearGradientBrush>

            <LinearGradientBrush x:Key='SeletedRowBackgroundStyle' StartPoint='0.5,0' EndPoint='0.5,1'>

                <GradientStop Color='#FFFDF1E3'/>

                <GradientStop Offset='1' Color='#FFFFDEB5'/>

            </LinearGradientBrush>

            <LinearGradientBrush x:Key='FocusedRowBackgroundStyle' StartPoint='0.5,0' EndPoint='0.5,1'>

                <GradientStop Color='#FFFFDDDD'/>

                <GradientStop Offset='1' Color='#FFCCCC'/>

            </LinearGradientBrush>

            <Style x:Key='ReadOnlyCellStyle' TargetType='{x:Type dxg:CellContentPresenter}'>

                <Setter Property='HorizontalContentAlignment' Value='Left'/>

                <Setter Property='Height' Value='25'/>

                <Setter Property='HorizontalAlignment' Value='Left'/>

                <Setter Property='ToolTip' Value='{Binding Value}' />

            </Style>

            <Style x:Key='OddEvenRowStyleWithOutMultiSelection' BasedOn='{StaticResource {dxgt:GridRowThemeKey ResourceKey=RowStyle}}' TargetType='{x:Type dxg:GridRowContent}'>

                <Setter Property='Background' Value='{DynamicResource evenRowBrush}'/>

                <Style.Triggers>

                    <Trigger Property='dxg:DataViewBase.IsFocusedRow' Value='True'>

                        <Setter Property='Background' Value='{DynamicResource FocusedRowBackgroundStyle}'/>

                        <Setter Property='BorderBrush' Value='#F2F2F2'/>

                        <Setter Property='Foreground' Value='Black'/>

                        <Setter Property='BorderThickness' Value='2'/>

                    </Trigger>

                    <DataTrigger Binding="{Binding Path=SelectionState}" Value="Selected">

                        <Setter Property='Background' Value='{DynamicResource SeletedRowBackgroundStyle}'/>

                        <Setter Property='BorderBrush' Value='#F2F2F2'/>

                        <Setter Property='Foreground' Value='Black'/>

                        <Setter Property='BorderThickness' Value='2'/>

                    </DataTrigger>

                </Style.Triggers>

            </Style>

        </Grid.Resources>

        <dxg:GridControl x:Name='grdCtrl' HorizontalAlignment='Left'  VerticalAlignment='Top'

            Grid.Row='0' Margin='5,0,5,5' AutoPopulateColumns='True' MaxHeight='400' Grid.ColumnSpan='6'

            BorderBrush='Transparent' BorderThickness='0' ScrollViewer.CanContentScroll='False'  VerticalContentAlignment='Stretch'>

         <dxg:GridControl.View>

                <dxg:TableView AllowColumnFiltering='False' AllowEditing='False' AllowGrouping='True' AllowResizing='True' AllowSorting='True' AutoWidth='True' CellStyle='{DynamicResource ReadOnlyCellStyle}'    MultiSelectMode="Row" RowStyle='{DynamicResource OddEvenRowStyleWithOutMultiSelection}' ColumnHeaderTemplate='{DynamicResource ColumnHeaderTemplate}' ShowGroupPanel='False' ShowIndicator='False' ShowVerticalLines='False'></dxg:TableView>

         </dxg:GridControl.View>

   </dxg:GridControl>

</Grid> 

Output