How to customize DataGrid to have round corner?

[Phil Nguyen]

I would like to have rounded corner for the Datagrid but not sure how to do it.

[Rabina Murugan]

Hi Phil Nguyen,

We have investigated the reported scenario and would like to clarify that there is no direct way to apply rounded corners to the SfDataGrid. However, your requirement can be achieved by customizing the style template of the DataGrid and applying a corner radius.

Code snippet to apply corner radius in style template:

 <Style x:Key="SfDataGridStyle" TargetType="dataGrid:SfDataGrid">
 …

 …

 …

 <Border Grid.Row="1"

         Background="{TemplateBinding Background}"

         BorderBrush="{TemplateBinding BorderBrush}"

         BorderThickness="{TemplateBinding BorderThickness}"

         CornerRadius="12">

 

     <ScrollViewer x:Name="PART_ScrollViewer"

        BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"

        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"

        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"

        IsDeferredScrollingEnabled="False"

        IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"

        IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"

        IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"

        IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"

        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"

        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"

        ZoomMode="Disabled">

      

         <dataGrid:VisualContainer x:Name="PART_VisualContainer"

                     Background="Transparent"

                     HortizontalScrollBarOffset="{Binding Path=HorizontalOffset,

                                                          ElementName=PART_ScrollViewer,

                                                          Mode=OneWay}"

                     ManipulationMode="{TemplateBinding ManipulationMode}"

                     VerticalScrollBarOffset="{Binding Path=VerticalOffset,

                                                       ElementName=PART_ScrollViewer,

                                                       Mode=OneWay}" >

             <Line x:Name="PART_HorizontalLine"/>

             <Line x:Name="PART_VerticalLine"/>

         </dataGrid:VisualContainer>

     </ScrollViewer>

 </Border>

 …

 …

 …
</Style>

Image illustration of SfDataGrid with rounded corners:

Find a sample demo in the attachment.

Please let us know if you need any further assistance.

Regards,

Rabina M

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

Attachment: SfDataGrid_RoundedCorner_3a8ef72d.zip