Rounded Corner Datagrid in WPF

Introduction

In this article we will see how we can make a rounded corner datagrid in WPF.

Creating WPF Application

Fire up Visual Studio 2010 and create a WPF Application, name the solution as RoundedDatagrid.



Open the solution in Expression Blend 4.

First we need to draw a Border with required value for Corner Radius, in our case we are taking 15.

Then we need to add a Grid to the Parent Border, and a Border inside the Grid.



The child Border should have the same Corner Radius as of the parents. Note that the child Border should contain a Background Brush, except Transparent as value.



Now add a Datagrid to the Grid.



Now go back to the Visual Studio.

Add the child Border (BDRounded) as the VisualBrush of the OpacityMask property, as displayed below.




Now we are good to go, run the application and see the rounded corner for the Datagrid.




To have a good look and feel remove the border brushes and the Border Brush from the Datagrid too, then add a DropShadow Bitmap effect to the parent Border, and it would look good.



Now if you run the application, you would see the effect.



Let's have some sample data and then you would see the real effect.

Use HeadersVisibility to Column.





You can color the Headers and the rows to fulfil your requirement.

Hope this article helps.