1. 1 Graphical User Interfaces Part 2 Outline Multiple Document Interface (MDI) Windows Visual Inheritance User-Defined Controls

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

3. 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. 4 Multiple Document Interface (MDI) Windows MDI parent and MDI child. MDI parent MDI child

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

6. 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 = new ChildForm( "Child 1", "\\images\\csharphtp1.jpg" ); child.MdiParent = this; // set parent child.Show(); // display child

7. 7 Multiple Document Interface (MDI) Windows

8. 8 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. 9 Multiple Document Interface (MDI) Windows Using MenuItem property MdiList. Separator bar and child windows 9 or more child windows enables the More Windows... option Child windows list

10. 10 Multiple Document Interface (MDI) Windows LayoutMdi enumeration values (Part 1). ArrangeIconsCascade

11. 11 Multiple Document Interface (MDI) Windows LayoutMdi enumeration values (Part 2). TileHorizontalTileVertical

12. 12 DEMO!

13. 13 UsingMDI.cs // UsingMDI.cs // Demonstrating use of MDI parent and child windows. private System.Windows.Forms.MainMenu menuStrip1 ; private System.Windows.Forms.MenuItem fileToolStripMenuItem ; private System.Windows.Forms.MenuItem newToolStripMenuItem ; private System.Windows.Forms.MenuItem csToolStripMenuItem ; private System.Windows.Forms.MenuItem cppToolStripMenuItem1 ; private System.Windows.Forms.MenuItem pythonToolStripMenuItem ; private System.Windows.Forms.MenuItem exitToolStripMenuItem ; private System.Windows.Forms.MenuItem windowToolStripMenuItem ; private System.Windows.Forms.MenuItem cascadeToolStripMenuItem ; private System.Windows.Forms.MenuItem tileHorizontalToolStripMenuItem ; private System.Windows.Forms.MenuItem tileVerticalToolStripMenuItem ; File menuNew submenu Exit submenu Format menuCascade option Tiling options

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

15. 15 // FormChild.cs // Child window of MDI parent. public partial class ChildForm : Form { public Child ( 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 ); } Display title Display picture Child class

16. 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. 17 Visual Inheritance A base form VisualInheritance.cs Program Output

18. 18 // VisualInheritanceBaseForm.cs // Base Form for use with visual inheritance private System.Windows.Forms.Label bugsLabel ; private System.Windows.Forms.Button learnMoreButton ; private System.Windows.Forms.Label label1 ; public partial class VisualInheritanceBaseForm : Form { private void learnMoreButton_Click ( object sender, System.EventArgs e ) { MessageBox.Show ( " Bugs, Bugs, Bugs is a product of Bug2Bug.com", "Learn More", MessageBoxButtons.OK, MessageBoxIcon.Information ); } Learn More display method

19. 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 OutputType drop-down list, change to ClassLibrary, then build to produce a.dll To create the derived form, create an empty project. From Project menu, select Add 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. 20 Visual Inheritance

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

22. 22 // VisualInheritanceTestForm.cs // Derived Form using visual inheritance. public class VisualInheritanceTestForm : VisualInheritanceBase.VisualInheritanceBaseForm { private System.Windows.Forms.Button learnProgramButton ; // invoke when user clicks Learn the Program Button private void learnProgramButton_Click ( object sender, System.EventArgs e ) { MessageBox.Show( "This program was created by C. Stringfellow "Learn the Program", MessageBoxButtons.OK, MessageBoxIcon.Information ); } VisualInheritanceTestForm class is derived from VisualInheritanceBaseForm class Display message box

23. 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. 24 Creating User-Defined Controls 1.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 ) 2.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. 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. 26 User-Defined Controls

27. 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. 28 private System.Windows.Forms.Timer clockTimer ; private System.Windows.Forms.Label displayLabel ; // User-defined control with a timer and a label. public class ClockUserControl : UserControl { // update label at every tick private void clockTimer_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 TimerLabelUpdate label method Display current time

29. 29 Designing User-Defined Controls 1.Create a new Class Library project 2.Delete Class1.cs initially provided with the application 3.Right click project in Solution Explorer and select Add > User Control … 4.Name the User control and click Add 5.Add controls and functionality to UserControl 6.Build the project (.dll)

30. 30 Using User-Defined Controls 1.Create a new windows app 2.Import UserControl 1.Right click ToolBox, select Choose Items… 2.Browse for.dll file, 3.Check item 4.Click ok 3.UserControl appears on the ToolBox

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

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