Month: December 2011

How to create a custom window

Introduction

After ending of a terrible semester, I decided to start blogging again. During our projects in campus we had to create applications for various purposes, and I’ve used Window type forms like this in many times.

But I was looking for something different. Why can’t you create a form in a shape you wish? That was really difficult in past. You had to know the underlying technology about Window type form. But with improvements in technology, today it has become so easy. Here are two forms I’ve created.

So you may also interested in doing things like this. So let me show a quick guide to do it. For these forms I used Microsoft Expression Blend 3 for designing purposes and Microsoft Visual C# for giving logic.

First of all I’ll introduce two new terms that are going to use.

WPF– the Windows Presentation Foundation is Microsoft next generation UI framework to create applications with a rich user experience. It is part of the .NET framework 3.0 and higher. WPF combines application UIs, 2D graphics, 3D graphics, documents and multimedia into one single framework.

XAML-the Extensible Application Markup Language which specifies the appearance.

How to do it

1. Create a customized window.

Open Expression blend. Go to File -> New project and start a new WPF Application. Now Select “Window” from “Objects and Timeline” section. Then select “Properties” from the panel that appears on the right. Go to “Appearance” section in that panel and tick “Allows Transparency” property. Then in “Brushes” section, for “Background” select “No brush”.  That is the trick used to hide conventional window form.

Now you can create your own window using “Rectangle”, “Ellipse” tools provided in tool bar. Make sure your drawing is within the “Window” range. Else you can resize the “Window” size. Finally go to Projects -> Run Project to view result. I’m sure you may not happy as you get a static image in the middle of the screen. This will solve in next two sections.

2. Create a customized button

Draw the shape of the button using “Rectangle”, “Ellipse” tools. Right click on it and select “Make Into Control …”. From the window you get click “Button” and click “ok”. That’s it. This will turn your drawing in to a button.

Meanwhile remember that Blend also provides regular type of buttons that you see in many applications. This method is to make your drawing into a button.

3. Coding

This is the part which gives the life to our drawings.

First give a name to the button you created. Just type the name in “Name” property at “Properties” panel. Then click “Events” button. Give a name for event you want (in here Click event is named as “Clicked”) and press Enter key.

You will get a .cs file, which provides space to enter your C# logic code.

So those are the steps for a basic application. But there’s more you can do. Creativity is the limit. Hope you will do more creative UI’s and enjoy! 😀

PS: I haven’t found a way to do this type of stuff with Java. If someone know,  please share it here.

Resources

  1. Download Microsoft Expression Blend – http://www.microsoft.com/expression/products/Blend_Overview.aspx
  2. Kirupa tutorials – http://www.kirupa.com/blend_wpf/index.htm
  3. WPF tutorials – http://www.wpftutorial.net/Home.html
  4. DotNetCurry – http://www.dotnetcurry.com/ShowArticle.aspx?ID=348
Advertisements