This show a classic label and an associated edit field. Notice that the text “label” and “Text” are not aligned. In my case I force the controls to align to the grid and in this case I get the side effect that these two texts do not align. One solution would be to switch off the grid, adjust the label and switch the grid back on – thay would work, but it would also require us to do this on every label and checkbox etc. So what I am about to do is to add a property called “Text Alignment” and make sure that these align to the same with the grid switched on. All Windows controls contains a property called “VerticalAlignment”, but it don’t work in a consistent way between controls.
This is one of the reasons I use a grid – to make it easy to align controls in size and position and it needs to work straight out of the box so we don’t use extra time on these details. My challenge is however that I will need to force all Windows components I use. The picture below demonstrate why.
Notice that label and checkbox text are aligned on top, while edit field and combobox text are aligned center. This just look unprofessional and is a detail that will annoy everyone if it is not fixed. This is also a common issue in some GUI designers as it is not the first time I observe the need to sit and adjust this manually. My challenge is that I will need to fix this in my own HMI designer, but also in every target platform SDK.
The easy solution is to just offset label 3 points from top to compensate for the fact that grid space is 20 and font size is less. I would expect VerticalAlignment to do this, but the ressults using that property vary from control to control.
The adjusted result can be seen above – the actual top adjustment needs to be calculated based on font size used. In the final code generated we just add Y + YOffset and the result should be fine. This is basically an adjustment I have been doing manually in every GUI tool I have used – it is usually “solved” with a smalle grid, but using a 10 point grid means things align easy in position and in this case I automate the adjustment that I otherwise would be sitting doing manually.