Click here to Skip to main content
Click here to Skip to main content
Go to top

Shaped WPF Form

, 24 Jun 2010
Rate this:
Please Sign up or sign in to vote.
Shaping WPF Form using an Image

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 Smile | :) ).
  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.

Selection.png

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

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. Smile | :)

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

  • 24th June, 2010: Initial post

License

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

Share

About the Author

Amit Kumar Tiwari
Technical Lead
India India
I am module lead with experience in Microsoft Technologies like .NET, SharePoint etc.
Follow on   Google+

Comments and Discussions

 
QuestionNice Work Pinmemberhoob computer3-Nov-13 19:14 
GeneralMy vote of 5 Pinmembermanoj kumar choubey4-Apr-12 23:50 
QuestionIs it possible to change the Shape.PNG to Shape1.PNG PinmemberMember 83268216-Dec-11 11:05 
AnswerRe: Is it possible to change the Shape.PNG to Shape1.PNG Pinmemberemarti28-Dec-11 12:53 
GeneralMy vote of 5 Pinmembercsharpbd16-Nov-11 20:30 
GeneralMy vote of 5 Pinmemberayad0net9-Aug-11 11:17 
GeneralGood trick man... PinmvpAbhishek Sur30-Jun-10 22:27 
GeneralRe: Good trick man... PinmemberAmit Kumar Tiwari5-Jul-10 17:35 
GeneralVery practical PinmemberRabinDl24-Jun-10 10:37 
GeneralRe: Very practical PinmemberAmit Kumar Tiwari5-Jul-10 17:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 24 Jun 2010
Article Copyright 2010 by Amit Kumar Tiwari
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid