Visual studio 2010 SENG 403, Tutorial 2 SENG 403 - Winter 2011

Introduction to Visual Studio Create a project Debug an application agenda We will learn how to: Introduction to Visual Studio Create a project Debug an application Add controls to a form (e.g. checkboxes and buttons) Position controls (using layouts) Add dialog boxes to a form Write code by using IntelliSense Write event handler methods SENG 403 - Winter 2011

Microsoft’s Getting Started Help: a series of sequential lessons that introduces you to Visual C# and Visual Basic. http://msdn.microsoft.com/en-us/library/dd492135.aspx SENG 403 - Winter 2011

Visual Studio.NET Integrated Development Environment – allows the automation of many of the common programming tasks in one environment Writing the code Checking for Syntax (Language) errors Compiling and Interpreting(Transferring to computer language) Debugging (Fixing Run-time or Logic Errors) Running the Application SENG 403 - Winter 2011

4th Generation Programming Environment / Development Language What is Visual C# .Net 4th Generation Programming Environment / Development Language Based on C language Most widely used tool for developing Windows Applications Graphical User Interface (GUI) Menus, Buttons, Icons to help the user Full Object-Oriented Programming (OOP) Language SENG 403 - Winter 2011

Project and Solution Concepts User creates a new project in Visual Studio A solution and a folder are created at the same time with the same name as the project The project belongs to the solution Multiple projects can be included in a solution Solution Contains several folders that define an application’s structure Solution files have a file suffix of .sln Project: contains files for a part of the solution Project file is used to create an executable application A project file has a suffix of .vbproj (if you choose to work with Visual Basic) Every project has a type (Console, Windows, etc.) Every project has an entry point: A Sub procedure named Main or a Form SENG 403 - Winter 2011

How to create a project SENG 403 - Winter 2011

How to create a project This is the start point in all projects and is always done the same way. 1- Create a Windows Forms Application project 2- Give it a name. In the second window make sure C# is selected in the left column also make sure Windows Application Form is selected in the middle column. The give it a name at the button of the window. SENG 403 - Winter 2011

Three main windows Start by clicking Save All. There are three windows: Main window, Solution Explorer, Properties. SENG 403 - Winter 2011

Make it look like this If the positioning is not like this, u can go here and choose Reset Windows Layout to make the IDE look like this. SENG 403 - Winter 2011

Missing window If one of those windows is missing go here and select it. It will be shown in the IDE. SENG 403 - Winter 2011

Close Extra windows SENG 403 - Winter 2011

The main window is where you: Design the Interface and Write the code Right now we see a simple Form in it. Double click on the Form to see the code related to it. Notice that now there are two tabs in the Main window one is showing the code (Form1.cs or called code view) and another shows the graphical view of the Form (Form1.cs [Design] or called design view) you can switch between them. SENG 403 - Winter 2011

Solution explorer window Solution Explorer contains all the files in the project (solution) Click on one of the file and notice the change is Properties window. Now double click on the Form files with the .cs extension. You’ll see one of them will opens the code file and the other one the design view of the Form SENG 403 - Winter 2011

A Property is an attribute of an object. Properties window A Property is an attribute of an object. For example one attribute of a Form is the color of its Background. The Properties Window is where you can change the properties of the objects that you have selected in other windows. SENG 403 - Winter 2011

When you run your program from inside the IDE it is called debugging. Let’s run the program!! When you run your program from inside the IDE it is called debugging. (Integrated Development Environment or IDE is the whole Visual Studio window) Because you are running it to find and fix bugs. To stop debugging click on the Stop button SENG 403 - Winter 2011

Modifying the form using properties window In Solution window select Form1.cs to go to the design view of the Form Now in the Main window click on the Form so that its properties are shown in Properties window. Let’s change the title of the Form. (Change the Text property of the Form to Picture Viewer) You can order the properties by Alphabets or Category. SENG 403 - Winter 2011

Change the size of the form You change the size of the Form using either this or this Run the program to see the changes after changing the size. SENG 403 - Winter 2011

Add controls to the application Pause on the Toolbox tab Click on Containers category and then double click on TableLayoutPanel SENG 403 - Winter 2011

Click on the TableLayoutPanel in the Form Or Selecting a control Click on the TableLayoutPanel in the Form Or Select it from here (from the list right above the Properties window) .... Now you can start modifying TableLayoutPanel properties SENG 403 - Winter 2011

Scroll down the properties and click on the arrow in front of Dock Scroll down the properties and click on the arrow in front of Dock then choose the square in the middle. This will fit the whole object to Form window. Now try resizing the Form, you will see the TableLayout is Docked to the Form and its size changes too. By object we mean the one which is selected right now. So it is the TableLayoutPanel. SENG 403 - Winter 2011

Select the TableLayoutPanel Task list Each cell of the TableLayotPanel can contain a control (e.g. a Button or a Label) Before we start adding a control into those cells first let’s resize them. Select the TableLayoutPanel Notice a small button with a triangle in up right corner of it (as shown in the figure in next slide). Click on it and you’ll see that you can set some of the properties here too. (The list that opens up is called the Task List. It is shown in the figure in the next slide) SENG 403 - Winter 2011

Choose Column and then: set Column1 to 15% set Column2 to 85% Edit rows and columns In the popup menu: Choose Column and then: set Column1 to 15% set Column2 to 85% Choose Row and then : set Row1 to 90% set Row2 to 10% You can also do this by dragging the cells borders. SENG 403 - Winter 2011

Choosing a common control Go to the Toolbox and expand the Common Control category (These are the controls that are commonly used). Select PictureBox. Since the TableLayoutPanel is docked to the Form, the IDE adds the control to the first cell. Note: To delete a control, select it and press the delete key on the keyboard. SENG 403 - Winter 2011

