Lesson 3 - Birthday Reminder - Designing Forms

In the previous lesson, Simple Calculator in C# .NET Windows Forms, we learned how to handle events and created a simple calculator. In today's C# .NET tutorial, we're going to work on an app that reminds friends' birthday. The application will look like this:

Form design

As always, we'll start by designing the form. But this time, we'll have two forms in the app.

The Overview Form

The overview form is the main application window, displaying an overview of the people and their birthdays. We'll rename the form to OverviewForm, set its title to Anniversary, and we can also set an icon for it again. We'll also set the StartPosition to CenterScreen. By the way, notice that forms are named in PascalCase (the first letter is capital), and the controls in camelCase. This is because forms are class and its controls are instances.

Next, we're going to need the following controls:

• 8x Label
• 2x Button
• 1x ListBox
• 1x MonthCalendar

Labels

Place the labels as shown in the picture above. Set the left side labels' text as shown in the picture, as well. We won't set text for the labels on the right side, but we'll set their names so we can set the text from the code later. Name the labels on the right side as: todayLabel, nearestLabel, birthdayLabel, ageLabel.

Buttons

We'll place two buttons at the bottom and set their Text to Add and Remove. You are probably not surprised that their names are going to be addButton and removeButton. We can set some icons to the buttons, those in the picture can be found at http://www.iconfinder.com. The size is 32x32 pixels. To set the Image, we'll use the Image property and click the "..." button. We can now load the image as Local resource or Project resource. Select Local resource and import the corresponding image from your computer. To place the image to the left, next to the button's text, we'll set the TextImageRelation property to ImageBeforeText. We can set the button's height to be automatic using the AutoSize property. We'll do the same for the second button.

ListBox

ListBox is basically an expanded ComboBox that we introduced in the previous lesson. Besides that, it works exactly the same and we'll use it to display the list of people. We'll name the ListBox as peopleListBox, and set the Sorted property to True to sort the items in it, alphabetically in our case.

MonthCalendar

MonthCalendar is used to display an expanded month or several months. The control is primarily designed to select an interval between two dates, but we'll use it to show the birthday of the selected person. We'll name it as birthdayMonthCalendar and set its Enabled property to False, so the user cannot manipulate it. Next, we'll turn off ShowToday and set MaxSelectionCount to 1. This means we can only pick 1 day at a time.

Anchors

When you run the application and enlarge the form, it'll look like this:

Of course, it'd be more desirable to use the empty space for the list of people. We may have many more of them, and they may have longer names, too. For this reason, we'll set anchors for our form controls. The anchor specifies to which form edges the control is attached to. By default, all controls are attached only the left and top edges. We surely want the ListBox to stick to the bottom and right edges as well. When the form is resized, the ListBox should be resized too. We'll set the Anchor property of the ListBox like this:

However, now if you run the application and resize the form, the result might not be what you expected. We have to modify the controls below and next to the ListBox. These must be attached to the bottom and to the right edge of the window, respectively.

To both buttons, we'll set only the lower anchor. For the MonthCaledar and the four labels above it, we'll turn off the left anchor and turn on the right one. After resizing the window in the running application, you should get the following result:

The overview form is now ready.

The Add Person Form

The second form will be for adding new people and will look like this:

To add a new form, we'll right-click the project in Solution Explorer, then select Add -> Windows Form. We'll name it PersonForm and set its title to Add person. We'll set the StartPosition to CenterScreen and set the icon if you want to. We'll also set the FormBorderStyle to FixedSingle and disable maximizing using the MaximizeBox property, so the window can't be resized nor maximized.

We'll also add the following controls into the form:

• 2x Label
• 1x TextBox
• 1x DateTimePicker
• 1x Button
• 1x PictureBox

Labels

Labels here are used just to describe the text fields, so just set the Text as shown in the picture above, you don't even need to name them.

TextBox

TextBox is, as you may have guessed, a field where the user of the application can enter any text. It's ideal for the purpose of entering a name. Some beginners use it to enter numbers or dates, which is usually wrong, as we explained last time. Name the TextBox as nameTextBox.

DateTimePicker

Again, you may have guessed that the DateTimePicker will be used to select date and time. We'll name it birthdayDateTimePicker. In Format, we can choose whether we want to select a date (and in what format) or time. Of course, we're not interested in specific time for birthdays, but we might find it useful in another app.

Button

We'll name the button to confirm the dialog as okButton and set its Text to OK.

PictureBox

PictureBox is a very interesting control, which is used either for displaying an image or for drawing shapes, which we'll take a look at in the following lessons. Here, we'll just put an icon into the PictureBox to make the form look nicer. You may not be surprised we'll do this using the Image property. If the icon is larger than the PictureBox, you can set the SizeMode property to Zoom.

The forms are ready. In the next lesson, Birthday Reminder - Logic Layer, we'll create classes with the application logic. Created forms are available to download below.