| We will want our control to resemble the old ADO Data Control. This includes four navigation buttons and a caption area. When we open the designer we see a blank drawing area. We are going to put four command buttons on the control, but first look at the Properties window. There is no BorderStyle property. We want our control to be able to have some kind of border. The solution is to use a panel control, a container control used to group other controls. Conveniently it has a BorderStyle property. Drop a panel control onto the UserControl. Next , find the Dock property of the panel control. The Dock property allows a control to be parked against one or all of the inner borders of the container. For you VB 6 programmers, it is similar to the Align properties some controls had except that it also has a Fill property that allows the control to automatically fill and resize with the container. Click the dropdown button and a strange -looking object appears. The object represents six buttons that correspond to the Dock type enumeration. The choices are Fill, Top, Bottom, Right, Left and None. Click the button in the middle. This is the Fill option which eliminates having to write custom code in the resize event of the control. Set the BorderStyle property to Fixed3D (this creates a sunken effect) and change the name of the panel to pnlMain. Next we will add four buttons and name them cmdFirst, cmdPrevious, cmdLast, and cmdNext. Name them in this order so that I can demonstrate something later on. Blank out the Text properties of the buttons. On the web site, there are four icons which I created for you in the project folder: first.ico, previous.ico, next.ico, and last.ico. Copy these to your working folder. Select each button and find the Image property. Click the ellipsis () button and a File Open dialog appears. Assign each icon to its respective button or, if you don't feel like doing this, use the Text property and less-than and greater-than signs. It looks cheesy but then you're the only one looking at it. Use << for first, < for previous, > for next, and >> for last. Select the FlatStyle property of each button and set it to Popup. Select cmdFirst. Now we will Dock the button to the left edge of the panel. This is something you couldn't do in VB 6 where controls could only be aligned on forms and UserControls. Now controls can be Docked on most containers. (The frame is the only exception, I think.) Next Dock cmdPrevious left as well. Dock cmdLast and cmdNext to the right. Now the control is starting to resemble the old data control. Wait a minute! The cmdNext button is all the way to the right and cmdLast is toward the center. What happened ? Try to drag cmdNext toward the center. It won't move. Unlike the VB 6 Align property, you can't change the position of the aligned controls by dragging. What then determines the order in which they Dock? Actually, it's the order the controls were created, something I found out the hard way. I was trying like crazy to rearrange some Docked controls. It wouldn't work so I deleted and recreated them. That's when I noticed the pattern. You do not have to know in what order you want the controls to stack when they're Docked before dragging them onto the form. You can use the Bring To Front and Send To Back menu items in the Format menu. There also is a back-door way to change the Docking order. This is useful if you need to rearrange numerous controls and are tired of clicking the mouse. Open the Code window for the control. Expand the region Windows Form Designer Generated Code. Scroll down pastand ignorethe comment Do Not Change the Code in This Section Ignore it because you are rearranging the code, not changing it. Scroll to where you find a comment pnlMain. Find the line of code that looks like this: Me.pnlMain.Controls.AddRange(New System.Windows.Forms.Control() _ {Me.lblText, Me.cmdPrevious, Me.cmdFirst, Me.cmdNext, Me.cmdLast}) Make sure the order of the controls appears as in this line. The real reason they appear in the z-order they do is because of the order they appear in this line of code. Incidentally, this line of code adds the controls to the Controls collection of the panel, not the UserControl! That's correct, all container controls now have their own Controls collection. Another interesting thing about this line of code is that the function call passes an array of controls made up on the fly. There is no longer an array function to create a variant array (there are no variants any longer). Instead the syntax resembles the C++ style. The curly braces contain the elements of the array. By the way, I didn't lie when I said it was the order that the controls were added that determines the stacking order. The designer composes this statement and the controls are added to the array list in the order they are added to the form. Simply changing the order in the list does not seem to affect the designer in any way. If you want to make sure, then change the order the controls are declared and initialized as well. When you tab back to the designer, you will see that they now appear correctly. The last thing we want to do to complete the look of the ADO Data Control is add a label. This label will display whatever caption we choose, often a record position indicator. Drop the label in the center of the panel. Name it lblText. Set the Dock property to fill. Set the Text property to Record: Our visual design is now finished. Notice that the controls all resize automatically. We didn't have to write any resizing code at all! Your control should appear as in Figure 11.1. You can compile the project now. Figure 11.1. The visual design of the Data Control.   | 
