Attaching Elements to Borders | CodeGuru

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, […]

Written By
CodeGuru Staff
CodeGuru Staff
Dec 8, 1998
2 minute read
CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More

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:

protected:
     XConstraint cs;


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


.cpp:

/{{AFX_MSG_MAP(CConstraintDlg)
     ...
     ON_WM_SIZE()
     ...
     //}}AFX_MSG_MAP

.h

//{{AFX_MSG(CConstraintDlg)
     ...
     afx_msg void OnSize(UINT nType, int cx, int cy);
     ...
     //}}AFX_MSG


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

cs.Set(this); // tell the class who is using it
     cs.Add(IDC_BUTTON1, CS_RIGHT, CS_RIGHT, CS_TOP, CS_TOP);
     cs.Add(IDC_BUTTON2, CS_LEFT, CS_RIGHT, CS_TOP, CS_BOTTOM);
     cs.Add(IDC_BUTTON3, CS_FIXWIDTH, CS_FIXWIDTH, CS_FIXHEIGHT,
     CS_FIXHEIGHT);


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.

If you’ve questions contact me at Joachim.Raidl@iname.com

CodeGuru Logo

CodeGuru covers topics related to Microsoft-related software development, mobile development, database management, and web application programming. In addition to tutorials and how-tos that teach programmers how to code in Microsoft-related languages and frameworks like C# and .Net, we also publish articles on software development tools, the latest in developer news, and advice for project managers. Cloud services such as Microsoft Azure and database options including SQL Server and MSSQL are also frequently covered.

Property of TechnologyAdvice. © 2026 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.