BIM313 – Advanced Programming

Windows Forms

1

Contents

• Creating a Windows Forms Application• A sample program: Picture Viewer

2

Creating a New Project

3

4

5

6

The First Changes

• The Name property is the first property you should change when you add a new object to your project.

• Change the filename of the form from the Solution Explorer too.

• Note: When you change the filename, Visual Studio asks you to change the name of the form.

7

8

9

Changing the Title of the Form

• Changing the filename and name of the form does not change the title of the form which is displayed at the top-left corner of the window.

• You should change the title of the form using the Text property.

10

11

Giving the Form an Icon

• Giving the Form an Icon– In the Properties windows, change the Icon

property of the form.• Changing the Size of the Form– Change the Width and Height properties of the

form under the Size property.– Both values are represented in pixels.– You can also size a form by dragging its border.

12

13

Adding Controls to the Form

• Use the Toolbox window.• Some controls in the toolbox

have visible interface, but some not.

• You can make the toolbox visible always by clicking the pushpin picture at the top-right corner.

14

Designing an Interface

1. Design the form’s user interface2. Write the code behind the interface.

• This procedure is generally the best to design a form.

15

Adding a Visible Control to a Form

• Visible controls can be added in two ways:1. By double-clicking the control2. By dragging the control and dropping on the

form.• You can place the controls wherever you

want by dragging them on the form.• Let’s add two buttons and a PictureBox

control to the form…

16

17

Property Value

Name btnSelectPicture

Location 295, 10

Size 85, 23

Text Select Picture

Property Value

Name btnQuit

Location 295, 40

Text Quit

Property Value

Name picShowPicture

BorderStyle FixedSingle

Location 8, 8

Size 282, 275

Adding an Invisible Control to a Form

• Not all controls have physical appearance.• They are not designed for user interactivity.• Examples: OpenFileDialog and SaveFileDialog

controls• You can add them to the control by the same

way as the visible controls.• They are shown below the form at design time

but they are not shown at the runtime.

18

Adding an OpenFileDialog Control

• Add an OpenFileDialog control to the form and change the following properties:

19

Property Value

Name ofdSelectPicture

Filename <make empty>

Filter Windows Bitmaps|*.BMP|JPEG Files|*.JPG

Title Select Picture

20

Executing the Program

• Simply press Ctrl+F5– Runs the program normally

• You can press F5 or click the debug button on the toolbar instead– But this runs the program in debug mode and it is

a bit slower.• Clicking the buttons does not do anything now

because we didn’t write any code for them!

21

Writing the Code Behind an Interface

• Visual C# is an event-driven language, which means that code is executed in response to events.

• These events might come from users, such as a user clicking a button and triggering its Click event, or from Windows itself.

22

Letting a User Browse for a File

• When you double-click a control on a form in Design view, the default event for that control is displayed in a code window.

• The default event for a Button control is its Click event.

• Double-click the Select Picture button now to access its Click event in the code window.

23

24

The Content of the Methodprivate void btnSelectPicture_Click(object sender, EventArgs e){ // Show the open file dialog box. if (ofdSelectPicture.ShowDialog() == DialogResult.OK) { // Load the picture into the picture box. picShowPicture.Image = Image.FromFile(ofdSelectPicture.FileName);

// Show the name of the file in the form’s caption. this.Text = "Picture Viewer (" + ofdSelectPicture.FileName + ")"; }}

25

Terminating a Program Using a Code

• Write the following code into the Click event of the Quit button:

// Close the window and exit the applicationthis.Close();

26

27

Execution of the Program

28

Exercises

• Change your Picture Viewer program so that the user can also locate and select GIF files. (Hint: Change the Filter property of the OpenFileDialog control.)

• Change the background color of the form.• Change the background color of the buttons.• Change the color of the texts on the buttons.• What happens if you try to display a larger

image? How can you solve this problem?29