1 graphical user interfaces part 2 outline multiple document interface (mdi) windows visual...

1

Graphical User Interfaces Part 2

OutlineMultiple Document Interface (MDI) WindowsVisual InheritanceUser-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 and MDI child.

MDI parent

MDI child

MDI child

5


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 = new ChildForm("Child 1",

"\\images\\csharphtp1.jpg");

child.MdiParent = this; // set parent

child.Show(); // display child

7


Common MDI Child Properties

IsMdiChild Indicates whether the Form is an MDI child. (read-only)

MdiParent Specifies the MDI parent Form of the child.

Common MDI Parent Properties

ActiveMdiChild Returns the Form that is the currently active MDI child (returns null if no children are active).

IsMdiContainer Indicates whether a Form can be an MDI parent. Default is False.

MdiChildren Returns the MDI children as an array of Forms.

Common Method

LayoutMdi Determines the display of child forms on an MDI parent. Takes as a parameter an enumeration with possible values ArrangeIcons, Cascade, TileHorizontal and TileVertical.

Common Event MdiChildActivate Generated when an MDI child is closed or activated.

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


Using MenuItem property MdiList.

Separator bar and child windows

9 or more child windows enables the More Windows... option

Child windows list

10


LayoutMdi enumeration values (Part 1).

ArrangeIcons Cascade

11


LayoutMdi enumeration values (Part 2).

TileHorizontal

TileVertical

12

DEMO!

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 menu

New submenu

Exit submenu

Format menu

Cascade option

Tiling options

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 // 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

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 // 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

• 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

Visual Inheritance

21

VisualInheritanceTestForm.csProgram Output

Derived class cannot modify these controls

Derived class can modify this control

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

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

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

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


PaintEventArgs Properties

Use this object inside method OnPaint or Paint to draw on the control.

Graphics Indicates the graphics object of control. Used to draw on control.

ClipRectangle Specifies the rectangle indicating boundary of control.

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

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

Timer

Label

Update label method

Display current time

29

Designing User-Defined Controls1. Create a new Class Library project2. Delete Class1.cs initially provided with the

application3. Right click project in Solution Explorer and

select Add > User Control …4. Name the User control and click Add5. Add controls and functionality to UserControl6. Build the project (.dll)

30

Using User-Defined Controls

1. Create a new windows app

2. Import UserControl1. Right click ToolBox, select Choose Items…

2. Browse for .dll file,

3. Check item

4. Click ok

3. UserControl appears on the ToolBox

31


Custom control added to the ToolBox.

32


Custom control added to a Form.

New Toolbox icon

Newly inserted control

1 graphical user interfaces part 2 outline multiple document interface (mdi) windows visual...

Documents

child child windows

windows form

tiled windows

minimized windows slide

mdi parent mdi child

new child childform

display child slide

set parent child