Click here to Skip to main content
13,287,856 members (53,435 online)
Click here to Skip to main content
Add your own
alternative version


11 bookmarked
Posted 12 Nov 2012

Relative Design Components on WinForm

, 14 Nov 2012
Rate this:
Please Sign up or sign in to vote.
Simple code to make your components always fit exact size of Form, during and after resize.


I would like to present a simple library that helps a lot with relative design of application. This is a lightweight and quick to implement class, that does resizing and repositioning for you. The code is a result of experience with Flash Platform development in ActionScript 3.


We all know such basic WinForm params like Top, Left, Right, Bottom, but this is definitely not enough and when size is changed, each component must be replaced by additional code lines.

Anyone who also uses Flex/FlashBuilder will see similarities between Flex design positioning and Relative Design class, but during development, I add more options to fill missing features.

Using the Code

1. Manage Controls

To add/remove and invoke resizing, use main class RelativeLayout.

Button myButton = new Button();
// adding new control :
Position position = RelativeLayout.Add(myButton);
// remove control by element:
//  or position instance :

2. Invalidate Container

Each child registers parent to RelativeLayout index and when control is resized, on each child Resize function is called:

Button myButton = new Button(); 
Control myContainer = this;
// add item to container

// force invalidation :


Note: When target control changes parent, it will be resized automatically.

3. Setting Position Values

This will be the biggest part that needs to be described. First - all possible values and descriptions:

All values are split in vertical and horizontal (works the same but at different name and direction):


  1. Top; top border
  2. Vertical; center
  3. Bottom; bottom border
  4. RelativeVertical (value between 0 and 1 , 0-100% )


  1. Left; left border
  2. Horizontal; center
  3. Right; right border
  4. RelativeHorizontal (value between 0 and 1, 0-100% )


  1. Width
  2. Height
    (0 and more to set absolute values , between -1 and 0 set relative to parent value )

All values are Floats , because we will need specific value like NaN or fractions to relative to size values. If any value is NaN, that means it is not used in repositioning.

Note: RelativeHorizontal/RelativeVertical is overriding Horizontal/Vertical values.

Setting is simple, what we set, this is going to be used, so let's look at some examples below:

// set item that will align to right , top and has always 1/10 size of container :
Position pos1 = RelativeDesigne.Add(myControl);
pos1.Right = 0;
pos1.Width = -0.1f;
pos1.Top = 0;

// align to center and always has 20 pixels width :
Position pos2 = RelativeDesigne.Add(myControl);
pos2.Horizontal = 0;
pos2.Vertical = 0;
pos2.Width = 20;

// always 25% of horizontal size , offset from right and bottom to center :
Position pos3 = RelativeDesigne.Add(myControl); 
pos3.Right = 10;
pos3.Vertical = 0;
pos3.Bottom = 0;
pos3.Width = -0.25f;

// align horizontal to 20% of screen on vertical offset :
Position pos4 = RelativeDesigne.Add(myControl);
pos4.RelativeHorizontal = 0.2f;
pos4.Vertical = 20; 
Now a Little Theory

Left is setting space from left border, but when you set left and right values, target control will start on left offset and end on right offset. Same with setting center value and border, component will be placed between offsets.

Center values have two options relative or absolute. When using relative (like RelativeHorizontal), do not forget about specifying the correct float, between 0-1. Absolute value provides offset, positive to right or bottom of center, negative values move element to top and left. When using center values , component align is moved to center.


In simple words, to use the library, add component to list, get its Position object, set position and size values. That's all!

Points of Interest

That is a cool small item I would like to share. It will be nice to have any feedback about issues, requested features or such things. Feel free to email me.


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


About the Author

Software Developer
Poland Poland
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionNice work but... Pin
Klaus Luedenscheidt12-Nov-12 19:58
memberKlaus Luedenscheidt12-Nov-12 19:58 
AnswerRe: Nice work but... Pin
turbosqel12-Nov-12 20:38
memberturbosqel12-Nov-12 20:38 
GeneralRe: Nice work but... Pin
Klaus Luedenscheidt14-Nov-12 19:37
memberKlaus Luedenscheidt14-Nov-12 19:37 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171207.1 | Last Updated 14 Nov 2012
Article Copyright 2012 by turbosqel
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid