vb.net:FormsLayout: Step03: ManualPositioning

FormsLayout:Step03:ManualPositioning
Now we have a project FormsLayout and a form called Form1.vb. It 
is currently a black background we will be working on.
It's Property settings:
Name is Form1
Size = 1000, 700
BackgroundColor = Black
ForegroundColor = White
StartPosition = Center Screen.
Let's set up our Login example from Step02.
Before we start, Microsoft will often set default height values 
for controls like TextBoxes and Labels. Your values might not be 
exactly the same as mine so just keep it in mind when reading 
this. If you see a calculation where a TextBox height is 26 here 
and your TextBox is 24 then just use 24 in place of 26 when doing 
the calculations below. A couple of pixels does not matter so long 
as you have enough blank space between controls so they will not 
overlap and sighted folks can't see less than a couple of pixels 
on most screens anyway. 
We will put the UserName box on top and the Password box below it 
with both boxes left edges aligned 200 pixels from the left of the 
form.
Open the project and right mouse click the Form1.vb object and 
start the Forms Designer.
Under the View Menu bring up the ToolBox, 
Drop a TextBox on the form.
Set it's properties:
Name = tbUserName
BackgroundColor: White
ForegroundColor: Black
Location = 200, 50
Size = 100, 26 Note the height will likely automatically be set by 
MS based on the Font Size you specified for the Form in Step01:
leave it to whatever the default is for now. 
TabIndex: 0
TabStop: True
Hit Ctrl+f4 to exit the Properties for this control.
Now, under the View Menu drop another TextBox on the form and set 
the properties:
Name = tbPassword
BackgroundColor: White
ForegroundColor: Black
Location = 200, 125
PasswordChar: *
Size = 100, 24
TabIndex: 1
TabStop: True
UseSystemPasswordChar: True
Here we aligned the left edge of the tbPassword box 200 pixels 
from the left of the form to match the left edge of the tbUserName 
which is also 200.
Find the position of the bottom edge of the tbUserName box:
50, top edge, + 26, height,- 1  = 75
The Top Edge of the tbUserName TextBox is at position 50 and 
bottom edge is at position 75.
I can set the Top Edge of the tbPassword TextBox at any point 
below 75 and it will not overlap the tbUserName TextBox.
I just pick 50 pixels of blank space, just black background, and 
add that to the bottom edge position of 75.
75 + 50 = 125.
I can start the tbPassword TextBox at 200, 125 and it will appear 
aligned right under the tbUserName TextBox with about 50 pixels of 
black background seperating the 2 vertically aligned boxes.
Now, lets drop a Button on the form:
Set Properties:
Name btnLogin
BackgroundColor: Gray
ForegroundColor: Navy
Location: 200, 200
Size: Leave whatever the defaults are, mine are about 75, 23.
TabIndex: 2
TabStop: True
Text: Login 
Here we put a button below the Password TextBox and aligned it 
with the left edge of the 2 TextBoxes so it looks like it belongs 
with them.
The Left edge is 200 pixels from the left of the form as are the 2 
login boxes.
I just ball parked 50 pixels below the bottom edge of the 
tbPassword control which was at 125 + 26 - 1or about 150, added 
about 50 pixels of black background spacing to come up with a top 
edg position for my button of about 200. That is 150 + 50 is 200. 
Now, our form is a black background with 2 white boxes in the 
upper left quadrant of the form and a button below them saying 
Login.
Lets put a Message Box someplace on the form. We know we have a 
form with some login controls in the upper left quadrant of the 
form extending from 200 pixels on the left to about 300 on the 
right and from about 50 pixels from the top to about 325 pixels 
from the top. This is pretty much the upper left quadrant of our 
form.
So, we can put a message box right of this quadrant or below it 
without crowding the form. Assuming I want a big message box I 
decide a big box in the upper right quadrant of the form filling 
pretty much the upper right quadrant of the form would look good. 
I would have the 3 Login Controls in the upper left quarter of the 
form and a box about the same height as all three Login controls 
combined to the right of them in the upper right. To do this I 
will start the Message Box 50 pixels from the top of the form to 
match the top edge of the tbUserName Control. I will set the left 
edge of the tbMessages box at the horizontal midpoint at 500 
pixels from the left. So my location would be 500, 50.
This is fine since our Login Controls end points, right edges do 
not extend beyond 300 pixels horizontally - no overlapping.
Since this box might hold allot of words I will extend the 
tbMessages from the midpoint right to about 10 pixels from the 
right edge of the form which is at 1000, actually 999 but who is 
counting.
So I calculate the length of the box as 999 - 500 - 10 or about 
489 pixels long which I round to 490 because I like round numbers 
and one pixel will not impact anything functionally, will not risk 
going past the end of the form at 999 nor will it look any 
diferent to a sighted person. Also I want it's height to extend 
down about as far as the bottom of the Button Control which is at 
about vertical position 225, based on a default MS button height 
of about 25.  
The tbMessages control's height will be 225 - 50 = 175.
That is the Lower Edge Position of 225 less the top edge position 
of 50.
So drop another TextBox on the Forms Designer.
set it's properties:
Name: tbMessages
BackgroundColor: White
ForegroundColor: Black
Location: 500, 50.
Size: 490, 175
MultiLine: True
TabStop: True
Hit ctrl+f4 to close Properties window and ctrl+f4 to close Forms 
Designer answer yes to any request to save changes.
We now have the top half of our form holding controls. We have 
some space, 200 pixels to the left of the Login control set we can 
use if we want and have the entire bottom of the form available 
for more controls.
You can hit ctrl+f5 to test the Project and tab around the various 
controls. Notice that the TextBoxes do not tell you what they are 
suppose to hold.So tabbing around just reads something like 
EditBox,EditBox, Login Button, EditBox.
  This is not good for a sighted person nor a Screen Reader User. 
