Geeks With Blogs

News
View Szymon Kobalczyk's profile on LinkedIn

Szymon Kobalczyk's Blog A Developer's Notebook

Almost a year ago I've published first two articles titled "Drawing Custom Borders in Windows Forms" and they turned out to be the most successful part of my blog with almost 13 000 web views (however barely 2 000 people made through to the second part), 86 comments and almost 3 000 downloads till date. If so many people seem to be interested I guess it's about time to give you something new.

I've been using this code in my own project for a while and was always told how cool it looks compared to other applications. However, there were also some people asking why wouldn't we do a full skinning engine and let people choose the skins themselves. Until now, I was excusing myself that there is no more time for such nonsense. What changed my mind? If you are using Infragistics NetAdvantage you already know what's coming from them in next release. In short I've got inspired by what they've done and in order not to fell behind I've decided to add my own skin support.

Using FormStyleManager

My latest release (which you can already download here) introduces new component called FormStyleMager. It's a central place that defines styles available for all forms in your application. The idea is that when you have multiple forms using the same styling you can define this style in only one place and reuse on every form. For this reason FormStyleManager maintains a library of available FormStyles. Whats more this library can be load and saved to file. This allows the application to have multiple skins that can be changed at runtime.

In order to load a style library you use the static Load method of the FormStyleManager. For example to load default style library for your application you can put following line in it's Main method:

FormStyleManager.Load("MyLibrary.fsl"); 

After that you can apply styles from this library to any form that inherits from the CustomBorderForm class. To do this you only need to set the UseFormStyleManger property to true. Optionally, you can specify which style to apply to this particular form using the FormStyleName property or leave it empty so that form uses the default style. 

However, if you don't want to use FormStyleLibraries you can still create a single FormStyle (earlier called CustomBorderAppearance) in your code as before. In previous versions it was done by overriding the CreateBorderAppearance property. Now this can be done at any time by assigning your style to FormStyle property. In this case don't forget to leave UseFormStyleManager property set to false.

Using FormStyleEditor

But what's the point of having a style manager when you couldn't edit the styles. So my other task was creating the FormStyleEditor. And here it is:

Form Style Editor

