001 Introduction to MDI in C#.

Net
Prepared by: Mr. Rogelio V. del Cano
Estimated Duration: 6 hours

Objectives:

At the end of the module, students should be able to:

Create an MDI and Children Forms Add Menu Strip, Tool Strip, Status Strip, Notify Icon, and Context Menu Strip Add functional codes on each strip.

001 Introduction to MDI in C#.Net

Part I
MDI Children forms Windows

001 Introduction to MDI in C#.Net

Create MDI

Rename Form1 as mdiMain Change its icon (select any icon related to sales and inventory system) Set IsMdiContainer to True Change Text property to: Main Menu Change WindowState to: Maximized
001 Introduction to MDI in C#.Net 4

Add a Customer Form

1.
2.

3.
4.

5.
6.

Click Project, Add Windows Form Type frmCustomer.cs Change its BackColor to: Red Change its Icon (#39) Change its Size to: 608, 605 Change its Text to: Customer
001 Introduction to MDI in C#.Net 5

Add a Product Form

1.
2.

3.
4.

5.
6.

Click Project, Add Windows Form Type frmProduct.cs Change its BackColor to Green Change its Icon (#32) Change its Size to: 608, 605 Change its Text to: Product
001 Introduction to MDI in C#.Net 6

Add a Supplier Form

1. 2. 3. 4. 5. 6.

Click Project, Add Windows Form Type frmSupplier.cs Change its BackColor to Blue Change its Icon (#27) Change its Size to: 608, 605 Change its Text to: Supplier
001 Introduction to MDI in C#.Net 7

Add a MenuStrip to mdiMain

1.

2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.

Go back to mdiMain, Designer View Double-click menuStrip from the ToolBox Rename it to menuStripMain Click Type Here from the mdiMain Type &File Maintenance then press the enter key Type &Customer then enter Type &Product then enter Type &Supplier then enter Type (hyphen) then enter Type &Hide then enter Type (hyphen) then enter Type &Relog Type &Logout Type (hyphen) then enter Type E&xit then enter

001 Introduction to MDI in C#.Net

Add Image to Tool Strip Menu Item

1.

Click Image, Local Resource,

Note: You are freeIntroduction to MDI inadd more images. 001 to change or C#.Net

Add Image to Tool Strip Menu Item

Click Image, Local Resource, 2. Click Import
1.

Note: You are freeIntroduction to MDI inadd more images. 001 to change or C#.Net

10

Add Image to Tool Strip Menu Item

Click Image, Local Resource, 2. Click Import 3. Browse then select an icon
1.

Note: You are freeIntroduction to MDI inadd more images. 001 to change or C#.Net

11

Add Image to Tool Strip Menu Item

Click Image, Local Resource, 2. Click Import 3. Browse then select an icon 4. See the icon
1.

Note: You are freeIntroduction to MDI inadd more images. 001 to change or C#.Net

12

Add Shortcut keys to Tool Strip Menu Items

1.

Customer Ctrl+F1

001 Introduction to MDI in C#.Net

13

Add Shortcut keys to Tool Strip Menu Items

1.
2.

Customer Ctrl+F1 Product Ctrl+F2

001 Introduction to MDI in C#.Net

14

Add Shortcut keys to Tool Strip Menu Items

1.
2. 3.

Customer Ctrl+F1 Product Ctrl+F2 Supplier Ctrl+F3

001 Introduction to MDI in C#.Net

15

Add a menuStrip to the mdiMain (cont.)

Click the Type Here beside the File Maintenance pull down menu Type &Window, then press the enter key Type &Cascade then enter Type &Horizontal then enter Type &Vertical then enter Type &Arrange
001 Introduction to MDI in C#.Net 16

Review Tool Strip Menu Item Names

File Maintenance fileMaintenanceToolStripMenuItem Customer customerToolStripMenuItem Product productToolStripMenuItem Supplier supplierToolStripMenuItem Hide hideToolStripMenuItem Relog relogToolStripMenuItem Logout logoutToolStripMenuItem Exit exitToolStripMenuItem

001 Introduction to MDI in C#.Net

17

Review Tool Strip Menu Item Names (cont.)

Window windowToolStripMenuItem

Cascade cascadeToolStripMenuItem Horizontal horizontalToolStripMenuItem Vertical verticalToolStripMenuItem Arrange arrangeToolStripMenuItem

001 Introduction to MDI in C#.Net

18

Codes to Display the Customer Form

Double-click the Customer tool strip menu item from the File Maintenance pull down menu Type the following codes:
1.

Form newform = new frmCustomer(); newform.MdiParent = this; newform.Show();

19

2. 3.

001 Introduction to MDI in C#.Net

Codes to Display the Product Form

Double-click the Product tool strip menu item from the File Maintenance pull down menu Type the following codes:

Form newform = new frmProduct(); newform.MdiParent = this; newform.Show();

001 Introduction to MDI in C#.Net

20

Codes to Display the Supplier Form

Double-click the Supplier tool strip menu item from the File Maintenance pull down menu Type the following codes:

Form newform = new frmSupplier(); newform.MdiParent = this; newform.Show();

001 Introduction to MDI in C#.Net 21

Test and run your program

Press F5 to run your program Click the File pull down menu Display the following forms

Customer Product Supplier

001 Introduction to MDI in C#.Net 22

Arranging the Forms

Three ways to arrange the children forms.

Cascade Horizontal Vertical

001 Introduction to MDI in C#.Net

23

Arranging the Forms (cont.)

There are few reminders to consider before arranging forms.

At least there is one form to arrange. The effect can be better showed if there is more than one form. The window state is not minimized.

001 Introduction to MDI in C#.Net

24

Cascaded Forms

Double-click the Cascade menu item from the mdiMain In the Code Window type:

this.LayoutMdi(MdiLayout.Cascade);

001 Introduction to MDI in C#.Net

25

Horizontal Forms

Double-click the Horizontal menu item from the mdiMain In the Code Window type:

this.LayoutMdi(MdiLayout.TileHorizontal);

001 Introduction to MDI in C#.Net

26

Vertical Forms

Double-click the Vertical menu item from the mdiMain In the Code Window type:

this.LayoutMdi(MdiLayout.TileVertical);

001 Introduction to MDI in C#.Net

27

Arrange Icons Forms

Double-click the Arrange menu item from the mdiMain In the Code Window type:

this.LayoutMdi(MdiLayout.ArrangeIcons);

001 Introduction to MDI in C#.Net

28

See the effect!

Run your program Display your three forms Then use

Cascade Horizontal Vertical Arrange

001 Introduction to MDI in C#.Net

29

Part II: StatusStrip

001 Introduction to MDI in C#.Net

30

Add StatusStrip to the mdiMain

Go back to the designer view Add a StatusStrip by doubleclicking the same from the ToolBox On the Properties Window, change its name to statusStripMain

Note: You may also click the001 Introduction toobject from the object container. status strip MDI in C#.Net

31

Add Panels to the statusStrip

Click Items from the Properties Window Click its ellipsis Click Add Change its Text property to: College of Saint Benilde

001 Introduction to MDI in C#.Net

32

Add the 2nd panel

Click once more the Add button Set the Spring property to: True Delete the contents of the Text property

001 Introduction to MDI in C#.Net

33

Add the 3rd panel

Click again the Add button Rename it to: toolStripStatusLabelUsername Delete the contents of the Text property Note: This tool strip will be used in Advanced Programming

001 Introduction to MDI in C#.Net

34

Add the 4th panel

Click again the Add button Rename it to: toolStripStatusLabelUserLevel Delete the contents of the Text property Note: This tool strip will be used in Advanced Programming

001 Introduction to MDI in C#.Net

35

Add the 5th panel

Click again the Add button Rename it to: toolStripStatusLabelDate Change the Text property to: Date

001 Introduction to MDI in C#.Net

36

Add the 6th panel

Click again the Add button Rename it to: toolStripStatusLabelTime Change the BackColor property to: Khaki (or any color) Add icon to the Image property. Select any clock picture. Change the Text property to: Time

001 Introduction to MDI in C#.Net

37

statusStrip Output

Click the Okay button See the picture below as the final output of your status strip.

Note: Ignore toolStripStatusLabelUsername and toolStripStatusLabelUserLevel

38

001 Introduction to MDI in C#.Net

Add a Timer

Double-click Timer from the ToolBox Change its name to tmrTime Set Enabled to True Set Interval to 1000

001 Introduction to MDI in C#.Net

39

Display the Current Date and Time to the statusStrip

Go back to the mdiMain Double-click the form to view the Code Window Immediately, youll see the Load Event From the Load Event, type

//Local Date and Time this. toolStripStatusLabelDate.Text = DateTime.Today.Date.ToShortDateString(); this. toolStripStatusLabelTime.Text = DateTime.Now.ToLongTimeString();

001 Introduction to MDI in C#.Net

40

Display the Current Date and Time to the statusStrip (cont.)

Run your program Youll see the current date and time Notice: the time is static; it does not change its value.

Note:

Date and time may not be the same as with the above shown picture.
41

001 Introduction to MDI in C#.Net

Make the clock ticks! TikTak

Go back to the object window Double-click the tmrNow Type:

//Local Date and Time this. toolStripStatusLabelDate.Text = DateTime.Today.Date.ToShortDateStrin g(); this. toolStripStatusLabelTime.Text = DateTime.Now.ToLongTimeString();

Run your program and observe toolStripStatusLabelTime

001 Introduction to MDI in C#.Net 42

Part III: Display the Icon and Name of the Selected Form

001 Introduction to MDI in C#.Net

43

Display the Icon and Name of the Selected Form.

Go back to the Code window of the mdiMain Select the Events icon from the Properties Window Double-click MdiChildActivate

001 Introduction to MDI in C#.Net

44

Display the Icon and Name of the Selected Form (cont.)

bool formtry = false; try { this.toolStripStatusLabel2.Text = this.ActiveMdiChild.Text; this.toolStripStatusLabel2.Image = this.ActiveMdiChild.Icon.ToBitmap(); } catch //(Exception msg) //without exception { //MessageBox.Show(msg.Message); formtry = true; } finally { if (formtry == true) { this.toolStripStatusLabel2.Text = null; this.toolStripStatusLabel2.Image = null; } }

001 Introduction to MDI in C#.Net

45

Display the Icon and Name of the Selected Form (cont.)

Run your program and observe your toolStripStatusLabel2 as you display each form. Also navigate from one form to another. After navigating, close each form. Notice that toolStripStatusLabel2 updates automatically.

001 Introduction to MDI in C#.Net

46

Part IV: ToolStrip

001 Introduction to MDI in C#.Net

47

Add a ToolStrip

Double-click the ToolStrip from the ToolBox Rename it to toolStripMain

001 Introduction to MDI in C#.Net

48

Add Buttons to the ToolStrip

Go back to the Items property Click the ellipsis to see the Items Collection Editor Click Add, change the Name to toolStripButtonCustomer Change the Image property (select icon which is similar to Customer form #39) Delete the Text value Type Customer in the ToolTipText property

001 Introduction to MDI in C#.Net

49

Add Buttons to the ToolStrip (cont.)

Click Add again, change the Name to toolStripButtonProduct Delete the Text value Type Product in the ToolTipText property Change the Image property (select icon which is similar to Product form #32)
50

001 Introduction to MDI in C#.Net

Add Buttons to the ToolStrip (cont.)

Click Add again, change the Name to toolStripButtonSupplier Delete the Text value Type Supplier in the ToolTipText property Change the Image property (select icon which is similar to Supplier form #27)
001 Introduction to MDI in C#.Net 51

See the ToolStrip Output

Click the Okay button See the ToolStrip buttons.

001 Introduction to MDI in C#.Net

52

How to Make the ToolStrip Functional?

Double-click toolStripButtonCustomer then type: customerToolStripMenuItem_Click(this, System.EventArgs.Empty);

Note: Upon click of the tool strip button it will call the Customer Menu

001 Introduction to MDI in C#.Net

53

How to Make the ToolStrip Functional? (cont.)

Double-click toolStripButtonProduct then type: productToolStripMenuItem_Click(this, System.EventArgs.Empty);

Double-click toolStripButtonSupplier then type:

supplierToolStripMenuItem_Click(this, System.EventArgs.Empty);

001 Introduction to MDI in C#.Net

54

Run your Program!

Press F5 Hover your mouse pointer on top of each button Click each button As you click each button it calls the corresponding menu item for displaying the form With this, we do not need to re-type our codes We simply call the appropriate menu
001 Introduction to MDI in C#.Net 55

Part V: Preventing Forms to Appear for Several Times

001 Introduction to MDI in C#.Net

56

Prevent the Forms from Multiplying

Put your cursor just above public mdiMain() but inside the namespace Declare the following:

using System.Text; using System.Windows.Forms;

namespace SalesInv { public partial class mdiMain : Form { #region Private Variables private frmCustomer frmNewCust = new frmCustomer(); private frmProduct frmNewProd = new frmProduct(); private frmSupplier frmNewSupp = new frmSupplier(); #endregion
public mdiMain() {
001 Introduction to MDI in C#.Net 57

Prevent the Forms from Multiplying (cont.)

Delete all existing codes from Customer, Products, and Supplier menus Or you may just comment them out using /* and */

Hooraythere are no texts here!

Hooraythere are no texts here!

Hooraythere are no texts here!

001 Introduction to MDI in C#.Net

58

Go Back to mdiMain

From the File Maintenance menu item double-click the Customer

001 Introduction to MDI in C#.Net

59

New Customer Menu Item Codes

if (!(frmNewCust==null)) { if (!(frmNewCust.IsDisposed)) { frmNewCust.MdiParent = this; frmNewCust.Show(); frmNewCust.Focus(); frmNewCust.WindowState = FormWindowState.Normal; frmNewCust.BringToFront(); } else { frmNewCust = new frmCustomer(); frmNewCust.MdiParent = this; frmNewCust.Show(); } } else { frmNewCust = new frmCustomer(); frmNewCust.MdiParent = this; frmNewCust.Show(); } 001 Introduction to MDI in C#.Net 60

New Product Menu Item Codes

if (!(frmNewProd == null)) { if (!(frmNewProd.IsDisposed)) { frmNewProd.MdiParent = this; frmNewProd.Show(); frmNewProd.Focus(); frmNewProd.WindowState = FormWindowState.Normal; frmNewProd.BringToFront(); } else { frmNewProd = new frmProduct(); frmNewProd.MdiParent = this; frmNewProd.Show(); } } else { frmNewProd = new frmProduct(); frmNewProd.MdiParent = this; frmNewProd.Show(); } 001 Introduction to MDI in C#.Net 61

New Supplier Menu Item Codes

toolStripStatusLabel2.Text = "Connecting..."; if (!(frmNewSupp == null)) { if (!(frmNewSupp.IsDisposed)) { frmNewSupp.MdiParent = this; frmNewSupp.Show(); frmNewSupp.Focus(); frmNewSupp.WindowState = FormWindowState.Normal; frmNewSupp.BringToFront(); } else { frmNewSupp = new frmSupplier(); frmNewSupp.MdiParent = this; frmNewSupp.Show(); } } else { frmNewSupp = new frmSupplier(); frmNewSupp.MdiParent = this; frmNewSupp.Show(); 001 Introduction to MDI in C#.Net }

62

No More Repeated Forms

Run your program, press F5 No matter how many times you click your menu items No matter how many times you click your toolbar buttons The forms will no longer multiply!

001 Introduction to MDI in C#.Net

63

Part VI: Notifyicon and ContextMenuStrip

001 Introduction to MDI in C#.Net

64

Add NotifyIcon and ContextMenuStrip

NotifyIcon is used to display a system icon in the System Tray NotifyIcon works with the ContextMenuStrip ContextMenuStrip is similar the MenuStripMain

001 Introduction to MDI in C#.Net

65

Add NotifyIcon

Go back to your mdiMain From the ToolBox, double-click NotifyIcon Change its name to: notifyIconMain Select a new Icon, preferably similar to mdiMain (#32) Set the Text to: Sales and Inventory System Set Visible to: False Leave this control temporarily and go back to the mdiMain
001 Introduction to MDI in C#.Net 66

Add a ContextMenuStrip

Double-click the ContextMenuStrip from the ToolBox Change its name to: contextMenuStripMain Click the contextMenuStrip from the mdiMain then type: &Show showToolStripMenuItem

&Normal normalToolStripMenuItem Ma&ximized

maximizedToolStripMenuItem

M&inimized minimizedToolStripMenuItem1

001 Introduction to MDI in C#.Net

67

Add Codes to the ContextMenuStrip

Double-click the Normal option from the ContextMenuStrip, type:

this.Show(); this.WindowState = FormWindowState.Normal; notifyIconMain.Visible = false;

this.Show(); this.WindowState = FormWindowState.Maximized; notifyIconMain.Visible = false; this.Show(); this.WindowState = FormWindowState.Minimized; notifyIconMain.Visible = false;

On Maximized, type:

On Minimized, type:

001 Introduction to MDI in C#.Net

68

How to Make your NotifyIcon Work?

Go back to mdiMain Click NotifyIcon On the Properties Window, select the ContextMenuStrip property Then select ContextMenuStrip Note: It may take time to display ContextMenuStrip from the options.

001 Introduction to MDI in C#.Net

69

Add Codes to the Hide Menu Item

Double-click Hide then type:

notifyIcon.Visible = true; this.Hide();

Run your program Click Hide In the System Tray, right-click the NotifyIcon

001 Introduction to MDI in C#.Net

70

Part VII: Close

001 Introduction to MDI in C#.Net

71

To Close the mdiMain

Double-click Exit from the mnuMain Type if (MessageBox.Show("Are you sure?", "Confirmation", MessageBoxButtons.YesNo, MessageBoxIcon.Question) == DialogResult.Yes) { this.Close(); }

001 Introduction to MDI in C#.Net

72

Summary
MDI and children forms Menu strip, tool strip, status strip, notify icon, context menu strip LayoutMDI cascade, horizontal, vertical Hide, show, minimized, maximized, normal Date and time codes

001 Introduction to MDI in C#.Net 73

Activity

Develop a User Interface (UI) of a Sales and Inventory System with the following objects:

MDI Form Children Forms Menus, tool, status, and context menu strips Notify icons

The UI must contain the codes that will make the following fully functional:

File Maintenance

Windows
Cascade Horizontal Vertical Arrange

Customer Product Supplier Hide Exit

001 Introduction to MDI in C#.Net

74

Criteria

Forms appear once on click of menus or toolbar icons, hot-keys, and shortcut keys (30%) Name, icon, date, and time appear on the status strip (20%) Layout changes on click of cascade, horizontal, vertical, and arrange (20%) Asks for confirmation on exit (5%) Hides the main form (5%) Responds to the selected context menu options (20%)
001 Introduction to MDI in C#.Net 75