Rounded Corner Window (WPF Series Part 1)

I hope all of you .net coders out there are using WPF (Windows Presentation Foundation) for your desktop development and not the good old windows form. WPF makes it really easy to come up with great looking user interfaces. We believe Microsoft may eventually phase out windows forms in future releases of VS.NET. We have completely switched to WPF for desktop development in our company.

My journey with WPF started when I joined ‘PALEWAR TECHNO SOLUTIONS’.  The first task that I got was rounding the corners of  the window. Exploring how to make a curved window was very interesting and its just few lines of XAML(Extensible Application Markup Language). A Window can be shaped in any way you can imagine using WPF.

In this post lets see how we can create a window with rounded corners.

We start a WPF Application project in Visual Studio (I am using VS 2008). We get a window and a grid control already setup for us and our XAML will look something like this:

<Window x:Class="WpfWindowSidesCurved.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300">
<Grid>
</Grid>
</Window>

Grid is our container for all the controls but since we can not make its corners rounded we add a Rectangle control and place all the controls on top of it. Now we just go to Properties window for the Rectangle and change 2 properties. We set RadiusX = 30 and RadiousY=30 to get rounded corners for our rectangle. We also need to give a color to our Rectangle, so we also set Fill=BurlyWood. You can select any color your like for your rectangle.

Now we have our Rectangle with rounded corners but our window is visible behind it so it does not look like we want. So we just need to make our window transparent and our rectangle will start looking like a window to the user. To achieve this we change a few properties for our window control. We set WindowStyle=None, AllowsTransparency=True and Background=Transparent and we are done. Whatever we do in design gets reflected in our XAML, we can directly change XAML as well to change our design.

Our final XAML for our window will look like this:

<Window x:Class="WpfWindowSidesCurved.Window1"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="468" Width="650" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True" Background="Transparent">
<Grid>
<Rectangle Stroke="Black" RadiusX="30" RadiusY ="30" Name="RectangleSidesCurved" Fill="BurlyWood"/>
</Grid>
</Window>

And the output window will look like this image below:

Watch out for my next post where we will talk about using a gradient background instead of a plain color like above.

Happy Coding.