vb.net:FormsLayout: Step02: Concepts and Math

Please read, correct and comment on the following so it gets better for future 
folks use.
        FormsLayout: Step02: Concepts and Math:
So far we defined our form, Form1.vb to have a size of 1000 by 

700. This means that it consists of 100 dots  horzontally by 700 

dots vertically. Of course the dots are all filled in so it looks 

like a solid box to a visual person but each dot called a pixel is 

one point on the form. Each pixel has a location on the form 

called an address. Each address has an x and y coordinate. The x 

coordinate tells you how many pixels from the left the dot is and 

the y coordinate tells you how far from the top the dot is. The x 

and y coordinates are relative to the  position of the first dot 

in the upper left corner which has an x,y coordinate position, of 

0,0.
Thus a pixal located half way across our form and half way down 

would have a position of 500, 350. 500 is half of the 1000 pixels 

we specified in the horzontal size property for form1 in step 1; 

And, 350 is half the number of pixels we specified for our 

verticle size in step 1.
Thus the point, pixel located at 500, 350 is pretty much in the 

dead middle of our Form.
Things like TextBoxes, Buttons and other controls are small 

rectangular boxes we can put on our form so long as we make sure 

they all fit inside the form which is the black background of 1000 

pixels horzontally by 700 pixels vertically and the little boxes 

do not overlap each other. 
An Example:
We might look at a TextBox. This is a small box you can have some 

text displayed in or you can type into. It has a fixed position 

and size. Perhaps we want a Login Control on form1 and our first 

TextBox will be a place to enter your UserName. There will be a 

second TextBox where you can enter your Password. Now, envision 

the entire screen is black. We want 2 small white boxes  

positioned someplace on this big black background where we can 

type in our UserName in the first box and our Password in the 

second box.   We need to arrange the two boxes somehow. We can put 

one on top of the other with a little space between them or we can 

put them side by side with a little space between them. The space 

between the two white boxes will appear as a black strip since our 

background color for the form is black and this is nice. Let's put 

our two controls side by side at first. We will have a TextBox to 

enter a UserName, some black space and another white TextBox to 

the right of it where we can enter a Password.
So, we will have to know where to start the UserName TextBox and 

whare to start the Password TextBox so it does not overlap the 

UserName TextBox.  
That means we need to know the leftmost position of the 

UserNameTextBox and add the length of the box to find the right 

edge of the box.
The Password TextBox will have to be positioned to the right of 

that point or the Password TextBox would overlap the UserName 

TextBox. 
Look at the following example:
tbUserName 
Position = 200, 50
Size = 100, 26
This says the left edge of our UserName box is 200 pixels from the 

left of our form and the top edge 50 pixels from the top of the 

form. It is 100 pixels long and 26 pixels high. That means the 

white box starts at horzontal position 200 and ends at position 

299 since it is 100 pixels long and we add the length of 100 to 

the start position of 200 to get the end position subtracting 1 

because the length is inclusive of the start point.  Therefore, 

our Password TextBox will have to start at some point beyond 299 

or it will overlap the UserName TextBox. If you started the 

Password TextBox at 300 from the left of the form the two boxes 

would appear as one long white rectangle because there would be no 

spaces between the end of the UserName box and the beginning of 

the Password box. So we will start our Password box a little 

further to the right so there will be some black background 

between the 2 boxes.
So let's start the Password TextBox at 350, 50. That way we have 

both boxes 50 pixels from the top of the form so they lign up 
horzontally. 
The UserName box will be to the left of the Password box seperated 
by about 50 pixels of black background.
The property settings for this senario:
tbUserName:
Position 100, 50
Size 100, 26
tbPassword
Position 350, 50
Size 100, 26
The above should do the trick nicely. 
Now, our boss says he wants the Password box ligned up directly 

under the UserName box, sigh, sure boss!
The white UserName TextBox starts 200 pixels from the left of the 

form and 50 pixels from the top.
It is 26 pixels high.
So the Password TextBox will start 200 pixels from the left of the 

form to lign up it's left edge with the UserName TextBox left 

edge.
We then find the bottom edge of the tbUserName control by adding 

the height, 26, to the vertical start position of the top edge 

which we set to 50. So 50 + 26 = 76 and our tbUserName box has a 

top edge at vertical position 50 and it's bottom edge vertical 

position at 50 + 26 - 1 or 75.
We want our Password TextBox to start below the lower edge of the 

UserName box so need to have a vertical start position below 75. 

If we leave 50 pixels of black background between the 2 boxes, we 

can start the Password TextBox Top Edge at 125 which is just 75 + 

50.
The property settings for this senario:
tbUserName:
Position 100, 50
Size 100, 26
tbPassword
Position 200, 125
Size 100, 26
The above should do the trick.
In General: 
The Location of the left edg of a control is the x coordinate of 

