How to layout GUI using pixels

1.4k Views Asked by At

I'm not sure how one layouts a GUI, e.g. buttons, edit boxes, text and etc., when one is given measurements in pixels.

As in Microsofts's GUI Guidelines all the specifics are given in distances of pixels. How does one transform that into actual distances when using another editor besides a Microsoft editor?

Thanks

2

There are 2 best solutions below

0
On

The dimensions of a dialog window, of all elements within the dialog window and their positions are defined in dialog units (DLU) and not in pixels, see About Dialog Boxes.

A dialog is therefore not of fixed size in pixels. The size depends on the font set for the dialog. In the *.rc file you can see the font of a dialog above the line with the keyword BEGIN.

See also How to calculate dialog box units based on the current font in Visual C++ and Correlation between DPI and dialog units

So if you are not using a resource editor and instead a text editor to edit the dialog resources directly in the *.rc file, you have definitely a problem. I can only suggest not to do that.

0
On

For LabWindows/CVI:

EDIT to correct function names:

In the LabWindows/CVI development environment you can use a family of functions (also accessible through function panels) that provide status and control of panels and controls (things such as position/size/color..., et. al.) called the User Interface Library. Functions such as GetCtrlAttribute(), SetCtrlAttribute(), GetPanelAttribute(), and SetPanelAttribute(). Each of these uses an enumerated list of pre-defined arguments to access which of the many properties you would like to control.

For example, to set the size and position of a panel as it is displayed on the monitor, you would use something like:

SetPanelAttribute(panelHandle, ATTR_HEIGHT, height);//where height is in pixels, 0 to 32767  

SetPanelAttribute(panelHandle, ATTR_WIDTH, width);//where width is in pixels, 0 to 32767  

SetPanelAttribute(panelHandle, ATTR_TOP, top);//in pixels, 0 to 32767
//The vertical offset (in pixels) of the panel   
//relative to the origin of the screen   
//(for top-level windows) or the parent panel (for child panels).
//The screen origin is the upper-left corner of the screen.  
//The origin of a parent panel is the upper-left corner of   
//the panel below the title bar and to the right of the panel frame.  

SetPanelAttribute(panelHandle, ATTR_LEFT, left);//in pixels, 0 to 32767
//The horizontal offset (in pixels) of the panel relative to 
//the origin of the screen (for top-level windows) or the 
//parent panel (for child panels).
//The screen origin (0,0) is the upper-left corner of the screen.
//The origin of a parent panel is the upper-left corner of the 
//panel below the title bar and to the right of the panel frame.  

There are many more attributes (properties) that can be set, or retrieved using these four functions, such as background color, whether panel/control is active, or greyed out, frame color, etc.

As mentioned before, there is a similar set of functions in the same family for controls (Get/Set)CtrlAttribute() that provide control for all the control properties.