The editor is designed not as separate application as one might expect, but as a component that you use inside of your own application. This has such advantage that when you design your style you can immediately see how it applies to your application. The editor comes packaged as a component that you drop on your form. Later you can lunch the editor (from some button, magic key combination or simply form's Load event) by calling the ShowFormEditor method.

The window shows contents of currently loaded style library so if you loaded one already you would see something like on the screen above, but if not you need first to add a new FormStyle which the Add Style button. Starting from left: New button clears the contents of current style library, Open loads style library from file, and Save of course does the opposite (I've choose the .fsl extension and it simply stands for Form Style Library).

As said before the library can contain more then one FormStyle. For example you can design different skins for the main window and for the dialogs or tool windows. Each style is identified by its Name that you can reference using FormStyleName property on any class inheriting from CustomBorderForm. To select which style to edit you use the drop down list next to Active Style label. Add Style button will create additional styles, and Delete Style button of course removes currently selected style from the library.

Below you have two panels: the tree on the left show hierarchy of elements of the active style and the property grid on the right lets you edit the properties of currently selected element. The hierarchy of elements starts on the FormStyle. It has following properties:

Name Name used to identify this style in the library
ClientAreaPadding Padding of the client rectangle relative to window bounds
IconPadding Padding of icon rectangle relative to top-left corner of title bar
TitlePadding Padding of the title rectangle relative to rectangle of title bar
TitleFont Font used to paint window title
TitleColor Color used to paint window title
TitleShadowColor Color used to draw drop shadow behind window title
SizingBorderWidth Offset from window border where window can be sized using a mouse horizontally or vertically
SizingCornerOffset Offset from window corner where form can be sized in both directions
NormalState Image used to paint background on forms non client area
CloseButton Style for window close button
MinimizeButton Style for window minimize button
MaximizeButton Style for window maximize button
RestoreButton Style for window restore button
HelpButton Style for window help button

The FormButtonStyle class defines appearance for the Close, Minimize, Maximize, Restore and Help buttons of the form and has following properties:

Size Size of the button rectangle
Margin Margin around the button rectangle relative to title bar
NormalState Image used to paint button in normal state
ActiveState Image used to paint button in active state
HoverState Image used to paint button in hover state
DisabledState Image used to paint button in disabled state

Last thing that changes with this release is the way the images that are drawn on the border are assembled. Earlier the image drawn in background needed to be cut into 9 pieces and specified one by one. Now you can use single image and instead you specify the stretch margins for the images. These margins specify how this image should be cut into pieces theater would be then used to fill the given screen area. Perhaps this image will better explain how it works:

Stretch Margins

 The red lines represent the StretchMagins for this image. The idea here is that the four pieces cut from the corners are painted exactly the same size as in source image whereas the pieces between the corners running on the horizontal and vertical borders are stretched to fill the remaining space. Also worth noting is that the StretchMargins don't have to be the same as the ClientAreaPadding (like in this example it is slightly bigger to accommodate for the round corners on top).

The same technique is used for painting the form background and all form buttons and it is configured by the SerializableImage class that has following properties:

Image The actual image used to paint the corresponding element.
SizeMode Sizing technique used to draw the image. Available values are Centered, Stretched and Tiled. 
StretchMargins Specifies the rules of dividing image into pieces for the Stretched SizeMode.

* * *

As already mentioned the code is ready for download here so go ahead and experiment with it. It includes a new skin that I've made based on the new WMP 11 (which I love by the way). If you find any bugs or have suggestions for improvements please let me know. Also if you decide to use my library in your project consider sending me a screenshot so I can see how cool it looks. Until then, have fun!

Posted on Sunday, June 18, 2006 9:45 PM | Back to top


Comments on this post: Drawing Custom Borders in Windows Forms,
Part Three: Introducing Form Styles


# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
G'day Szymon -

Thanks for the cool control!

One thing I noticed - even if the close button is disabled or not there, clicking where it should be in the top right-hand corner of the form will close the form.

Cheers,

Thomas
Left by Thomas Williams on Jun 21, 2006 1:57 AM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
Hi,

I have notice a few problems:

1 - when you change of skin, there are some refresh problems
2 - in your skins, behind we can see some part of the original XP window (blue) at the corners.
3 - Do you think you can improve the speed ?

4 - It will be great to be able to add some addition buttons :-)

Great control ;-) Nice Jobs ;-)

Thanks
Left by Krys on Aug 01, 2006 12:18 PM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
Krys,
I'm aware of all these problems and would like to address them shortly. However I'm going for 2 weeks vacations tomorrow so I need to ask you for patience.

Thanks for your interest,
Szymon
Left by Szymon on Aug 01, 2006 12:22 PM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
If somebody can reverse this - to arc at the bottom, then the issues with the edges not being transparent will be fixed. I already fixed the top by changing the diam to 18 from 10 but it needs the same at the bottom of the form to hide those clipped edges.
Thanks,
Chris Reickenbacker
http://reickenbacker.com/
<pre>
protected override void OnResize(EventArgs e)
{
base.OnResize(e);
int diam = 18;
GraphicsPath path = new GraphicsPath();
path.AddArc(0, 0, diam, diam, -90, -90);
path.AddLines(new Point[] {new Point(0,diam), new Point(0, Height),
new Point(Width, Height), new Point(Width, diam)});
path.AddArc(Width - diam, 0, diam, diam, 0, -90);
path.CloseFigure();
this.Region = new Region(path);
}
</pre>
Left by Chris Reickenbacker on Aug 11, 2006 12:39 AM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
Has anyone re-done this in VB.NET 2005?
Left by Kaminari on Sep 01, 2006 9:28 PM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
I've converted the project into VB.NET 2005. So far it works well, but it will need more testing.

Left by captnkebec on Oct 02, 2006 11:34 PM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
How we can draw non client that it is not rectangle, we can a non-client that it is a path .
Left by Reza on Nov 18, 2006 8:20 AM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
Reza,
We have already started working on this. Please see our project at http://www.codeplex.com/CustomerBorderForm.
Left by Szymon on Nov 18, 2006 8:24 AM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
"Has anyone re-done this in VB.NET 2005?"