the Position Property. The  location of the top edge is the y 

coordinate.
To get the right edge of the control just add the length to the x 

coordinate and subtract 1. To get the bottom edge just add the 

height to the y coordinate and subtract 1. The length and height 

are specified in the Size property for any control.
The absolute position is fudgable. You can not see one or 2 pixels 

in most senarios so 124 will look like 125 or 126 to a sighted 

person so use your own discression if working with numbers,. I 

like to keep things ending in 5 or 0 for ease of mental 

calculations but you can do it down to the exact pixel anytime and 

be right on a given position.

To see this manual positioning approach in action we will add and 

position some controls on our Form1.vb object in the next step.

  ----- Original Message ----- 
  From: Ricks Place 
  To: programmingblind@xxxxxxxxxxxxx 
  Sent: Saturday, January 24, 2009 6:08 AM
  Subject: Re: VB.net forms, how far is too far?


  Here is the first in a quick series of doing forms layout I have thrown 
together. Please comment on it so I can make it better each time someone uses 
it for future folks. Here we build a quick Windows project and modify the 
default Form1.vb file so it appears as a large black background to add controls 
to. It is basically a full screen Form based on a screen resolution of 1024 by 
768 or there abouts.
  When you build a form you want it to be able to be displayed on a computer 
screen. Most screens will fit a Form based on the Resolution. So if your 
Resolution is 1024 by 768 the form can be 1024 horizontally and 768 vertically. 
  Anyway here is the article. I don't have a spell checker so it is what it is 
- just a quickoverview. There are several other steps and the next step will 
position controls on this form giving a simple and quick manual way to 
visualize what is going on.
  After that I am working on Steps to demonstrate using the TableLayoutPanel 
and perhaps the Flow control as well. Anyway, here is step 1.
  Step 01: Create the Form:
  Start a new project in Visual Studio or one of the Express Modules, I will be 
using Vb.net in Visual Studio 2005.
  Project Name: FormsLayout
  Project contents by default are MyProject Folder and the Form1.vb object.
  Right MouseClick on Form1.vb, select view Forms Designer and Designer comes 
up.
  Under View Menu select Properties Window or hit the w key to bring up the 
properties Window for this form.
  Arrow down the list of properties and set:
  Backcolor = Black:
  Continue arrowing down the list of properties.
  When you get to font:
  tab twice to the Elipsis, 3 decimal points ...,  Windoweyes calls it quote 
browse unquote ,  and hit enter:
  The Font Dialog comes up. Tab once past the Style combo box to the size combo 
box and arrow down to 12 to set the font size to 12 pt.
  Tab to the OK button and hit enter to return to the Properties Window list of 
properties for this form.
  Arrow down to Forecolor and either select or type in white.
  Arrow Down to size and set it to 1000, 700
  Continue arrowing down to Start Position and tab to Browse, hit enter and 
select Center Screen and hit enter.
  You are returned to the Properties Window list of properties for the form.
  Hit CTL+F4 to exit the properties window and return to the Forms Designer for 
this form.
  Hit CTL+F4 again and answer yes to the prompt to save the changes.
  Hit Alt+F4 to exit project if you want and answer yes to save prompt.
  At this point:
  We have a project called FormsLayout:
  It has one Form called Form1.vb.
  If we hit ctl+f5 to run the project a centered black rectangle would 
basically fill the screen. This is our form. It has no controls on it so it 
just looks like the screen has turned black except for a little space around 
the edges and a line along the top that might say something like Form1 which is 
the  TitleBar.
  We will add and position our controls inside this black box 
  in subsequent steps.
  Finally, the 12 font size is a nice readable size but you can use 10 as well, 
8 is too small in my opinion for easy reading. The calculations in the 
following steps are based on the default sizes provided by Microsoft and 
picking 10 or 12 will give you default sizes close to what I ran across on my 
machine so the numbers will be close.
  Rick USA
    ----- Original Message ----- 
    From: Christy Schulte 
    To: programmingblind@xxxxxxxxxxxxx 
    Sent: Friday, January 23, 2009 5:09 PM
    Subject: VB.net forms, how far is too far?


    Working on some vb.net assignments for school, using visual studio 2008. 
I've figured out how to place controls on the form using the jaws scripts and 
it works wonderfully, but I'm having a bit of trouble visualizing my layout. 
Basically, I'm not quite sure based on the numbers just how far over on my 
screen the control really is. If a control has its left edge at 300, is that 
halfway across? a fourth of the way? way the heck off the screen? I've noticed 
that once a control gets to a certain point and you add a new control, VS puts 
it back at 0,0 instead of to the right and down from where you were, but not 
sure if that really means anything. Any experienced VS users who could give me 
a bit of help conceptualizing this would be very much appreciated. Thanks!
    Christy

Other related posts: