1. Visual studio 2010
SENG 403, Tutorial 2
SENG Winter 2011

2. 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 Winter 2011

3. Microsoft’s Getting Started Help:
a series of sequential lessons that introduces you to Visual C# and Visual Basic.
SENG Winter 2011

4. 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 Winter 2011

5. 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 Winter 2011

6. 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 Winter 2011

7. How to create a project
SENG Winter 2011

8. 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 Winter 2011

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

10. 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 Winter 2011

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

12. Close Extra windows
SENG Winter 2011

13. 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 Winter 2011

14. 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 Winter 2011

15. 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 Winter 2011

16. 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 Winter 2011

17. 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 Winter 2011

18. 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 Winter 2011

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

20. 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 Winter 2011

21. 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 Winter 2011

22. 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 Winter 2011

23. 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 Winter 2011

24. 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 Winter 2011

25. 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 Winter 2011

26. 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 Winter 2011

27. 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 Winter 2011

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

29. 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 Winter 2011

30. 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 Winter 2011

31. 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 Winter 2011

32. 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 Winter 2011

33. 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 Winter 2011

34. 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 Winter 2011

35. 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 Winter 2011

36. 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 Winter 2011

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

38. 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 Winter 2011

39. 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 Winter 2011

40. 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 Winter 2011

41. 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 Winter 2011

42. 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 Winter 2011

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

44. references & Further examples
Microsoft MSDN Website: video-tutorials/
SENG Winter 2011