Anchor and Dock Controls on a Form
In this section of the course, we'll take a look at some of the extra things you can do with VB.NET forms. First, we'll take a look at the Anchor and Dock properties of a form.
Anchoring and Docking
The Anchor and Dock properties of a form are two separate properties. Anchor refers to the position a control has relative to the edges of the form. A textbox, for example, that is anchored to the left edge of a form will stay in the same position as the form is resized. Docking refers to how much space you want the control to take up on the form. If you dock a control to the left of the form, it will stretch itself to the height of the form, but its width will stay the same. Let's take a look at some examples, to clear things up.
Anchoring
Start a new windows projects. Add two textboxes to your form, and set the MultiLine properties of both to True. Change the height of the boxes.
Click on Textbox1 and locate the Anchor property in the Properties box:
The default is to anchor the control to the Top, Left edge of the form. Click the arrow to reveal a curious drop down box:
The button in the middle represents your control. The big white areas are rather confusing - they don't actually do anything! To change the property, you click the smaller grey or white rectangles between the big white rectangle. Click again to deselect it. In the image below, the property has been changed so that the textbox is anchored to the Top, Left and Right sides of the form:
The next image has the textbox anchored to the Right and Bottom edges of the Form:
Notice where the cursor is in the images, and what has been changed. Click the arrow on the drop down box to confirm your choices.
To see what effect this all has, do the following:
- Set the Anchor property of Textbox1 on the default of Top, Left
- Change the Anchor property of Textbox2 to None (all the small rectangles should be white.)
- Run your programme and drag the edges of the Form outward. This will resize your form
What you should notice is that Textbox1 stays where it is, and that the left edge of Textbox2 moves.
Stop your programme from running. Change the Anchor properties of the two textboxes to anything you like. Run your form again and watch what happens. Try anchoring one textbox to the left and right of the form. Watch what happens.
But anchoring a control to an edge of the form is a useful property to get used to, if you have a form that can be resized and want your controls to stay where they are.
Docking
Docking is similar to Anchoring, but this time the control fills a certain area of the form. To see how it works, click on one of your textboxes and locate the Dock property. Click the arrow to reveal a drop down box:
This time, all the rectangles are like buttons. You can only dock to one side at a time, and the default is None. Click a button to see what it does to your textbox. Click the middle one, and the textbox will Fill the whole form.
Docking is quite useful when used with the splitter control and panels, allowing you to create a Windows-style interface.
Adding a Toolbar to a Form
The toolbar is a very popular and much-used addition to a programme. It's difficult to think of a piece of software that doesn't make use of them. VB.NET lets you add toolbars to your forms, and the process is quite straightforward. Let's see how it's done:
Either start a new Windows project, or keep the one you currently have. To add a toolbar to the top of your form, expand the Toolbox and locate the ToolStrip control:
Double click the ToolStrip control, and it will be added to the top of your form:
You should also notice the ToolStrip object that appears at the bottom of the window:
ToolStrips work by adding buttons and images to them. The button is then clicked, and an action performed.
Click on your ToolStrip to select it. In the property box for the ToolStrip, you'll notice that it has the default Name of ToolStrip1. We'll keep this Name. But locate the Items (Collection) property:
Click the button with the three dots in it. This brings up the Items Collection Editor:
To add a new button to your ToolStrip, click the Add button at the top. The button appears in the Members box (ToolStripButton1):
Notice that the new button has its own list of properties, just to the right. To add an image to this new button, locate the Image property:
Click the small button with the 3 dots in it to bring up the Select Resource box:
In the image above, we've selected "Project resource file", and then clicked the Import button. We then navigated to some Bitmap images and imported the five that you can see in the screenshot above. (The Bitmap folder is amongst the files you download at the start of this book.) Click OK when you have imported some images. You will be returned to the Item Collection Editor. Click OK on this, as well. The ToolStrip on your form will then look like this:
The second of those images is a dropdown list of available ToolStrip options:
To add a new button to the toolstrip, click on Button from the drop down menu in the image above. A default button is added called ToolStripButton2. (The first button is called ToolStripButton1.)
To change the picture of the new button, locate the Image property in the properties area bottom right:
Click the button with the three dots in it to bring up the Select Resource dialogue box again. Select Project resource file from the list, and choose a new icon:
The default button image will then change to the one you selected:
(If you wanted to, you could change the name of the button. Just delete ToolStripButton2 from the Name property and type a new one.).
Repeat the steps above to add more buttons to the toolstrip. It should then look something like ours:
There is, however, a problem with our toolstrip images: they all have an awful grey background. You can get rid of background colours on toolstrip images by changing theImageTransparentColor property.
Make sure one of your buttons is selected. In the properties area in the bottom right, locateImageTransparentColor. The default is Magenta. You can change this. Click inside the Magenta text box and press the delete key on your keyboard. Change Magenta to the numbers 192, 192, 192. (This is the RGB colour of our grey background. We got these numbers from image editing software.) Press the Enter key on your keyboard and these numbers will change to the named colour Silver:
Change all the other colours on your toolstrip from Magenta to Silver. When you run your form again, it should look like this:
Of course, if you click on the buttons nothing will happen. We need to write the code that gets them to work. We’ll do that now.
Coding For your Toolbar buttons
Double click your first ToolStripbutton to bring up the coding window. It should look like this:
You can place any code you like, here. Try a message box, as in the image below:
Run your programme and click your ToolStrip button. You should see the message box display. In a real programme, however, the code would be the same code for a menu item - it's just shortcut, after all!
Creating Multiple Forms in VB .NET
It's a rare programme that only has one form in it. Most programmes will have other forms. These other forms can be used for things like Find and Replace searches, extra formatting capabilities, to set Options for the programme, and a whole lot more besides. VB.NET let's you add as many forms as you want to your project. But the process is not quite so simple. We'll see how to do it, though.
You can use the form you already have for this, the one with the ToolStrip on it (or start a new project, if you prefer). But from the VB.NET design environment, click the Project menu. From the drop down menu, click Add Windows Form. The Add New Item dialogue box appears.
Select Windows Form under Templates. Then click inside the Name textbox at the bottom. Change the Name of the form to frmSecond.vb. Then click Add.
When you are returned to the design environment, your new form will be displayed:
To switch between forms, you can click the tabs. In the image, two tabs are displayed: Form1 (the original and first form), and our new form frmSecond.
We'll write code to get this new form to display. But it will only appear when a button is clicked on Form1.
So click the tab for Form1, and add a button to this form. Change the Name property of the button to btnShowSecond. Then double click the button to access the code for it.
In order to display the second form, you have to bear in mind that Forms are Classes. SofrmSecond is a Class (as is Form1). You first have to create a new object from the class called frmSecond Class. Then call its Show method.
So add this code to your button
Dim SecondForm As New frmSecond
SecondForm.Show()
The first line sets up a variable called SecondForm. When you type "As New", you're asking VB.NET to create a New object. If you type a space, you'll see a pop up list. Type the frm of frmSecond and you should see it displayed on the list. You can double click the item in the list to add it to your code. But what the line does is create a new Object from the Class calledfrmSecond.
Once we have the Form Object stored in the variable, we can just use the Show method to display the form.
Run your programme and test it out. When you click your button, you should see the second form appear.
However, there's a problem with this code. Click the button again and another copy of frmSecondappears. Keep clicking the button and your screen will be filled with the second form!
To prevent this from happening, you can move the code that creates the form object. Move it right to the top of the coding window, just below Public Class Form1.
The only code left in the button is the line that Shows the form. A new form object will now not be created every time the button is clicked. If you try it out, you should see only one form appear when the button is clicked, and not multiple forms.
Modal and Non Modal Forms
A modal from is one that has to be dealt with before a user can continue. An example is the Change Case dialogue box in Microsoft Word. If you try to click away from the dialogue box, you'll here a beep to indicate an error. Until you click either the Cancel or OK buttons, the programme won't let you click anywhere else.
The second form you've just created is called a Modeless form. These are forms than can be hidden or sent to the taskbar. You can then return to the main form or programme and do things with it.
A Modal form is sometimes called a dialogue box. And we'll see how to create one of these now.
Add a second button to your Form1. Change the Name property of the new button tobtnDialogueBox. Double click the new button and add the following code:
Dim frmDialogue As New frmSecond
frmDialogue.ShowDialog()
To display a form as a Modal dialogue box, you use the ShowDialog method. If you use the Show method, the form is displayed as a Modeless form.
Run your programme. Click your new button, and the second form should display. Move it out the way and try to click a button on Form1. You won't be able to. The second form has to be dealt with before you can access Form1.
When the form is a Modal dialogue box, you can create OK and Cancel buttons for it. VB.NET then has a trick up its sleeve for these types of buttons. We'll see that trick now.
OK and Cancel Buttons
In the design environment, Click the Tab for your frmSecond. When the form is displayed in the design window, add two buttons to it (Make sure you're adding the buttons to the second form and NOT Form1). Change the Name property of the first button to btnOK, and the Name property of the second to btnCancel. Double click your OK button and add the following code to it:
Me.DialogResult = DialogResult.OK
The Me keyword refers to the current form. When you type a full stop, select DialogResult from the pop up list that appears. DialogResult is a property of the Form. It can accept a range of values. As soon as you type a space after the equals sign, you'll see a list with these values on it (VB NET 2008 only. In VB 2010, you have to type the DialogResult):
As you can see, in VB NET 2008, one of these values is DialogResult.OK. This indicates that you want to use this button as an OK button. When the button is clicked, VB.NET will return a result of OK for this button.
In VB NET 2010, type DialogResult after the equals sign. Type a dot and you'll have this instead of the above image:
Access the code for your Cancel button and add the following line:
Me.DialogResult = DialogResult.Cancel
For the Cancel button, we're just selecting DialogResult.Cancel from the list. When the button is clicked, VB.NET will return a result of Cancel for this button.
You can test to see what value is stored in Me.DialogResult. But you do that from the button that displays the form, Form1 for us.
So access your Form1 code, and locate the lines that display the second form. The two lines should be these:
Dim frmDialogue As New frmSecond
frmDialogue.ShowDialog()
Change the second line to this:
If frmDialogue.ShowDialog() = DialogResult.OK Then
MsgBox("OK Button Clicked")
End If
To get at the value of the button clicked, you test to see what result the ShowDialog property is. If the ShowDialog property of frmDialogue is OK then you can execute the code that needs executing. If the Cancel button was clicked, however, you don't have to do anything: VB.NET will take of closing your Modal dialogue box for you!
Run your programme and test it out. Click your button to bring up your Modal dialogue box. Click the OK button, and you should see the message box display. Bring the Modal dialogue box up a second time and then click the Cancel button. The form will just close down.
Getting at Values on other Forms
The form with OK and Cancel buttons on it is not doing much good. We need it do some work for us. Let's turn the form into a Change Case dialogue box.
Design a Form like the one in the following image (this is frmSecond):
When you've designed your form, click back on Form1 and add a Textbox to it. When the button on Form1 is clicked, the dialogue box above will display. You can then select an option button to change the case to Upper, Lower or Proper case. This will happen when the OK button is clicked. Whatever text is in Texbox1 on Form1 will be changed accordingly.
Double click the OK button on frmSecond to access the code. You should have the following:
Me.DialogResult = DialogResult.OK
If you want to refer to Texbox1 on Form1, you can't just do this:
Form1.Textbox1.Text
In previous version of VB, that code would be all right. You're saying "Access the Text property of Textbox1 on Form1." The problem in VB.NET is that forms are Classes. They don't become objects until one is created from a Class. So the frmSecond Class knows nothing about Form1. It has no idea what it is.
The solution is to create a textbox object variable on Form1, and assign Textbox1 to this variable. But this variable has to be something that all Classes in the project can see.
So add this near the top of your code window for Form1 (add it just below the Inherits System.Windows.Forms.Form line, or Public Class Form1):
Public Shared tb As TextBox
We're setting up a variable which we've called tb. A Textbox object is going to be stored in this variable. But notice that the variable is Public Shared. This way, frmSecond will be able to see the variable.
In the Form Load event for Form1, add the following line:
tb = Textbox1
When Form1 loads, the textbox called Textbox1 will be assigned to the tb variable. Now Textbox1 can be seen by frmSecond.
Go back to your code for the OK button on frmSecond. Add the following two lines at the top:
Dim ChangeCase As String
ChangeCase = Form1.tb.Text
We're setting up a String variable called ChangeCase. Whatever text is in Textbox1 of Form1 will then be assigned to the ChangeCase variable. But notice that as soon as you type a full stop after Form1, the tb variable will be available in the pop up list:
The Public variable called tb holds a reference to Textbox1 on Form1. When you type a full stop after the tb, you get a list popping up. The list is all the Properties and Methods that are available to Textbox1. One of these is the Text property.
We now only need to add the code that does the actual converting. So add this below the two lines you already have:
Dim ChangeCase As String
ChangeCase = Form1.tb.Text
If optUpper.Checked Then
ChangeCase = ChangeCase.ToUpper
ElseIf optLower.Checked Then
ChangeCase = ChangeCase.ToLower
ElseIf optProper.Checked Then
ChangeCase = StrConv(ChangeCase, VbStrConv.ProperCase)
End If
Form1.tb.Text = ChangeCase
The three options buttons on our form were called optUpper, optLower and optProper. In the code, we're using an If Statement to see which of these was selected. The one that was chosen will have its Checked property set to True. We then store into the variable ChangeCase the converted text from the textbox. The final line puts the converted text back into Textbox1 on Form1. But you're coding window should look like this:
Note that the DialogResult.OK line is the final line of the code. When you're writing your code, make sure that optUpper, optLower and optProper are changed to whatever you called your Radio Buttons.
When you're finished adding the code, run your programme. Enter some text into Textbox1. Then click the button that brings up the Change Case Dialogue box. Select an option from the three available, and the click OK. The text in Textbox1 should be converted.
Setting and Getting value from one form to another can be quite a tricky process at first. But once you get the hang of it you'll find it's not too difficult.
And that ends this section of this course. There's an awful lot more to learn about Windows Forms, and a bit of experimentation is needed before you become skilled in their use. But in a beginners course, you've learned enough to be going on with.
Comments
Post a Comment