Szymon Kobalczyk's Blog

A Developer's Notebook

  Home  |   Contact  |   Syndication    |   Login
  106 Posts | 6 Stories | 578 Comments | 365 Trackbacks

News

View Szymon Kobalczyk's profile on LinkedIn

Twitter












Tag Cloud


Article Categories

Archives

Post Categories

Blogs I Read

Tools I Use

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

Feedback

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 6/21/2006 1:57 AM Thomas Williams
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

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 8/1/2006 12:18 PM Krys
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

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 8/1/2006 12:22 PM Szymon
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

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 8/11/2006 12:39 AM Chris Reickenbacker
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>

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

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



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

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

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 3/22/2007 4:56 PM Darth_Krizan
"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



# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 3/27/2007 1:49 PM Steffen
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.

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 3/27/2007 4:24 PM Steffen
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?

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 7/5/2007 11:05 AM Ebbe Hundborg
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?

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 7/15/2007 10:32 AM Szymon
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.

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 4/2/2008 7:57 PM habib
Thank you

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 4/22/2009 3:32 AM Morkie
Can you send me plss..that Drawing Custom Borders?

The download link was an error....

rodney_322@yahoo.com

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

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 8/28/2009 5:53 PM Bobby
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


# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 9/3/2009 1:30 AM rono
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


# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 12/27/2009 8:26 AM lykimhout
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

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 1/3/2010 11:02 PM tarun
No Links Worked

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

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

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

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 4/28/2011 3:03 AM Maaz
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?

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

# re: Drawing Custom Borders in Windows Forms,<br />Part Three: Introducing Form Styles 11/28/2011 3:33 PM Dietrich
Your links for downloading something are dead!!

Regards-
Dietrich

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

# Download Link 4/17/2012 8:54 PM Shark
here is the download.. it is up in the comments...
http://www.codeplex.com/CustomerBorderForm


Post A Comment
Title:
Name:
Email:
Comment:
Verification: