Attaching Elements to Borders

With the XConstraint-class you will be able to attach every border of any element to a border of the parent dialog. This means, if you change the size of the dialog, the size or position (or both) of the attached elements will also change. Normaly, every Element inside a dialog-window was attached to the left, upper corner. If you resize the dialog, the elements stay at their place and nothing changes. With this class, it's possible to attach a button to the right corner of the dialog. When you now resize the dialog, the button moves in the same way the dialog grows.


In this example, the "Test Object" was attached to the right and lower border of the dialog. If you resize the dialog, the object moves, so that the distance to the right and to the lower border of the dialog doesn't change. The four icons in the edges of the dialog are attachted to the according borders of the dialog.

What have you to do, to use this class?

The use the XConstraint-class is quite simple. First you have to declare a XConstraint-object in the headerfile of your dialog-class:

     XConstraint cs;

Second, add a message-handler to message the WM_SIZE-event (use class-wizzard):

     afx_msg void OnSize(UINT nType, int cx, int cy);

Third, set the attachments for every element in your dialog in the OnInitDialog()-Method:

cs.Set(this); // tell the class who is using it

This means:

  • Button1 moves to the right, when the dialog grows and it moves to the left if the dialog is shrinking
  • Button2 grows in the same way the dialog grows
  • Button3 doesn't change it's size, but moves accordingly to the size of the dialog. If button3 appears in the middle of the dialog, it will allway stay in the middle.

The syntax for the Add-command is:
Add(ID, leftAttachment, rightAttachment, topAttachment, bottomAttachment).

The following attachments are possible:

CS_LEFT Attach the specified border of the element to the left border of the dialog. (left and right borders only)
CS_RIGHT Attach the specified border of the element to the right border of the dialog. (left and right borders only)
CS_TOP Attach the specified border of the element to the top border of the dialog. (top and bottom borders only)
CS_BOTTOM Attach the specified border of the element to the bottom border of the dialog. (top and bottom borders only)
CS_POSITION Attach the specified border of the element to the according border of the dialog and move the border according to the size of the border. (all borders)
CS_FIXWIDTH Let the width of the element unchanged (left and right borders only)
CS_FIXHEIGHT Let the height of the element unchanged (top and bottom borders only)

Fourth and last step: Tell the OnSize()-Method to resize (or move) the dialog-elements:

void CConstraintDlg::OnSize(UINT nType, int cx, int cy) 
     cs.Resize(cx, cy);

That's all. Now your dialog will move and resize your elements.

Download source file
(3 KB)
  Download project files
(23 KB)
(comments in german)

If you've questions contact me at


  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Moving from an on-premises environment to Office 365 does not remove the need to plan for disruptions or reduce the business risk requirements for protecting email services. If anything, some risks increase with a move to the cloud. Read how to ease the transition every business faces if considering or already migrating to cloud email. This white paper discusses: Setting expectations when migrating to Office 365 Understanding the implications of relying solely on Exchange Online security Necessary archiving …

  • Lenovo recommends Windows 8 Pro. "I dropped my laptop getting out of the taxi." This probably sounds familiar to most IT professionals. If your employees are traveling, you know their devices are in for a rough go. Whether it's a trip to the conference room or a convention out of town, any time equipment leaves a user's desk it is at risk of being put into harm's way. Stay connected at all times, whether at the office or on the go, with agile, durable, and flexible devices like the Lenovo® …

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date