Click here to Skip to main content
Click here to Skip to main content

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.

Introduction

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.

Background

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:
RelativeLayout.Remove(myButton);
//  or position instance :
RelativeLayout.Remove(position);

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
myContainer.Controls.Add(myButton);

// force invalidation :

RelativeLayout.ReplaceContainer(myContainer); 

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

Vertical

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

Horizontal

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

Size

  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.

Summary

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.

License

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

About the Author

turbosqel
Software Developer
Poland Poland
No Biography provided

Comments and Discussions

 
QuestionNice work but... PinmemberKlaus Luedenscheidt12-Nov-12 18:58 
AnswerRe: Nice work but... Pinmemberturbosqel12-Nov-12 19:38 
GeneralRe: Nice work but... PinmemberKlaus Luedenscheidt14-Nov-12 18:37 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 14 Nov 2012
Article Copyright 2012 by turbosqel
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid