MDIs

1. MDIs Outline Multiple Document Interface (MDI) Windows Visual Inheritance User-Defined Controls

2. Introduction • Continues study of Graphical User Interface • Explores: • Multiple-document interface windows (MDIs) • Examples: PaintShop Pro or Adobe Photoshop

3. Multiple-Document Interface Windows • Users can edit multiple documents at once • Usually more complex then single-document-interface applications • Application window called parent, others child • Child windows can be arranged in parent window: • Tiled windows: completely fill parent, no overlap • Either horizontal or vertical • Cascaded windows: overlap, same size, display title bar • ArrangeIcons: arranges icons for minimized windows

4. Multiple Document Interface (MDI) Windows MDI parent MDI child MDI child MDI parent and MDI child.

5. Multiple Document Interface (MDI) Windows Single Document Interface (SDI) Multiple Document Interface (MDI)

6. Create a Child form • Create a new Form, set its IsMDIContainer property to true • Create a child form class to be added to form • Select Project | Add Windows Form … name the file • To add the child form to parent, in a parent’s event handler • Set child’s MDIParent property to parent form • Call method Show // create new child ChildForm child = newChildForm("Child 1", "\\images\\csharphtp1.jpg"); child.MdiParent = this; // set parent child.Show(); // display child

7. MDI Windows

8. MDI Windows Parent’s icons: minimize, maximize and close Maximized child’s icons: minimize, restore and close Minimized child’s icons: restore, maximize and close Parent’s title bar displays maximized child Minimized and maximized child windows.

9. Separator bar and child windows 9 or more child windows enables the More Windows... option MDI Windows Child windows list Using MenuItem property MdiList.

10. MDI Windows ArrangeIcons Cascade LayoutMdi enumeration values (Part 1).

11. MDI Windows TileHorizontal TileVertical LayoutMdi enumeration values (Part 2).

12. DEMO!

13. File menu New submenu Exit submenu Format menu Cascade option Tiling options UsingMDI.cs // UsingMDI.cs // Demonstrating use of MDI parent and child windows. privateSystem.Windows.Forms.MainMenumenuStrip1; privateSystem.Windows.Forms.MenuItemfileToolStripMenuItem; privateSystem.Windows.Forms.MenuItemnewToolStripMenuItem; privateSystem.Windows.Forms.MenuItemcsToolStripMenuItem; privateSystem.Windows.Forms.MenuItemcppToolStripMenuItem1; privateSystem.Windows.Forms.MenuItempythonToolStripMenuItem; privateSystem.Windows.Forms.MenuItemexitToolStripMenuItem; privateSystem.Windows.Forms.MenuItemwindowToolStripMenuItem; privateSystem.Windows.Forms.MenuItemcascadeToolStripMenuItem; privateSystem.Windows.Forms.MenuItem tileHorizontalToolStripMenuItem; privateSystem.Windows.Forms.MenuItem tileVerticalToolStripMenuItem;

14. Creating one of the child windows Cascade // create Child 1 when menu clicked private void csToolStripMenuItem_Click( object sender, System.EventArgs e ) { // create new child ChildForm child= newChildForm( “Visual C#", "\\images\\csharphtp1.jpg" ); child.MdiParent = this; // set parent child.Show(); // display child } // set cascade layout privatevoidcascadeToolStripMenuItem_Click( object sender, System.EventArgs e ) { this.LayoutMdi( MdiLayout.Cascade ); }

15. Child class Display title Display picture // FormChild.cs // Child window of MDI parent. publicpartial classChildForm : Form { publicChild( string title, string resourceName ) { // Required for Windows Form Designer support InitializeComponent(); Text = title; // set title text // set image to display in pictureBox pictureBox.Image = Image.FromFile( Directory.GetCurrentDirectory() + resourceName ); } }

16. Visual Inheritance • Create Form by inheriting from another Form • Derived Form inherits functionality of base Form • Derived Form inherits visual aspects of base Form • Visual Inheritance enables developers to achieve visual consistency across applications by reusing code.

17. Visual Inheritance • A base form VisualInheritance.csProgram Output

18. Learn More display method // VisualInheritanceBaseForm.cs // Base Form for use with visual inheritance privateSystem.Windows.Forms.LabelbugsLabel; privateSystem.Windows.Forms.ButtonlearnMoreButton; privateSystem.Windows.Forms.Labellabel1; publicpartial classVisualInheritanceBaseForm : Form { privatevoidlearnMoreButton_Click( object sender, System.EventArgs e ) { MessageBox.Show ( "Bugs, Bugs, Bugs is a product of Bug2Bug.com", "Learn More", MessageBoxButtons.OK, MessageBoxIcon.Information ); } }

19. Before deriving a form from this base class, must produce a .dll • Right click on the project in Solution Explorer, select Properties , then choose Application tab. In OutputTypedrop-down list, change to ClassLibrary, then build to produce a .dll • To create the derived form, create an empty project. • FromProjectmenu, selectAdd Reference • Click Browse, select the .dll file, add using statement. • Modify the line that defines the class to indicate that the application’s Form inherits from class VisualInheritanceBaseForm • You’ll see next screen

20. Visual Inheritance

21. Derived class cannot modify these controls Derived class can modify this control VisualInheritanceTestForm.csProgram Output

22. VisualInheritanceTestForm class is derived from VisualInheritanceBaseForm class Display message box // VisualInheritanceTestForm.cs // Derived Form using visual inheritance. publicclassVisualInheritanceTestForm : VisualInheritanceBase.VisualInheritanceBaseForm { privateSystem.Windows.Forms.ButtonlearnProgramButton; private void aboutButton_Click(object sender, EventArgs e) { MessageBox.Show("This program was created by C. Stringfellow.", "About This Program", MessageBoxButtons.OK, MessageBoxIcon.Information); }

23. User-Defined Controls • Custom controls that inherit from other classes • Example: can change appearance of a label • Custom controls appear in the user’s Toolbox and can be added to Forms, Panels or GroupBoxes the way we add other controls

24. Creating User-Defined Controls • Derive a class from an existing Windows Form Control • Easiest way • Add functionality to preexisting control. • To add to the control’s appearance, override method OnPaint (call base class OnPaint) • Create UserControl composed of existing controls • Use class UserControl • Acts as a container for controls added to it • Cannot override OnPaint for constituent controls: their appearance modified only by adding code to each control’s Paint event.

25. Creating User-Defined Controls • Inherit from class Control • Defines a brand-new control • Override OnPaint, call base class OnPaint and include methods to draw the control. • Can customize control appearance and functionality

26. User-Defined Controls

27. Creating A Clock Control • Select Project > Add User Control • Displays a dialog from which we select type of control to add • Select User Control • Name the file (and class) ClockUserControl • UserControl composed of • Label • Timer • Invisible component • Tick event • Set Timer interval to 1000 milliseconds • Enabled property set to true • Whenever timer generates a tick event, label is updated • Once created, our control appears as an item on the ToolBox

28. Label Timer Update label method Display current time privateSystem.Windows.Forms.TimerclockTimer; privateSystem.Windows.Forms.LabeldisplayLabel; // User-defined control with a timer and a label. publicclassClockUserControl : UserControl { // update label at every tick privatevoidclockTimer_Tick(object sender, System.EventArgs e ) { // get current time (Now), convert to string displayLabel.Text = DateTime.Now.ToLongTimeString(); } // end method clockTimer_Tick } // end class ClockUserControl

29. User-Defined Controls To share your custom control • Create a new Class Library project • Delete Class1.cs initially provided with the application • Right click project in Solution Explorer and select Add > User Control … • Name the User control and click Add • Add controls and functionality to UserControl • Build the project (.dll) • Select Project > Properties to find the output directory and output file

30. User-Defined Controls Project properties dialog.

31. User-Defined Controls To use your custom control • Create a new windows app • Import UserControl • Right click ToolBox, select Customize ToolBox • Select .NET Framework Components tab • Browse for .dll file, • Click ok • UserControl appears on the ToolBox

32. User-Defined Controls Custom control added to the ToolBox.

33. Newly inserted control New Toolbox icon User-Defined Controls Custom control added to a Form.