I would really like to see it in VB.NET 2005!

Could you send me that by mail!! Please!

Darth.Krizan(at)gmail.com

Left by Darth_Krizan on Mar 22, 2007 4:56 PM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
If I use a border size greater than the default Windows border size, every time I minimize and resize die form, it shrinks in width and height.
I have this effect in all versions of your code. I try the same in C++ with MFC and all works fine. So I think the problem is the .NET Framework.
Left by Steffen on Mar 27, 2007 1:49 PM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
I think, I have found the problem, but no solution ...
The Form class handles the WM_WINDOWPOSCHANGED message and (for some reasons) calls the SizeFromClientSize method to calculate the form size. There are two versions of this method in the Form class, one of this is virtual and one is private. Unfortunately the form calls the private one, so you can't override it. And this method calls the native AdjustWindowRectEx method.
So, what can we do?
Left by Steffen on Mar 27, 2007 4:24 PM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
Great article! Really enjoyed it... But I can't download the source code. There seems to be an error on the projectdistributor.net web site - I get an "There is not enough space on the disk." error. Is there a mirror available somewhere?
Left by Ebbe Hundborg on Jul 05, 2007 11:05 AM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
The latest version of the project is available on CodePlex at http://www.codeplex.com/CustomerBorderForm

However I no longer maintain or have intent extend this project.
Left by Szymon on Jul 15, 2007 10:32 AM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
Thank you
Left by habib on Apr 02, 2008 7:57 PM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
Can you send me plss..that Drawing Custom Borders?

The download link was an error....

rodney_322@yahoo.com
Left by Morkie on Apr 22, 2009 3:32 AM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
How can i modify my styleborder in Editor not in Runtime?
Left by Morkie on Apr 23, 2009 3:01 AM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
Hi,

This problem is giving me a lot of head each lately. I appreciate your initiative.
Looks like you did a nice job with this library. I will very much like to test your library.
The download link is not working. Please send a copy of the library to my email address. (bobby.j.ads@gmail.com)

Thanks,
Bobby
Left by Bobby on Aug 28, 2009 5:53 PM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
when I resize the form,the client area can't repaint by itself,I find if I comment out line : "FormWithNonClientArea.PaintNonClientArea().NativeMethods.ReleaseDC(this.Handle, hDC);" It done!
why? thanks
Left by rono on Sep 03, 2009 1:30 AM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
when i clicked the download here it doesn't provide me the application (The resource cannot be found)
can any one send the application to my email lykimhout@gmail.com.
I really need it.
Please help me for this.

thank,
Kimhout
Left by lykimhout on Dec 27, 2009 8:26 AM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
No Links Worked
Left by tarun on Jan 03, 2010 11:02 PM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
Unable to download.
projectdistributor.net does not exist anymore.
Left by N/A on Jan 13, 2010 8:37 PM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
Downlnad link is dead... Can someone please upload it and share a link?
Left by IlanF on Jun 17, 2010 11:42 PM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
the link for download is broken.. can someone give us a link instead?
Left by jayson on Sep 09, 2010 6:19 AM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
Excellent work! I know this post is old but I cant seem to download the code/assembly any more. Are you able to provide an alternate link please?
Left by Maaz on Apr 28, 2011 3:03 AM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
The Download link is broken.
Left by rock on Sep 24, 2011 5:35 AM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
Your links for downloading something are dead!!

Regards-
Dietrich
Left by Dietrich on Nov 28, 2011 3:33 PM

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles
Requesting Gravatar...
As said before, the download link is broken. Can someone who has it please provide an alternative link?
Left by Styx on Feb 10, 2012 3:09 PM

# Download Link
Requesting Gravatar...
here is the download.. it is up in the comments...
http://www.codeplex.com/CustomerBorderForm
Left by Shark on Apr 17, 2012 8:54 PM

Your comment:
 (will show your gravatar)


Copyright © Szymon Kobalczyk | Powered by: GeeksWithBlogs.net | Join free