Rounded Corner Datagrid In WPF


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.

Related Posts:

1) Making Timeline Control for DataGrid In WPF

2) Custom Gridline Color of Datagrid In WPF

3) Custom Row and Header Height of Datagrid In WPF

4) Tooltip In DataGrid In WPF

5) Grouping In Datagrid In WPF

6) Cell Alignment In DataGrid In WPF

7) Edit Row Details In Context Menu In DataGrid In WPF

8) Hide/Un-Hide Columns Using Context Menu In DataGrid In WPF

9) Hide &Un-Hide DataGrid Column(s) In WPF

10) ComboBox In DataGrid In WPF

11) DatePicker In DataGrid In WPF

12) CRUD Operation In DataGrid In WPF