Module 1: Course Project – Create A Windows Form Application With Basic Controls

Background

This course project is designed to help you practice using your skills. Each week, you will learn important concepts. Then, you will apply these concepts to build an amazing course project over the next seven weeks. What’s more, this project will have a Graphical User Interface (GUI) instead of using the console. This course project has two parts. For the first couple of weeks, you will be create a basic GUI and learn how to work with GUI controls while practicing basic programming concepts. After that, you will create an object oriented project.

Part 1: Scenario

Lucky you! Your manager has put you in charge of the lyrics videos for the monthly lip synch contest. Each contestant “sings” along with a song of their choice, prompted by the lyrics in the video. Essentially, there is a long list of songs, along with associated URLs and other information. Your manager has some basic functionality in mind, such as the ability to add and remove songs, as well as create playlists and show the videos. The application must run fast, and be updated with new features over time. Maintenance is key!

NOTE: For this project, we strongly suggest keeping a Notepad or MS Word document handy, containing the names of a few songs and associated video URLs. The URLs can be local video files on your hard drive, or videos on web-based sites such as YouTube.com.

Week 1: Create a Windows forms application with basic controls

Objectives

1. To start the course project

2. Design and create two Windows forms with GUI controls

3. Read from and update GUI control variables

Introduction

Steps

1. Download and install Visual Studio Community edition: https://visualstudio.microsoft.com/vs/community/

2. Start Visual Studio and click on Create a New Project.

3. Create a new C#.net Windows Forms App and call it “lastname_CourseProject_part1”. Make sure that your project location is set to somewhere where you will find it easily!

Note: If you do not see Windows Forms App (.NET Framework), scroll down and click on “Install more tools and features”

Ensure that the following workloads are installed:

Once they are installed launch Visual Studio. Create a new C# Windows Forms App and name it lastname_CourseProject_part1 and replace lastname with your last name then click Create.

4. Make a new form. You are now ready to start designing your form! You should be presented with a blank form like the one below. Currently it is called Form1, which is both boring and poor programming practice. A form, as well as forms controls, should have meaningful names, just like all other variables.

Follow the videos below. The first is a walkthrough of the Form Designer environment and a little tutorial showing you how to adjust the properties of your form. The second demonstrates how to add controls to this form and adjust their properties (including their variable names). You will create 5 labels with the Text property as the following “Title”, “Artist”, “Genre”, “Year”, and “URL”. Then you will create 6 textboxes. The first five should line up with the labels and should have the following names “titleText”, “artistText”, “genreText”, “yearText”, “urlText”. The 6th text box should be named outputText and set the multiline property to true. That text box will be a large rectangle to the side. In addition, a button control should be placed below the labels and textboxes. The text property should be “Add Song” and the button named AddButton.

The final result should look like this.

If you hit the green Start arrow, you will see something like this. Look, your programming is running! Congratulations, you have created your first form! Click on the little red square to stop the program execution and go back to the editor.

5. Reading text from text boxes and displaying it. Now it’s time to make the form actually do something. The goal is for the user to type in a song title, artist, genre, year, and URL, and then click “Add Song.” To do this, you have to add an event listener for the “Add Song” button, called “AddButton_Click.” This event listener will take text that the user typed into the textboxes on the left-hand side of your form, connect it all into one long string, and put that string into the outputText textbox.

The code for the AddButton_Click event handler (as shown in the video) is included in the screenshot below.

Your final result will look something like this!

Deliverables Week 1

· Use the Word document template and put your information at the top, including your name, course number, and current date. Take a screenshot while your application is running. Paste the screenshot to a Word document below your information. Finally, copy-paste your Form code (only the code for the form, not program.cs) to the Word document below the screenshot. Save and close your Word document. Submit the Word document for your first Course Project deliverable.