This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

Now that we have our form setup, let us go ahead and add some controls to our form. On the left hand side, you will see your toolbox. Navigate down to the containers tab. Container control allow me to group smaller controls with logically and physically. Let us review some of this.

The full layout panel control. This container control dynamically flows its content either horizontally or vertically. The group box control enables you to gather together related controls. The group box control also provides a visual cue using a frame around the controls that you wish to group. You could also optionally provide a caption to provide a name for your related items.

The panel has a control that can also group together collections of controls. This control can be use purely as a design guide as it does not have any borders by default. The split container control provides a movable bar that the user can slide to change the display area for the sub panels. The tap control container allows you to create and manage tabs for your forms.

And lastly, we have the table layout panel. Unlike the flow layout panel, the table layout panel control orders its content in a structured raw and columns format. Let us work with one of this container controls.

Drag the split container control unto your form. Click on the smart task, select the option undock and parent container. As you can see, my control now has undocked from the parent container which is the form. I can move this control around and keep it small and add different controls to this, or I can go ahead and re-dock it into the parent. Go ahead and choose dock and parent container.

Now, let us hover our mouse over the movable splitter control. I can work with the splitter control visually and the change the display area of the panels. Drag your splitter control to the right so that most of the space is taken by the left panel. Now, go to your properties window. Here is a tip.

In order to find a property quickly by name, choose the alphabetical order button. Make sure the split container is selected in the drop down list. In the properties window, scroll down to the border style property. By default, the split container has no border. Let us go ahead and change this to have fixed 3D borders.

As you can see, your design canvas automatically updates to show the new border. Let us save our work so far. Click on the save icon and save your work. Next, we will add a list view control. In your controls in the toolbox, go ahead and select the list view. Drag the list view into the right panel of the split container control. Click on the list view smart tag arrow. In the smart tag panel, go ahead and change the view settings from large icon to details.

The view settings work much like windows explorer. When you work with the files and windows explorer, you can optionally display the data as large icons, small icons, details, list or tiles. You have that capability here within the list view. Now, let us give our list view a name. Go ahead and move to the properties window. Scroll up to the name property. Let us go ahead and name our list view. We will name LV dates to remember.

By default, our list view does not have any columns. There is nothing to show. Let us give us some column headers to show. Go ahead and click on the smart task and select edit columns. This brings up the column header collection editor. Here is where I can add different members, different columns to my list view. Select the add button.

As you can see, a column header is automatically added for me. And on the right hand side, I can see the properties from my column header. This is very useful in the fact that I do not have to draw down into code and I have to drill out of this window in order to access my properties. You will find this a common feature of control that contain a number of columns or sub items.

Now, let us change some of the properties. Let us go ahead and give this column a name. This column is going to store a list of special dates, so we will call it COM special days. Next, we will go ahead and change the text property to show something more interesting than column header. We will go ahead and type special days.

I also want to increase the column size, scroll down and increase the width to 200. Now that we are finished working with the properties, click okay to close this window.

If you look in the designer, you can see the properties that I have changed are automatically reflected. I can see the column header, special days. Next on what I want to do is go ahead and dock this list view in its parent container. In this case, the parent container is the panel in my split container. Go ahead and dock in parent container. Let us go ahead and make some small adjustments to our form so that the scroll bar disappears.

Next, I will go ahead and want to add the month calendar to the left panel. Go to your common controls in your toolbox and select the month calendar control. Go ahead and drag the month calendar control unto your panel one. Adjust it so you can see it readily. And now, I have most of my user interface in place. Let us go ahead and compile this application to see what it looks like.

In order to compile the application, go to your build menu and choose build your special days. What this does is create an executable file for me. Now that we built our application, let us take a pick the executable. Go to your desktop, select project files, draw down in the part one, lesson three and select your special days. This is what you have been working on so far.

Draw down a little further into your special days and go on to the bin directory. Go into the debug directory and there you will see the executable that you just created. Go ahead and drag that on to the desktop. Desktop software runs as executables or EXE files, much like Microsoft Word or Microsoft Excel, double click on it. Congratulations, you created a running project.

Now, let us experiment with our calendar control. The month calendar control is really just a group of smaller controls. The title bar of the control displays two buttons and two labels. The left button allows you to select the previous months by clicking on the button. The left label displays the currently selected month. Click on this label and jump directly to a month.

On the right side, the right label displays the year of the displayed date. The right button is used to navigate to the next month. The calendar can be configured to display more than one month. To select a year, all you have to do is click on the year number. This changes the year label into a spin button.

To change the year, you can just click that up and down arrows of the spin button. As the spin button is displaying, you can also use the arrow keys of the keyboard to increase or decrease the value. Now that we have our calendar control in place, let us go ahead and add some more programming to this application. Go ahead and close out the application and close out this window and return back to Visual Studio.

The next thing we would like to do is drag up button. Go to your common controls and drag the button control over to your form. You will also see a new feature of Visual Studio 2005, alignment features. These are sticky blue lines that expose interesting points of your controls. I can go ahead and align to these interesting points simply by dropping my control.

Let us go ahead and move our button and align it to the left side of your calendar control. Now, let us work with some properties to the button control.

The first thing we will do is go ahead and modify the appearance. Scroll down your properties window and select the flat style. Instead of standard, we will go ahead and select flat. As you can see now, it blends right into my form. The next thing we will do, we are going to replace the button text with an image. So scroll down to the text property, remove the text property all together, instead, we will be using an image.

Now, scroll up to the image property. You will an ellipsis in this property. Click on the ellipses button, this will navigate to the select resource dialog box. I can choose to use project resources o

Now that we have our form setup, let us go ahead and add some controls to our form. On the left hand side, you will see your toolbox. Navigate down to the containers tab. Container control allow me to group smaller controls with logically and physically. Let us review some... click to read more