Click here to Skip to main content
6,629,885 members and growing! (21,735 online)
Email Password   helpLost your password?
Desktop Development » Miscellaneous » Miscellaneous Controls     Intermediate License: The Code Project Open License (CPOL)

Drop-dead easy layout management

By Ravi Bhavnani, Eddie Zhou

Flexible control repositioning and resizing with an easy-to-use layout manager.
C#, Windows, .NET, Visual Studio, Dev
Posted:30 Jun 2006
Updated:3 Sep 2006
Views:36,762
Bookmarked:49 times
Announcements
Loading...
 
Search    
Advanced Search
Add to IE Search
printPrint   add Share
      Discuss Discuss   Broken Article?Report  
13 votes for this article.
Popularity: 3.99 Rating: 3.58 out of 5
2 votes, 15.4%
1
1 vote, 7.7%
2
2 votes, 15.4%
3
1 vote, 7.7%
4
7 votes, 53.8%
5

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.
  // 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.
  // 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.
  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)

About the Authors

Ravi Bhavnani


Member
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, enterprise marketing automation software, EDA tools, a platform to help people find, analyze and understand information, and trading software for institutional investors. He currently works for a company that provides advanced data visualization solutions for Microsoft technologies.

His interests include the .NET framework, reasoning systems, financial analysis and algorithmic trading, NLP, CHI and UI design. Ravi holds a BS in Physics and Math and an MS in Computer Science and is a Microsoft C# MVP. 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.
Occupation: Software Developer (Senior)
Company: Dundas Software
Location: Canada Canada

Eddie Zhou


Member
Eddie Zhou
Occupation: Web Developer
Location: United States United States

Other popular Miscellaneous articles:

Article Top
You must Sign In to use this message board.
FAQ FAQ 
 
Noise Tolerance  Layout  Per page   
 Msgs 1 to 25 of 25 (Total in Forum: 25) (Refresh)FirstPrevNext
GeneralCommercial Layout Manager Pinmembervkhaitan20:38 6 Sep '08  
QuestionWhat about TableLayoutPanel? PinmemberRiz Thon3:32 4 Mar '08  
GeneralRe: What about TableLayoutPanel? PinmemberRavi Bhavnani3:44 4 Mar '08  
QuestionFlicker with tab control PinmemberDavid McMinn6:23 13 Feb '08  
GeneralRe: Flicker with tab control Pinmemberlobotomoy9:49 4 Apr '08  
GeneralRe: Flicker with tab control PinmemberDavid McMinn7:45 9 Apr '08  
GeneralPositioning controls with respect to another controls PinmemberV-I-C-K-Y22:16 31 Jan '07  
GeneralA Small bug maybe Pinmemberhnkaraca7921:35 3 Sep '06  
AnswerRe: A Small bug maybe PinmemberRavi Bhavnani4:00 4 Sep '06  
GeneralRe: A Small bug maybe Pinmemberhnkaraca795:24 4 Sep '06  
GeneralRe: A Small bug maybe PinmemberRavi Bhavnani5:30 4 Sep '06  
GeneralRe: A Small bug maybe Pinmemberhnkaraca7921:16 4 Sep '06  
GeneralRe: A Small bug maybe PinmemberEddie Zhou5:35 5 Sep '06  
AnswerRe: A Small bug maybe - an easy solution? PinmemberGavin Jerman13:01 17 Sep '06  
GeneralRe: A Small bug maybe - an easy solution? PinmemberRavi Bhavnani13:07 17 Sep '06  
GeneralRe: A Small bug maybe - an easy solution? PinmemberGavin Jerman13:24 17 Sep '06  
GeneralRe: A Small bug maybhttp://www.codeproject.com/script/images/news_general.gife - an easy solution? PinmemberEddie Zhou4:22 18 Sep '06  
GeneralThanks! Pinmembermattbrindley8:56 3 Sep '06  
GeneralRe: Thanks! PinmemberRavi Bhavnani9:07 3 Sep '06  
GeneralRe: Thanks! PinmemberClevedon_Peanut6:36 20 Jun '07  
GeneralRe: Thanks! PinmemberRavi Bhavnani9:53 20 Jun '07  
GeneralAdvanced Layout Management Pinmembertonyt20:22 30 Jun '06  
GeneralRe: Advanced Layout Management PinmemberRavi Bhavnani4:55 1 Jul '06  
AnswerRe: Advanced Layout Management PinmemberRavi Bhavnani8:27 3 Sep '06  
GeneralRe: Advanced Layout Management PinmemberChristoph Weber23:28 3 Sep '06  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 3 Sep 2006
Editor: Ravi Bhavnani
Copyright 2006 by Ravi Bhavnani, Eddie Zhou
Everything else Copyright © CodeProject, 1999-2009
Web20 | Advertise on the Code Project