Click here to Skip to main content
15,867,308 members
Articles / Desktop Programming / WPF

Shaped WPF Form

Rate me:
Please Sign up or sign in to vote.
5.00/5 (17 votes)
24 Jun 2010CPOL2 min read 88.2K   6.5K   77   11
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 :)).
  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. :)

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:
XML
<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

  • 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)


Written By
Technical Lead
United States United States
I am a developer in Microsoft Technologies like .NET, SharePoint etc.

Comments and Discussions

 
GeneralShaped WPF Form Pin
Member 77365903-Aug-16 5:10
Member 77365903-Aug-16 5:10 
QuestionNice Work Pin
hoob computer3-Nov-13 19:14
hoob computer3-Nov-13 19:14 
nice work Smile | :)
GeneralMy vote of 5 Pin
Manoj Kumar Choubey4-Apr-12 23:50
professionalManoj Kumar Choubey4-Apr-12 23:50 
QuestionIs it possible to change the Shape.PNG to Shape1.PNG Pin
Member 83268216-Dec-11 11:05
Member 83268216-Dec-11 11:05 
AnswerRe: Is it possible to change the Shape.PNG to Shape1.PNG Pin
emarti28-Dec-11 12:53
emarti28-Dec-11 12:53 
GeneralMy vote of 5 Pin
csharpbd16-Nov-11 20:30
professionalcsharpbd16-Nov-11 20:30 
GeneralMy vote of 5 Pin
ayad0net9-Aug-11 11:17
ayad0net9-Aug-11 11:17 
GeneralGood trick man... Pin
Abhishek Sur30-Jun-10 22:27
professionalAbhishek Sur30-Jun-10 22:27 
GeneralRe: Good trick man... Pin
Wild-Programmer5-Jul-10 17:35
Wild-Programmer5-Jul-10 17:35 
GeneralVery practical Pin
RabinDl24-Jun-10 10:37
RabinDl24-Jun-10 10:37 
GeneralRe: Very practical Pin
Wild-Programmer5-Jul-10 17:34
Wild-Programmer5-Jul-10 17:34 

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

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