Drop-dead easy layout management

Ravi Bhavnani, Eddie Zhou

Rate me:

4.33/5 (15 votes)

3 Sep 2006CPOL2 min read

100.4K

2.2K

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.

How to use LayoutManager

You use LayoutManager by:

initializing it
giving it controls to manage
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.

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

Ravi Bhavnani

Technical Lead

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

Eddie Zhou

Web Developer

United States

Eddie Zhou

public class LayoutManager { #region Properties /// <summary> /// Gets the LayoutManager's collection of items. /// </summary> public ArrayList Items { get { return m_items; } } #endregion #region Operations /// <summary> /// Initializes the layout manager. /// </summary> /// <param name="container">Container control.</param> public void init(Control container) { // Cache the operating context and initial dimensions m_container = container; m_nWidth = container.Width; m_nHeight = container.Height; } /// <summary> /// Aligns the items under the layout manager's control. /// </summary> public void alignItems() { // Ignore action if container has been minimized if (m_container is Form) { Form f = m_container as Form; if (f.WindowState == FormWindowState.Minimized) return; } // Compute change in dimensions int nDeltaWidth = m_container.Width - m_nWidth; int nDeltaHeight = m_container.Height - m_nHeight; // Align controls foreach (LayoutManagerItem lim in m_items) { lim.align(nDeltaWidth, nDeltaHeight); } } #endregion #region Fields /// <summary>Layout manager items to be aligned.</summary> ArrayList m_items = new ArrayList(); /// <summary>The container control.</summary> Control m_container = null; /// <summary>Container's initial client width.</summary> int m_nWidth = 0; /// <summary>Container's initial client height.</summary> int m_nHeight = 0; #endregion }

public class LayoutManagerItem { #region Constructor /// <summary> /// Constructs a LayoutManagerItem for a control. /// </summary> /// <param name="ctrl">The control.</param> /// <param name="leftAdjustPct">Adjust control's left edge by this %age change in container's width.</param> /// <param name="topAdjustPct">Adjust control's top edge by this %age change in container's height.</param> /// <param name="rightAdjustPct">Adjust control's right edge by this %age change in container's width.</param> /// <param name="bottomAdjustPct">Adjust control's bottom edge by this %age change in container's height.</param> public LayoutManagerItem(Control ctrl, uint leftAdjustPct, uint topAdjustPct, uint rightAdjustPct, uint bottomAdjustPct) { // the control m_ctrl = ctrl; // Cache the control's initial coordinates m_left = m_ctrl.Left; m_top = m_ctrl.Top; m_right = m_left + m_ctrl.Width; m_bottom = m_top + m_ctrl.Height; // Cache the control's adjustment percentages m_leftAdjustPct = leftAdjustPct; m_topAdjustPct = topAdjustPct; m_rightAdjustPct = rightAdjustPct; m_bottomAdjustPct = bottomAdjustPct; } #endregion #region Operations /// <summary> /// Repositions/resizes a LayoutManagerItem. /// </summary> /// <param name="nDeltaW">Change in container's initial width.</param> /// <param name="nDeltaH">Change in container's initial height.</param> public void align(int nDeltaW, int nDeltaH) { // Calculate control's new coordinates using initial coordinates int nLeft = m_left + (int)((nDeltaW * m_leftAdjustPct) / 100); int nTop = m_top + (int)((nDeltaH * m_topAdjustPct) / 100); int nRight = m_right + (int)((nDeltaW * m_rightAdjustPct) / 100); int nBottom = m_bottom + (int)((nDeltaH * m_bottomAdjustPct) / 100); // Set control's new coordinates m_ctrl.Left = nLeft; m_ctrl.Top = nTop; m_ctrl.Width = nRight - nLeft; m_ctrl.Height = nBottom - nTop; } #endregion #region Fields /// <summary>The control.</summary> Control m_ctrl = null; /// <summary>Percentage by which control's left edge should be adjusted.</summary> uint m_leftAdjustPct = 0; /// <summary>Percentage by which control's top edge should be adjusted.</summary> uint m_rightAdjustPct = 0; /// <summary>Percentage by which control's right edge should be adjusted.</summary> uint m_topAdjustPct = 0; /// <summary>Percentage by which control's bottom edge should be adjusted.</summary> uint m_bottomAdjustPct = 0; /// <summary>Control's initial left position</summary> public int m_left = 0; /// <summary>Control's initial top position</summary> public int m_top = 0; /// <summary>Control's initial right position</summary> public int m_right = 0; /// <summary>Control's initial bottom position</summary> public int m_bottom = 0; #endregion }

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