WPF: AlternateRowColor style in devexpress GridControl

Here I am demonstrating how can we assign alternate Row color to a devexpress grid control. To do so we will have to use MultiDataTrigger. In the MultiDataTrigger, we will check that if the row is even and not selected then Even row color will be assigned, if the row is odd and not selected than odd row color will be applied. similarly if the row is selected than no color will be applied and default selection state will be applied.

XAML Code

<Grid>
        <Grid.Resources>
            <SolidColorBrush x:Key='evenRowBrush' Color='#FFDCE2E2'/>
            <SolidColorBrush x:Key='oddRowBrush' Color='#FFFFFF'/>
            <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>
            <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
SeletedRowBackgroundStyle}'/>
                <Style.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding='{Binding Path=EvenRow}' Value='False'/>
                            <Condition Binding='{Binding Path=SelectionState}' Value='None'/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property='Background' Value='{DynamicResource evenRowBrush}'/>
                    </MultiDataTrigger>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding='{Binding Path=EvenRow}' Value='True'/>
                            <Condition Binding='{Binding Path=SelectionState}' Value='None'/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property='Background' Value='{StaticResource oddRowBrush}'/>
                    </MultiDataTrigger>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding='{Binding Path=EvenRow}' Value='False'/>
                            <Condition Binding='{Binding Path=SelectionState}' Value='Selected'/>
                        </MultiDataTrigger.Conditions>
                    </MultiDataTrigger>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding='{Binding Path=EvenRow}' Value='True'/>
                            <Condition Binding='{Binding Path=SelectionState}' Value='Selected'/>
                        </MultiDataTrigger.Conditions>
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>
            <DataTemplate x:Key='ColumnHeaderTemplate'>
                <Border Height='18' >
                    <ContentPresenter Name='contentPresenter' TextBlock.FontFamily='Segoe UI'
                     TextBlock.FontSize='14' TextBlock.FontWeight='Normal' Content='{Binding}' 
                     Style='{Binding  Path=(dxg:GridColumnHeader.GridColumn).ActualColumnHeaderContentStyle, RelativeSource={RelativeSource TemplatedParent}}'>
                    </ContentPresenter>
                </Border>
            </DataTemplate>
        </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="None"               
                               RowStyle='{DynamicResource OddEvenRowStyleWithOutMultiSelection}' 
                               ColumnHeaderTemplate='{DynamicResource ColumnHeaderTemplate}' 
                               ShowGroupPanel='False' ShowIndicator='False' ShowVerticalLines='False'>
               </dxg:TableView>
            </dxg:GridControl.View>
        </dxg:GridControl>
   
</Grid>

Output


No comments:

Post a Comment