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



1 comment:

  1. Hub Of Computer Tricks And Programming: Wpf: How To Change The Style Of Selected And Focused Row With Alternaterowcolor Of Devexpress Grid Control >>>>> Download Now

    >>>>> Download Full

    Hub Of Computer Tricks And Programming: Wpf: How To Change The Style Of Selected And Focused Row With Alternaterowcolor Of Devexpress Grid Control >>>>> Download LINK

    >>>>> Download Now

    Hub Of Computer Tricks And Programming: Wpf: How To Change The Style Of Selected And Focused Row With Alternaterowcolor Of Devexpress Grid Control >>>>> Download Full

    >>>>> Download LINK

    ReplyDelete