Click here to Skip to main content
15,867,686 members
Articles / Programming Languages / C#
Article

Drop-dead easy layout management

,
Rate me:
Please Sign up or sign in to vote.
4.33/5 (15 votes)
3 Sep 2006CPOL2 min read 99.7K   2.2K   63   29
Flexible control repositioning and resizing with an easy-to-use layout manager.

Introduction

This article describes LayoutManager, a lightweight class that lets you easily reposition and resize controls when the size of their container changes.  Although the .NET framework provides out-of-the-box support for anchoring (and consequently automated layout management), we prefer to use a class that is absurdly flexible and something we understand intuitively.  LayoutManager replaces terminology such as "table layout", "grid-bag layout", "rubber layout", etc. with four simple adjustments on a control's edge:
  • adjust left percentage
  • adjust top percentage
  • adjust right percentage
  • adjust bottom percentage
The ability to use any (or all) of these adjustments in response to a resize operation allows you to implement any type of reposition/resize logic that can be freely changed at run time.

LayoutManager in action

How to use LayoutManager

You use LayoutManager by:
  1. initializing it
  2. giving it controls to manage
  3. calling its alignItems() method within your container's SizeChanged event handler
Steps 1 and 2 are usually performed in your form's constructor but can just as well be added to the Load event handler.
C#
// Step 1: Initialize the layout manager
m_layoutMgr.init (this);
Controls to be managed by LayoutManager are added as instances of LayoutManagerItems, each of which refer to a control and how it should be repositioned and/or resized.  You can add, remove and modify LayoutManagerItems at any time during the execution of your program.
C#
// Step 2: Add controls to the layout manager
m_layoutMgr.Items.Add
  (new LayoutManagerItem
    (m_editTitle,         // the control
     0,                   // don't change L edge
     0,                   // don't change top edge
     100,                 // grow width by 100% of change
     66));                // grow height by 66% of change
...
Finally, your form's SizeChanged event handler instructs the layout manager to align its items.
C#
private void LayoutManagerDemoFrm_SizeChanged
  (object sender, EventArgs e)
{
  // Step 3: Instruct the layout manager to align items
  m_layoutMgr.alignItems();
}

How it works

LayoutManager works by saving the container's orginal size (within init()), computing the change in the container's width and height and applying adjustments to each item under its control according to the item's adjustment rules (within alignItems()).

LayoutManagerItem encapsulates a reference to the control to be repositioned or resized, and four boolean properties that describe the adjustment to be performed.  LayoutManagerItems are stored in LayoutManager's Items property.

LayoutManager classes

Revision history

  • 3 Sep 2006
    Added ability to control percentage of change in dimensions.
    -- Eddie Zhou, Ravi Bhavnani
  • 1 Jul 2006
    Initial version.
    -- Ravi Bhavnani

License

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


Written By
Technical Lead
Canada Canada
Ravi Bhavnani is an ardent fan of Microsoft technologies who loves building Windows apps, especially PIMs, system utilities, and things that go bump on the Internet. During his career, Ravi has developed expert systems, desktop imaging apps, marketing automation software, EDA tools, a platform to help people find, analyze and understand information, trading software for institutional investors and advanced data visualization solutions. He currently works for a company that provides enterprise workforce management solutions to large clients.

