How to set Border for the Selected Rows in WinRT ?

3 mins read

SfDataGrid supports two types of Selection behaviors such as RowSelection and CellSelection. You can do the RowSelection by setting the SelectionUnit as Row and CellSelection by setting the SelectionUnit as Cell.

The Border for the Selected Row can be set by customizing the VirtualizingCellsControl style. The following steps help you set the Border for SelectedRow.

Step 1:

Right-click SfDataGrid in the Visual Studio or Blend Designer view and select Edit Additional Templates -> Edit RowStyle -> Edit a Copy.

Step2:

A new window opens and in that window you have to mention where you want to define the template and the click Okay.

The VirtualizingCellsControl template is added in the Xaml page and the Border thickness of selection border, Part_SelectionBorder, in the Control template set.

XAML

<ControlTemplate TargetType="Syncfusion:VirtualizingCellsControl">
                        <Grid>
                            <Rectangle x:Name="PART_CurrentFocusRow"
                                   Margin="{TemplateBinding CurrentFocusBorderMargin}"
                                   Stroke="DarkGray"
                                   StrokeDashArray="2,2"
                                   StrokeThickness="1"
                                   Visibility="{TemplateBinding CurrentFocusRowVisibility}" />
                            <Border Background="{TemplateBinding RowHoverBackgroundBrush}"
                                BorderBrush="{TemplateBinding RowHoverBackgroundBrush}"
                                BorderThickness="{TemplateBinding RowHighlightBorderThickness}"
                                Clip="{TemplateBinding HighlightBorderClipRect}"
                                SnapsToDevicePixels="True"
                                Visibility="{TemplateBinding HighlightSelectionBorderVisiblity}" />
                            <Rectangle Clip="{TemplateBinding RowBackgroundClip}" Fill="{TemplateBinding Background}" />
                            
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                <ContentPresenter />
                            </Border>
 
                            <Border x:Name="Part_SelectionBorder" 
                                Background="{TemplateBinding RowSelectionBrush}" 
                                Clip="{TemplateBinding SelectionBorderClipRect}" 
                                BorderBrush="Black"
                                BorderThickness="1.5,1.5,1.5,2.5"    
                                Visibility="{TemplateBinding SelectionBorderVisiblity}"  Opacity="0.75"/>
                        </Grid>
                    </ControlTemplate>

The following screenshot shows the customized Selection border.