What to type where? So we need to somehow convey what to type into 
our TextBoxes or, if necessary, what the TextBox might be holding. 
To Do this We can use Label Controls positioned either to the left 
of another control or just over it. This way our Screen Reader 
will read it in conjunction with the word EditBox so if we put a 
label control just left or over the tbPassword control and set 
it's text property to quote Password Unquote a sighted person 
would see the word Password: followed by a little blank space and 

a TextBox just right of the word where she can enter a Password. 
If we put the Label just over the tbPassword control the result 
would be the word Password directly over the TextBox where the 
user should enter her password. In either case a screen reader 
should have the cursor stop in the TextBox but read the label for 
that TextBox so if you tab to the Password TextBox you would hear 
Password EditBox and your cursor will be positioned inside the 
TextBox ready for you to type your password. 
So let's add 3 labels to denote what is to be entered in our 3 
TextBoxes.
Bring up the Forms Designer:
Drop a Label Control on the Form.
Properties:
Name: lblUserName
Backcolor: Black
ForeColor: White
Location: 100, 50
Size: Use MS Default, mine is 85, 20
TabIndex 0
Text: UserName
Drop a second label control on the form:
Properties:
Name: lblPassword
BackColor: Black
ForeColor: white
Text: Password
Location: 100, 125
TabIndex: 1
Size: 78, 20 MS Default after I entered the Text Property.
Exit the Forms Designer saving your work and run the project.
Tabbing I now hear EditBox UserName, EditBox Password, Login 
Button and WTF? EditBox UserName instead of just EditBox for our 
tbMessage Box Control that has no label yet.
This is because Windoweyes is looking for a label control or 
literal to associate with that EditBox. The last one and the only 
one on the same horizontal line is the label control for the 
tbUserName control so it guesses wrong and we hear the wrong label 
read for the tbMessages TextBox, sigh it's harder than I thought 
to just get it to read nicely.
So I will try adding a label control just over the tbMessages 
control and setting that labels TabIndex to the same as the 
tbMessages control to see if that works. I will actually start the 
label control a few pixels to the left of the tbMessages control 
to help Windoweyes guess that I want this control read with the 
tbMessages TextBox if it can't figure it out using the TabIndex. 
Windoweyes will read any control left or over another control as 
perhaps a label for the control just right or just under it so I'm 
doing both here just to touch all bases.
So:
In Forms Designer Drop another label control on the Form:
Set Properties:
Name: lblMessages
Location: 498, 25
Size:82, 20 MS Default Size
Text: Messages 
TabIndex: 3
Now Ctrl+f4 and save your work.
Ctrl+f5 to run the project and the form now reads correctly when 
you tab around the form.
Getting a Form to read correctly with a Screen Reader is a little 
Art and a little Math. If something does not work keep basic 
principles in mind and experiment until you get a good reading on 
a form.
Now we have our form looking ok and reading well.
I know that 50 pixels is almost 10 percent of the Forms height and 
5 percent of it's width. I think 50 pixels of vertical blank space 
is a bunch of blank space between my Password controls. In fact 
the controls are only about 25 pixels high so 50 pixels is twice 
as much blank space as the boxes and button are high. To make them 
look more like a group I will ReCalculate their positions so there 
is only about 20 pixels between them vertically. That means the 
blank space will be less significant visually to a sighted person 
than the white space or text in our textboxes and mentally the 3 
login controls will appear more related. This is just some 
psychology, bigger and bolder gets our attention. Thus the 2 login 
boxes and button will present a larger white area at a quick 
glance of the form and the smaller spaces seperating them will be 
less significant so the Login group will command attention as a 
group of controls. You can also put them inside a Container 
Control with a border but that is not part of Positioning so our 
visual spacing plan will accomplish the same thing without a 
pretty border or clutter of a nasty border depending on your point 
of view. So, we need to adjust the Vertical position of the 
following controls to make this happen:
lblUserName, tbUserName Leave these controls alone.
lblPassword, tbPassword
First subtract 30 pixels from the tbPassword control:
125 - 30 = 95
So the new top edge of our lblPassword and tbPassword controls 
will be changed to 95.
The new bottom edge of the tbPassword will be 95 + 26 - 1= 120. 
Now add 20 pixels of blank space below the bottom edge to seperate 
it from the button and the top edge of the button is at: 120 + 20 
= 140. So the new button location is: 200, 140.
 Now the new Location properties should be:
lblUserName: Location: 100, 50
tbUserName: Location: 200, 50
lblPassword: 100, 95
tbPassword: 200, 95
btnLogin: 200, 140
Note that I just used the same top edge for the lblPassword as the 
new tbPassword. This is to keep them aligned vertically. Adding 
the same 20 pixels to the lblPassword would not give the right 
result as it is not the same height as the tbPassword control. We 
want to keep the label and text aligned horizontally so just use 
the same vertical position as the control with the larger height 
which, in this case, is the tbPassword control. So just calculate 
the new top position for the tbPassword and use that for it's 
related lblPassword to keep them aligned nicely. 
Our form now looks pretty good. Of course it could be much more  
visually appealing but that is not the object of this series, just 
positioning. Remember you can group controls by having smaller 
blank spaces between the entrants of the group and larger spaces 
between various groups of controls. This works to automatically 
group controls into an area of the form without drawing a border 
around the group.
When I look at the form I see a group of controls in the upper 
left quadrant and a big box in the upper right quadrant. I see the 
group of controls in the upper left quadrant are all related to 
logging in and my brain confirms this is a group of controls and 
this area of the form is the area dedicated to logging into our 
system. Anyway, that is how most people's brains process and group 
details automatically without them thinking about it.
Phew! Next we will look at an easier? method of doing some form 
layout work. There is a control in the ToolBox, actually a couple, 
that will help us with positioning controls on a form. It is 
especially helpful for setting up groups of controls as we did for 
the set of Login Objects we added to our form already.
This is the end of this Step:
AddWe

Other related posts: