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.

RCorner1.gif

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.

RCorner2.gif

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.

RCorner3.gif

Now add a Datagrid to the Grid.

RCorner4.gif

Now go back to the Visual Studio.

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

RCorner5.gif


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

RCorner6.gif


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.

RCorner7.gif

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

RCorner8.gif

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

Use HeadersVisibility to Column.

RCorner8.1.gif

RCorner9.gif

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

Hope this article helps.