user interface – Is anyone aware of a visual diagram that shows the composite parts of std. Windows controls? – Education Career Blog

For example: I would like to know exactly what system metrics to use to know how wide the borders of a window are going to be. With a given set of visual styles, what borders will appear, and how wide will they be (what system metrics can be queried to know exactly and correctly how wide they’ll be)?

Similarly, for a button, how wide are its borders in various states? Using different themes? What system metrics or theme functions can give me a absolutely correct answer on how wide, how tall, how many, what offsets?

Generally speaking, my custom interface code usually contains things like:

myrect.Offset(4,4);   // empirical evidence indicates it's actually 4 more pixels per side that Windows adds in but doesn't tell me about...

I hate code like this – littered with magical numbers that may change depending on version of Windows, whether Aero is enabled or not, whether the customer is running this theme or that theme, or using large font / high DPI mode, or not, etc.

But I haven’t, in my 15+ years of Windows GUI programming, ever seen a really good white paper or diagram or chart that describes the actual composition of all std. windows controls, and where their various visual parts’ metrics come from.

Is anyone out there aware of a resource even similar to this? A white paper? A diagram? A detailed blog discussion? Anything?

Thanks for any help you may have!

EDIT: the GUI guidelines idea doesn’t actually describe the internal composition of the controls visual parts – just their overall size and spacing between controls.

I really would love to have something that describes in excruciating detail the border sizes, offsets, and what system metrics control each of these things.


What about the Windows User Experience Interaction Guidelines? Document Index PDF download

It includes diagrams like this:

Button Dimensions

This is not a complete answer to your question, though, because it only tells you how the controls are supposed to be laid out, not how they actually are. And it doesn’t address what happens under different themes.

Leave a Comment