1

Scroll Bars

Providing Scrollbars

2

Objectives

You will be able to: Use Windows Graphics to display

tabular information on a Windows form.

Add graphics capability to objects. Provide scroll bars on a Windows

form.

3

Object Oriented Drawing and Printing

In an object oriented program, everything that appears on the screen should be the visual representation of an object.

Objects should know how to draw themselves. Printing is essentially the same.

4

Schedule Grid

Let’s modify the Schedule Viewer program to use Windows graphics instead of the DataGridView.

We will teach the Schedule_Record class how to draw itself.

5

Schedule Grid

In order for schedule entries to fit on one line with legible type, display only:

Course Number Section Course Title Days Time Building Room

6

Menu

Provide a File menu with commands: Open Print Exit

Use the common dialog for Open. Menu commands should be enabled

only when relevant. Enable Print only when there is something to print. Disable Open once a file is open.

7

Scroll Bars

Provide scroll bars to permit the user to view all of the schedule when it doesn’t fit in the window.

The scroll bars should not be visible if the schedule fits in the window.

8

Start with Schedule Viewer Example

Download the example http://www.cse.usf.edu/~turnerr/Software_Systems_Develo

pment/Downloads/2011_02_22_Schedule_Viewer_2/ File Schedule_Viewer.zip

Also the schedule data files schedule_2010_fall.csv schedule_2010_spring.csv schedule_2011_spring.csv

9

Getting Started

Be sure we have a known Starting Point

Expand and build the project. Verify that the program works.

10

Out with the old!

Delete the DataGridView.

Keep the menu strip and openFileDialog.

11

Stripped Down Project

12

Out with the old!

View the code for Form1.cs Delete all of the DataGridView code.

Lines 86 - 99 (Most of openToolSTripMenuItem_Click)

Lines 63 - 78 (Most of Form1 constructor )

Keep file and menu related functions

Build. Verify that project compiles.

13

In With the New!

Add some member variables to Form1

using System.Drawing;

...

public partial class Form1 : Form

{

List<Schedule_Record> Schedule;

// Graphics information

Font Font1 = new Font("Arial", 10);

Brush Brush1 = SystemBrushes.WindowText;

// Screen information

const int Top_Margin = 30;

const int Bottom_Margin = 30;

const int Left_Margin = 20;

14

Add Graphics

Add Output method to class Schedule_Record.

Initially make it a stub Just output “Schedule Entry”

public void Output(Graphics G, Font F, Brush B, Point P)

{

Pen pen = new Pen(Color.Black, 1);

G.DrawString("Schedule Entry", F, B, P);

}

Will need using System.Drawing;

15

Add a Paint Event Handler to Form1

private void Form1_Paint(object sender, PaintEventArgs e)

{

int y_pos = Top_Margin;

if ((Schedule == null) || (Schedule.Count == 0))

{

return;

}

for (int i = 0; i < Schedule.Count; i++)

{

Point P = new Point(Left_Margin, y_pos);

Schedule[i].Output(e.Graphics, Font1, Brush1, P);

y_pos += Font1.Height;

}

}

16

Open

private void openToolStripMenuItem_Click(object sender,

EventArgs e)

{

Import_Schedule();

this.Invalidate();

this.Update();

}

Build and run.

In Form1.cs

17

Program Running

18

Teaching the Schedule Record to Output Itself

A Schedule Record object should know how to draw itself on the screen or a printed page.

But it must be told: Where to draw itself. The drawing objects to use:

Graphics Font Brush

Download: http://www.cse.usf.edu/~turnerr/Software_Systems_Develop

ment/Downloads/2011_03_22_Scroll_Bars/Output.cs

19

Implement Schedule_Record Output()

public void Output(Graphics G, Font F, Brush B, Point P)

{

Pen pen = new Pen(Color.Black, 1);

int X_Pos = P.X;

int Y_Pos = P.Y;

Rectangle R = new Rectangle(X_Pos, Y_Pos, 75, F.Height);

G.DrawString(course_number, F, B, R);

G.DrawRectangle(pen, R);

X_Pos += R.Width;

R = new Rectangle(X_Pos, Y_Pos, 40, F.Height);

G.DrawString(section.ToString(), F, B, R);

G.DrawRectangle(pen, R);

X_Pos += R.Width;

R = new Rectangle(X_Pos, Y_Pos, 250, F.Height);

G.DrawString(course_title, F, B, R);

G.DrawRectangle(pen, R);

X_Pos += R.Width;

20

Schedule_Record Output()

R = new Rectangle(X_Pos, Y_Pos, 75, F.Height);

G.DrawString(days, F, B, R);

G.DrawRectangle(pen, R);

X_Pos += R.Width;

R = new Rectangle(X_Pos, Y_Pos, 160, F.Height);

G.DrawString(time, F, B, R);

G.DrawRectangle(pen, R);

X_Pos += R.Width;

R = new Rectangle(X_Pos, Y_Pos, 40, F.Height);

G.DrawString(building, F, B, R);

G.DrawRectangle(pen, R);

X_Pos += R.Width;

R = new Rectangle(X_Pos, Y_Pos, 60, F.Height);

G.DrawString(room, F, B, R);

G.DrawRectangle(pen, R);

X_Pos += R.Width;

}

21

Program Running

Note that the schedule runs off the page.

22

Scroll Bars

Let’s add scroll bars.

The Form object will do most of the work for us.

For documentation search for autoscroll in Visual Studio Help.

23

Autoscroll

To get automatic scrollling we must: Set the Autoscroll property to True. Set AutoScrollMinSize property

Scroll bars will be added if form is smaller.

Data dependent! Adjust X and Y coordinates for

output to account for scrolling: AutoScrollPosition.X; AutoScrollPosition.Y;

24

In Schedule_Record.cs

In class definition:

private static int line_width = 500;

public static int Line_width

{

get { return line_width; }

}

At end of function Output()

line_width = X_Pos;

25

Form1_Paint

At top of function:if ((Schedule == null) || (Schedule.Count < 1))

{

return;

}

int Document_Length =

Schedule.Count * Font1.Height + Top_Margin + Bottom_Margin;

int line_width = Schedule_Record.Line_width;

this.AutoScrollMinSize =

new Size(Left_Margin + line_width, Document_Length);

int dx = this.AutoScrollPosition.X;

int dy = this.AutoScrollPosition.Y;

...

Point P = new Point(Left_Margin + dx, y_pos + dy);

26

We have scroll bars!

27

Just One Problem

The menu scrolls off the screen!

Need to scroll just the area below the menu.

How?

28

Saving the Menu

Put a Panel below the menu Fill rest of form

Draw on the Panel rather than the form.

Scroll the panel.

29

Form with Panel

30

Configure the Panel

Position and size the panel to fill the form below the menu strip.

Anchor it on all sides.

31

Configure the Panel

32

Drawing on the Panel

Now we need to draw on the panel rather than the form.

Set AutoScroll true. Add a Paint event handler for the

panel.

Move the contents of Form1_Paint to panel1_Paint.

33

Scrolling the Panel

Change the scrolling information from form1 to panel1.

In openToolStripMenuItem_Click ()...this.panel1.Invalidate();

this.panel1.Update();

In panel1_Paint ()...this.panel1.AutoScrollMinSize =

new Size(Schedule_Record.Line_Width, Document_Length);

int dx = this.panel1.AutoScrollPosition.X;

int dy = this.panel1.AutoScrollPosition.Y;

34

Program Running

35

Some Finishing Touches

Change panel1 BackColor to white.

Add a bit of space below the panel.

Set the Text property of Form1 CSE Schedule

36

Some Finishing Touches

37

Program Running