Lecture 7: WinForms

1
Lecture 7WinForms Controls, Part 2
2
Objectives

• Visual Studio .NET ships with a wealth of
  controls for building Graphical User Interfaces
• More WinForms Controls
• Demos of
• Picture boxes
• List boxes
• Menus
• Web browsers
• and more!

3
Part 1

• Picture Boxes and the SlideShow App

4
SlideShow Application

• The SlideShow App reads displays images from a
  folder

Images.txt
5
(1) Layout the GUI

• Layout the following controls on the form

Label
MainMenu
PictureBox
Button
Button
TextBox
6
(2) Configure the controls

• Label
• Name (lblTitle), Font (Bold Italic),
  TextAlignment (MiddleCenter)
• PictureBox
• Name (picImageBox), BorderStyle (FixedSingle),
  SizeMode (CenterImage)
• TextBox
• Name (txtFileName), TabStop (False), TextAlign
  (Center)
• Buttons
• Name (cmdNext, cmdPrev)
• Image (C\Program Files\MS VS .NET
  2003\Common7\Graphics\icons\arrows)
• MainMenu
• File with Exit, Help with About
• Form
• Text, AcceptButton (cmdNext), View menu Tab Order
  (cmdNext 0, )

7
(3) Run test GUI

• Run test controls
• check tab order
• confirm that user can't type into text box
• notice that resizing is a problem

8
(4) Resizing support

• Resizing support based on notion of Anchoring
• controls anchor themselves to 1 or more corners
  of form
• as form resizes, controls resize (or not)
• Example
• picture box should grow shrink with form
• set picture box's Anchor property to Top,
  Bottom, Left, Right so that it followsall 4
  corners of form

9
(5) Maximize app on startup

• You can set form's WindowState property to
  Maximized if you want it to take up whole screen
  when run.
• Run test, controls should properly resize

10
(6) Programming

• The application has two main components
• data structure for keeping track of the images
• GUI form for displaying current image
  interacting with user
• Let's build the data structure component first

11
Creating the data structure

• App class defines main to initialize data
  structure show form
• data structure is an array of filenames, one per
  image

public class App private static String
HomeDir // directory where .EXE is private
static String Images // array of image
filenames private static int
IndexOfCurrentImage // index of image being
displayed public static void main(String
args) HomeDir System.AppDomain.get_Cu
rrentDomain().get_BaseDirectory() Images
System.IO.Directory.GetFiles(HomeDir
"Images\\") IndexOfCurrentImage 0 //
first filename in array // run app by
creating a form and asking .NET to "run" it
System.Windows.Forms.Application.Run( new
Form1() ) //main // ltlt cont'd gtgt
12
Creating the data structure (cont..)

• Since we are defining main(), we must comment out
  the Visual Studio supplied version of main()
  inside Form1.jsl

/ The main entry point for the
application. / / _at_attribute
System.STAThread() / / Comment out this
version of main, since we supplied our own.
public static void main(String args)
Application.Run(new Form1())
/

• Alternatively our code could be placed inside
  Form1.jsl, but logically it should be separate.

13
Accessing the data structure

• App class provides methods for accessing data
  structure

. . . public static String
GetCurrentImageFileName() return
ImagesIndexOfCurrentImage public
static void NextImage()
IndexOfCurrentImage 1 if
(IndexOfCurrentImage gt Images.length)
IndexOfCurrentImage 0 public static
void PrevImage() IndexOfCurrentImage
- 1 if (IndexOfCurrentImage lt 0)
IndexOfCurrentImage Images.length - 1 //
ltlt cont'd gtgt
14
Accessing the Title file

• Finally, App class opens returns contents of
  "Images.txt" file
• which contains the images' title (e.g. Family
  Pictures")

. . . public static String
GetImagesText() String s, filename
filename App.HomeDir "Images.txt"
System.IO.StreamReader reader reader
new System.IO.StreamReader(filename) s
reader.ReadToEnd() reader.Close()
return s //class
15
Programming the GUI

• Five events to program
• File gtgt Exit
• Help gtgt About
• Form Load
• cmdNext Click
• cmdPrev Click

this.Close() MessageBox.Show("SlideShow App
written by...") this.lblTitle.set_Text(
App.GetImagesText() ) DisplayCurrentImage() App
.NextImage() DisplayCurrentImage() App.PrevImag
e() DisplayCurrentImage()
private static void DisplayCurrentImage()
String filename App.GetCurrentImageFileName()
this.txtFileName.set_Text( System.IO.Path.GetF
ileName(filename) ) this.picImageBox.set_Image
( System.Drawing.Image.FromFile(filename) )
16
Programming the GUI

• Before running it, be sure to have supplied
• the Images directory with image files only
• The descriptive Images.txt file

17
(7) Run!

• App should cycle through the images, support
  resizing, etc.

18
Part 2

• List Boxes and the Student Info App

19
Student Info Application

• The Student Info App reads displays student
  information

students.txt
StudentInfo.exe
20
List boxes

• List boxes are essentially a visual data
  structure
• display items are kept in an unbounded data
  structure
• changes to data structure immediately reflected
  in list box
• You have a choice as to what you store in list
  box
• you can store strings, what are displayed as is
• you can store objects, in which case
  obj.toString() is displayed
• storing objects allows easy access to info later
  on

21
Adding to a list box

• Student Info app adds Student objects during Form
  Load
• notice the entire student object is added to a
  list box item

public class Form1 extends System.Windows.Forms.Fo
rm . . . private
java.util.ArrayList students // data structure
of Student objects... private void
Form_Load(...) this.students
StudentsIO.read("students.txt") for (int
i 0 i lt this.students.size() i)
Student s (Student) this.students.get(i)
this.lstStudents.get_Items().Add(s)
//Load
22
Retrieving from a list box

• User selection triggers list box's
  SelectedIndexChanged event
• reference to selected item stored in SelectedItem
  property

. . . private void
lstStudents_SelectedIndexChanged(...)
Student s if (this.lstStudents.get_Select
edItem() null) // nothing selected
return // otherwise get selected student
display their info... s (Student)
this.lstStudents.get_SelectedItem()
this.txtID.set_Text( String.valueOf(s.getID())
) this.txtGPA.set_Text( s.getFormattedGPA()
) //SelectedIndexChanged
23
Part 3

• Additional controls

24
Just the tip of the iceberg

• Dialogs, toolbars, etc.
• Thousands of additional controls
• .NET and ActiveX
• right-click on Toolbox
• Then "Add/Remove Items"
• Example!
• Select the COM tab
• add the Microsoft Web Browser control
• Use arrow keys to scroll through Toolbox controls
• see next page for usage

25
Baby Browser Application

• Baby Browser App easily built from web browser
  control

public class Form1 extends ... . . .
private void cmdGo_Click(...) Object
junk null // surf to URL entered by
user... this.axWebBrowser1.Navigate(this.txt
URL.get_Text(),
junk, junk, junk, junk)
26
Summary

• .NET ships with a large assortment of GUI
  controls
• even more are available from 3rd parties, etc.
• this was just a quick overview of what's possible
• the sky's the limit!