His interests include the .NET framework, reasoning systems, financial analysis and algorithmic trading, NLP, HCI and UI design. Ravi holds a BS in Physics and Math and an MS in Computer Science and was a Microsoft MVP (C++ and C# in 2006 and 2007). He is also the co-inventor of 3 patents on software security and generating data visualization dashboards. His claim to fame is that he crafted CodeProject's "joke" forum post icon.

Ravi's biggest fear is that one day he might actually get a life, although the chances of that happening seem extremely remote.

Written By
Web Developer
United States United States
Eddie Zhou

Comments and Discussions

 
QuestionThanks for sharing. Pin
Member 119396929-Aug-11 6:55
Member 119396929-Aug-11 6:55 
AnswerRe: Thanks for sharing. Pin
Ravi Bhavnani31-Aug-11 1:28
professionalRavi Bhavnani31-Aug-11 1:28 
Generalresize issue Pin
Ashar Shah13-Dec-09 23:53
Ashar Shah13-Dec-09 23:53 
GeneralRe: resize issue Pin
Ravi Bhavnani14-Dec-09 2:57
professionalRavi Bhavnani14-Dec-09 2:57 
GeneralCommercial Layout Manager Pin
vkhaitan6-Sep-08 19:38
vkhaitan6-Sep-08 19:38 
QuestionWhat about TableLayoutPanel? Pin
Riz Thon4-Mar-08 2:32
Riz Thon4-Mar-08 2:32 
GeneralRe: What about TableLayoutPanel? Pin
Ravi Bhavnani4-Mar-08 2:44
professionalRavi Bhavnani4-Mar-08 2:44 
QuestionFlicker with tab control Pin
David McMinn13-Feb-08 5:23
David McMinn13-Feb-08 5:23 
GeneralRe: Flicker with tab control Pin
lobotomoy4-Apr-08 8:49
lobotomoy4-Apr-08 8:49 
GeneralRe: Flicker with tab control Pin
David McMinn9-Apr-08 6:45
David McMinn9-Apr-08 6:45 
GeneralPositioning controls with respect to another controls Pin
V-I-C-K-Y31-Jan-07 21:16
V-I-C-K-Y31-Jan-07 21:16 
GeneralA Small bug maybe Pin
hnkaraca793-Sep-06 20:35
hnkaraca793-Sep-06 20:35 
AnswerRe: A Small bug maybe Pin
Ravi Bhavnani4-Sep-06 3:00
professionalRavi Bhavnani4-Sep-06 3:00 
GeneralRe: A Small bug maybe Pin
hnkaraca794-Sep-06 4:24
hnkaraca794-Sep-06 4:24 
GeneralRe: A Small bug maybe Pin
Ravi Bhavnani4-Sep-06 4:30
professionalRavi Bhavnani4-Sep-06 4:30 
GeneralRe: A Small bug maybe Pin
hnkaraca794-Sep-06 20:16
hnkaraca794-Sep-06 20:16 
GeneralRe: A Small bug maybe Pin
Eddie Zhou5-Sep-06 4:35
Eddie Zhou5-Sep-06 4:35 
AnswerRe: A Small bug maybe - an easy solution? Pin
Gavin Jerman17-Sep-06 12:01
Gavin Jerman17-Sep-06 12:01 
GeneralRe: A Small bug maybe - an easy solution? Pin
Ravi Bhavnani17-Sep-06 12:07
professionalRavi Bhavnani17-Sep-06 12:07 
GeneralRe: A Small bug maybe - an easy solution? Pin
Gavin Jerman17-Sep-06 12:24
Gavin Jerman17-Sep-06 12:24 
Your welcome, and thanks for the excellent class in the first place Big Grin | :-D

Gavin
GeneralRe: A Small bug maybhttp://www.codeproject.com/script/images/news_general.gife - an easy solution? Pin
Eddie Zhou18-Sep-06 3:22
Eddie Zhou18-Sep-06 3:22 
GeneralThanks! Pin
mattbrindley3-Sep-06 7:56
mattbrindley3-Sep-06 7:56 
GeneralRe: Thanks! Pin
Ravi Bhavnani3-Sep-06 8:07
professionalRavi Bhavnani3-Sep-06 8:07 
GeneralRe: Thanks! Pin
Pete Goodsall20-Jun-07 5:36
Pete Goodsall20-Jun-07 5:36 
GeneralRe: Thanks! Pin
Ravi Bhavnani20-Jun-07 8:53
professionalRavi Bhavnani20-Jun-07 8:53 

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.