Change BorderBrush and BorderThickness when mouse over a row in sfDatagrid

[Jayden Lee]

Hell, All.

I'm using SfDataGrid, and I'm using the RowHoverHighlitngBrush property to change the Background on hover.

However, I couldn't find a property that can be changed for Border.

I want to change BorderBrush and BorderThinkness when mouse hovers over row in sfDatagrid.

Please let me know if there is a way.

Best regards,

[Vijayarasan Sivanandham]

Hi Jayden Lee,

Your requirement to change BorderBrush and BorderThickness when mouse over a row in SfDataGrid can be achieved by customizing the VirtualizingCellsControl style. Refer to the below code snippet,

<Window.Resources>

 

    <!--  Row Style  -->

    <Style TargetType="{x:Type syncfusion:VirtualizingCellsControl}">

……………………………………………………

……………………………………………………

……………………………………………………

                        <Border Background="{TemplateBinding RowHoverBackgroundBrush}"  x:Name="PART_RowHoverBorder"

                            BorderBrush="{TemplateBinding RowHoverBackgroundBrush}"

                            BorderThickness="{TemplateBinding RowHighlightBorderThickness}"

                            Clip="{TemplateBinding HighlightBorderClipRect}"

                            SnapsToDevicePixels="True"

                            Visibility="{TemplateBinding HighlightSelectionBorderVisiblity}" />

                        <Rectangle x:Name="PART_CurrentFocusRow"

                               Margin="{TemplateBinding CurrentFocusBorderMargin}"

                               Stroke="#666666"

                               StrokeDashArray="2,2"

                               StrokeThickness="1"

                               Visibility="{TemplateBinding CurrentFocusRowVisibility}" />

                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">

                            <ContentPresenter />

                        </Border>

                        <Border x:Name="PART_DragLineIndicator"

                            BorderBrush="#2B579A"

                            Visibility="Collapsed"

                            BorderThickness="0,0,0,2" />

                    </Grid>

                    <ControlTemplate.Triggers>

                        <!--Here customize the BorderBrush and BorderThickness based IsMouseOver for PART_RowHoverBorder--> 

                        <Trigger Property="IsMouseOver" Value="True">

                            <Setter Property="BorderBrush" Value="Green" TargetName="PART_RowHoverBorder" />

                            <Setter Property="BorderThickness" Value="3"  TargetName="PART_RowHoverBorder" />

                            <Setter Property="Visibility" Value="Visible"  TargetName="PART_RowHoverBorder" />

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>      

</Window.Resources>

 

UG Link: https://help.syncfusion.com/wpf/datagrid/styles-and-templates#styling-record-row

https://help.syncfusion.com/wpf/datagrid/conditional-styling#row-style

Find the sample in the attachment.

Regards,
Vijayarasan S

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: SfDataGridDemo_48a23000.zip