Have you ever thought of how annoying it actually was to spend a lot of time
doing a basic GUI for your simple applications instead of focusing on the actual
'content'? Take for example a resizing dialog or property page. You need to write code
for each control that will tell it where to go when the thing is resized, and this can take up a lot of time. Now I know that I'm not the first one to give a solution to this
(CResizableDialog), but this article is on my approach.
Basically, all you need to do is design your dialog the way you want it to
look in the resource editor (don't forget to make it resizable), and then define how the
controls will behave when the dialog is resized using one single macro for each control.
Note that all this works exactly the same way with both
#include EasySize.h to your stdafx.h
(or put it in your include directory and
#include <EasySize.h> , which I recommend)
DECLARE_EASYSIZE anywhere in your class declaration:
class CEasySizeDemoDlg : public CDialog
- Create an
OnInitDialog handler if it doesn't already exist,
and put this in the end of it: "
- Create an
OnSize handler and add the
UPDATE_EASYSIZE; macro to it:
void CEasySizeDemoDlg::OnSize(UINT nType, int cx, int cy)
CDialog::OnSize(nType, cx, cy);
- Optional - If you want your dialog to have a minimum size,
then create an
OnSizing handler and add the
EASYSIZE_MINSIZE macro as below:
void CEasySizeDemoDlg::OnSizing(UINT fwSide, LPRECT pRect)
- Now you have to create the "EasySize Map" (or whatever you want to call it) in which you will specify
the behavior of each dialog item. It can be placed anywhere inside your class implementation.
The map looks like this:
The map from the demo application looks like this:
Looks confusing? It's not once you get the point (and I know I'm not good at explaining it) Read on.
EASYSIZE macro is used in the EasySize Map
to specify what behavior your controls will have on dialog resize.
It looks like this:
control is the ID of the dialog item you want
re-positioned (which will be referred to as the 'current control' further on).
left, top, right and bottom can be either the ID of
another control in the dialog (not the current control), or one of the
Basically, if you specify an ID, the distance from the current control and
the item designated by the ID will remain the same when the dialog is
resized: The current control will 'stick' to the other item.
works the same way as if you had specified a control ID, except that it's the distance
between the current control and the dialog border that will be kept constant.
ES_KEEPSIZE in, let's say
left, will keep
the width of the current control the same, and will make the current control
right-aligned to whatever you specified in
The width (or height, if you specified
bottom) of the current control will
always remain what it is in the dialog resource. (I know this explanation sucks,
but look at the demo application if you are confused or post you question in the board below).
ES_KEEPSIZE cannot be specified in both
options can be a combination of
ES_VCENTER and 0 (use 0
if you don't want any of the other).
ES_HCENTER horizontally centers the control between
the two items specified in
(both of those can not be
ES_KEEPSIZE!). The width of the
current control will always remain the same as in the dialog resource.
ES_VCENTER works the same way, but for vertical centering
bottom, and where the height will remain constant).
Well I hope you figured out how this works, because it really can make your life easier.
Note that using these macros will probably make your compiled code slightly
bigger and slower than if you had coded the resizing routines manually, but in
most cases the change is so small not even you will notice.
Last Update - Just corrected a few typos.