Devexpress- Background and grid lines in a gridcontrol

Question

I have run into a few issues with gridcontrol.

I have to style and format a grid column with padding,colors,fonts and hover effects.

<Style x:Key="SelectedRowStyle" TargetType="{x:Type dxg:RowControl}">
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="FontFamily" Value="pack://application:,,,/PA.Tos.UI;component/ResourceDictionaries/#Brandon Grotesque Black" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="FontWeight" Value="Regular" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding 
                ElementName=GroupCodeListView,Path=DataContext.SelectedGroupCode.Deleted, 
                UpdateSourceTrigger=PropertyChanged}" Value="true">
                    <Setter Property="Background" Value="Red" />
                    <Setter Property="Foreground" Value="Black" />
                </DataTrigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{StaticResource HoverRowBorderColor}" />
                    <Setter Property="Foreground" Value="Black" />
                </Trigger>
                <Trigger Property="dxg:GridViewBase.IsFocusedRow" Value="True">
                    <Setter Property="Background" Value="{StaticResource HoverRowBorderColor}" />
                    <Setter Property="BorderBrush" Value="{StaticResource HoverStrokeColor}" />
                    <Setter Property="BorderThickness" Value="1" />
                    <Setter Property="Foreground" Value="Black" />

                </Trigger>
            </Style.Triggers>
        </Style>


        <Style x:Key="CustomCellStyle" BasedOn="{StaticResource {dxgt:GridRowThemeKey 
          ResourceKey=LightweightCellStyle}}" TargetType="{x:Type dxg:LightweightCellEditor}">
            <Setter Property="MaxHeight" Value="25"/>
            <Setter Property="MinHeight" Value="25"/>
            <Style.Triggers>

            </Style.Triggers>

1. In response to a mouse hover or row selection, i have to set the border blue across all grid lines. Only the bottom grid line is blue as of now from the above. Code applicable to cellcontent presenter won't be possible here.

2. In response to a trash icon clicked, i have to display light red background for the particular row. I bind (viewmodel property)SelectedGroupCode.Deleted=true to the background.The binding is shown in the code. but all rows are painted red except the row in question.

3. The grid lines width has to be set. i have managed to set it for the horizontal lines only using gridrowthemekey_rowcontrolcontainertemplate.

I assure you i have read through some previous threads but its taking too much time for a scrum sprint.

What is missing?

Answer 1

If you want to change the cell style in response to a mouse hover then you can use RelativeSource markup extension in DataTrigger's binding. If you want to check whether the row is focused, then you can use RowData.IsFocused property.
Here is example:

<Style x:Key="CustomCellStyle" TargetType="{x:Type dxg:LightweightCellEditor}" BasedOn="{StaticResource {dxgt:GridRowThemeKey ResourceKey=LightweightCellStyle}}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type dxg:RowControl}}}" Value="True">
            <Setter Property="BorderBrush" Value="Blue" />
        </DataTrigger>
        <DataTrigger Binding="{Binding RowData.IsFocused}" Value="true">
            <Setter Property="BorderBrush" Value="Blue" />
        </DataTrigger>
    </Style.Triggers>
</Style>

For displaying custom style for particular row I suggest you to use Conditional Formatting.
Here is example:

<dxg:GridControl ...>
    ...
    <dxg:GridControl.View>
        <dxg:TableView>
            <dxg:TableView.FormatConditions>                    
                <dxg:FormatCondition Expression="[Deleted]" FieldName="Profit">
                    <dxc:Format Foreground="Red"/>
                </dxg:FormatCondition>
            </dxg:TableView.FormatConditions>
        </dxg:TableView>
    </dxg:GridControl.View>
</dxg:GridControl>