Picturebox properties Open the Task List of the PictureBox and select Dock to the panel container. If you want the image to be the size of the PictureBox, no matter how much you resize the Form: Select the SizeMode property and set it to StretchImage. You can also set the image to expand two columns of the TableLayoutPanel by setting the value of the following property two: ColumnSpan By setting the BorderStyle property to Fixed3D, you’ll see an empty frame when the PictureBox is empty. Here we talk about some of the properties of the PictureBox control SENG 403 - Winter 2011

Note that it is added to the next available cell. Add a checkbox From the controls, add a CheckBox to the Form. We want it to resize the PictureBox when its selection status changes. Note that it is added to the next available cell. Change the Text property of the CheckBox to “Stretch”. Now we want to add three button to the other cell. But the problem is that each cell can contain only one Control. To overcome this problem we use FlowLayoutPanel control in that cell. We add it to the cell and dock it to the cell borders and … now we can either click on the Button control in ToolBox 4 times or copy one added Button and paste it three times. SENG 403 - Winter 2011

Name and size the buttons Name the buttons as: Show picture, Clear the picture, Set the background color, and Close. (Change their Text properties to these) Select one button and then hold the Ctrl key down and select the other buttons: Their common properties are now shown in the property window. Select the AutoSize property and set it to True notice that the size of the buttons are changed automatically according to the text on them. SENG 403 - Winter 2011

Next steps 1- Rename Controls 2- Add event handlers 3- Add dialog box components to the form SENG 403 - Winter 2011

Rename (name) controls Since the texts being shown on the buttons are different from their name (the name used in the codes) we’d better change their name so that they represent the buttons more appropriately in the code. For example, you can name Close as “closeButtun” with no space in between. Change the name of all Buttons accordingly. You don’t have to rename the CheckBox because there is only one check box and you won’t have problem keeping track of it in the code. SENG 403 - Winter 2011

Adding code for the buttons When you click on the buttons their codes will be executed. In order to add the code you first need to double click on the button. An event handler (shown in red rectangular below) will be added to the code and it is executed whenever the button is pressed. SENG 403 - Winter 2011

Event handler Double click the CheckBox to create an event handler for this controller that will be executed when the CheckBox status changes (when some one checks or clears it). Notice the names of the event handlers: They are a combination of the control name and the event that is supposed to happen. By double clicking on the control you are creating handlers for control’s default event. There are other events that you can handle too. We’ll see them later. SENG 403 - Winter 2011

Check out the list of components now Again, above the Properties Window you can see the list of the controls -added to the Form so far. SENG 403 - Winter 2011

Add functionality to the buttons For Show a Picture button: when clicked, an open file dial box appears. For Set Background Color: when selected, a dialog box that enables user to choose the color of the background appears. ------------------------------- To do this we need to first: Add an OpenFileDialog component and a ColorDialog component to the Form. A component is like a control in some ways. Use the ToolBox to add one and use the Properties window to set its properties. ------------------------------ But unlike a simple component a component is not visible on the Form. SENG 403 - Winter 2011

Adding components The figure on the left shows where you can find and add a component like OpenFileDialog component. The figure on the right shows that when a component is added to the Form it is not visible in the Form but instead you can see them down there (where the red oval shows) SENG 403 - Winter 2011

What is an open file dialog You remember Pain in Windows  this is an example of the OpenFileDialog window in Paint where you want to Open a file. SENG 403 - Winter 2011

Modify the openfiledialog component 1- Change the title of the OpenFileDialog component to: Select a Picture File (by changing its Text property) 2- Type these file types in the Filter property of OpenFileDialog component SENG 403 - Winter 2011

It’s now time to add some code. SENG 403 - Winter 2011

Add code (using intellisense) In Visual Studio, as you type code, the IntelliSense opens up a list of suggested completions for the word you are typing. You can select from this list by clicking on an item in it or you can press Tab and the highlighted suggestion will appear in the code. For example in this figure: when you type ‘p’ and the ‘i’ IntelliSense immediately shows a list of the suggested words in C# that contain or start with ‘pi’ SENG 403 - Winter 2011

Add code Add the following code to the showButton_Click method The code says: Open the openFileDialog box and then if the user clicks OK execute the body of the “if”. When you put the period (dot) after openFileDialog1 the IntelliSense will show you the list of openFileDialog1 properties, events, and methods. After the dot, type “sh”, you’ll then see the IntellieSense filters out the suggestions to those starting with “sh”; now choose ShowDialog method and put two parentheses after that (because it is a method it needs ( ) after it) SENG 403 - Winter 2011

Run the program and test it It is a good idea to save your program regularly (using the Save All button) Now run (Debug) the program. And test the key “Show a Picture”. SENG 403 - Winter 2011

Comments Comments are sentences in the code that are just to make the code more clear. They explain the code. Use two slashes like this // at the beginning of the line where you want to write a comment. SENG 403 - Winter 2011

Add the following codes to their corresponding methods Add the following codes to their corresponding methods. If you go back to the Form1.cs tab in the Main window you’ll be able to find those methods (which were generated when you double clicked on the buttons in the Form). SENG 403 - Winter 2011

We are now ready to run the program. SENG 403 - Winter 2011

references & Further examples Microsoft MSDN Website: http://msdn.microsoft.com/en-us/vcsharp/aa336766 http://idealprogrammer.com/videos/visual-studio-2010-over-3-hours-of- video-tutorials/ http://www.learnvisualstudio.net/ SENG 403 - Winter 2011