Shaped WPF Form

• Download source - 304.41 KB

Introduction

Hello WPF lovers. With the invent of unified API language such as WPF, it has become very easy to enrich user interface. Creating rich user interface is just a thought away. All you need to have is a creative mind and latest technological blend. WPF and Expression Blend are very useful in making rich UI applications, crispy graphics and pretty good animation.

Background

What I am going to post is about shaping a window rectangular form to the shape of an image. It can be any image, any shape, any size just that it should be PNG (Portable Network Graphics) image with no background (white background removed).

Using the Code

Well, achieving this is a piece of cake but still I will provide a complete walkthrough process.

Prerequisites

1. .NET FrameWork 3.0 or above
2. Visual Studio 2008 or above
3. Adobe Photoshop or an image editing tool
4. An image file that you are going to use
5. Knowledge of XAML

Preparing the Image File

1. Select image file that you wish to use as Form shape.
2. Making the image background free is a pretty easy process in most image editing tools, however, I will explain it for Adobe Photoshop (as I love that product :)).
3. Open the image file in Adobe Photoshop.
4. Select the entire image excluding the background.
5. Copy the selection.
6. Click on menu File>>New. This will show a dialog box. In the Content section of the dialog box, select Transparent and click ok.
7. A transparent background canvas will open up, paste your image there and save it as PNG file.

Now our image file is ready, let's shape our WPF Form now. :)

Setting up WPF Application

1. Open Visual Studio 2008 and create new project.
2. Under Visual C# project templates, select Windows>>WPF Application.
3. Use the following XAML:

<window title="ShapedWindow" windowstartuplocation="CenterScreen" 
    allowstransparency="True" opacitymask="White" windowstyle="None" 
    background="Transparent" width="620" height="267" 
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml 
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation 
    x:class="ShapedWPFForm.ShapedWindow">
    <grid>
        <img name="imgBackground" source="Shape.png" stretch="Fill" />
    </grid>
</window>

And that's it, it's done. :)

Let me explain the XAML:

1. allowstransparency="True" - This property makes the Form transparent.
2. background="Transparent" - This property specifies that the background color should be transparent.
3. windowstyle="None" - This property removes the title bar and makes the form borderless. Basically removes all the system controls from the form.
4. opacitymask="White" - This property makes the specified background color invisible from the form.

Done, tutorial is complete. By doing this, you can have an image as form shape. Give creative shape to your forms. Happy designing!

History

• 24^th June, 2010: Initial post

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)