Kelvin Hilton

1
Using Advanced Controls

• Kelvin Hilton
• k.c.hilton_at_staffs.ac.uk

2
Objectives

• Programming the SIP
• Menus
• Forms
• Tabbed Panels

3
Programming the SIP
4
The Default SIP Behaviour
In your application you had to manually start the
SIP to enter data.
Contrast this with the default owner application
where the SIP activates automatically.
5
Windows Controls Focus Property

• When we activate a Control (for example tap in a
  TextBox) a special event is fired called GotFocus
• When we deactivate a Control (for example move
  from a TextBox to another Control) a special
  event is fired called LostFocus

TextBox A becomes active by stylus tap, soft-key,
etc.
TextBox A inactive
TextBox A active
GotFocus Event fired by TextBox A.
TextBox A becomes inactive when another Control
is selected.
LostFocus Event fired by TextBox A.
GotFocus Event fired by Control Z.
Control Z active
6
SIP Control

• The SIP is a Control
• Add like any other Control
• Appears next to menu
• Only 1 property we can get/set Enabled
• False SIP deactivate
• True SIP activate

7
Activate/Deactivate SIP

• Just modify the SIP Enabled property for the
  appropriate Control

In this example we have a TextBox and when its
receives focus we enable the SIP and when it
loses it we disable the SIP.
Remember that the SIP will obscure virtually a
third of your Form when active!
8
Form Sizing

• Default PocketPC Resolution 320 x 240
• Menubar height 26 pixels
• Taskbar height 26 pixels
• Default application size 268 x 240
• Menuless application 294 x 240
• Fullscreen 320 x 240

Default application Form has the Locked property
set to True. This means you cannot resize the
Form area. Represented graphically on the Form
designer by a padlock icon.
9
Reducing Form Size

• Has no effect!

Cannot have a Form smaller than 268 x 240.
10
Increasing Form Size

• Forms can be increased in both dimensions

If Form is blank there is no visible difference.
11
Increasing Form Size

• Autoscroll property

By default Autoscroll property is set to True.
When controls are placed outside default size
scrollbars are added automatically.
12
Problem with Autoscroll

• What happens when SIP is activated?

When we scroll to the bottom control and try to
enter text the SIP appears, obscuring both the
Control and the scrollbars!
Do not use the Autoscroll if you have Controls
requiring SIP. Set the property to False.
13
Scrolling

• Not easy on the PPC
• Need to factor in the SIP
• Need to calculate the scroll values
• Much, much more

14
Menus
15
Menu Control

• Menus are associated with a Form
• Appear at base of Form
• Use the Designer to lay out your menus of build
  programmatically
• PPC menus can be
• Dynamic
• Add/remove items
• Check/uncheck
• Enable/disable
• Can have separators
• Can be nested
• Respond to the Click Event

16
Menu Control

• Unlike other Controls, the Menu Control is
  actually a container of a collection of MenuItems
• Though referred to as a Control does not have
  control as a base class
• Only one main menu can be active at a time!
• Can switch between main menus based on program
  state
• A Form can have no menu
• Though a Menu Control is needed to display SIP
  icon

17
The Menu as a Container
This Forms main menu has two menu items.
The containment hierarchy looks like this
Main Menu
Base 1
Base 2
Sub 2
Sub 1
Sub 3
separator
Sub 2
Sub 1
Sub sub 1
18
Menu classes
There are 2 relevant classes.
Both are subclasses of System.Windows.Forms.Menu
which is a generic menu class for all Form
Menus. A key member of the Menu class is a
MenuItems collection which all its subclasses
contain. Just like the Control collection in a
Form we can add/remove MenuItems stored in the
MenuItems collection, test for the selected item,
etc.
19
Adding a MainMenu

• Default application already has one
• Can add more like normal Control
• New MainMenu items will appear next to existing
• There are no Properties or Events we can
  manipulate for a MainMenu Control

20
MainMenu Code

• Declaration

• Default definition

• How does the MainMenu get associated with a Form?

All Forms have a property Menu which identifies
the default MainMenu associated with the Form.
You can specify it using the property sheet, or
programmatically.
Note this refers to a Form instance.
This will be in the .Designer.cs file
21
Adding a MenuItem

• To add a menu item using the IDE select the menu
  icon at the base of the Form Editor
• A prompt automatically appears in the Forms menu
  area
• Entering the prompted area
• You can type your menu title
• Subsequently you can add siblings/child menu items

22
MenuItem Code

• Declaration

• Default definition

This will be in the .Designer.cs file
23
MenuItem Properties

• You can set the properties for Checked and
  Enabled
• Both are Booleans
• Both can be set in the IDE or programmatically
• If you try to set these properties for a base
  menu item or the root of a nested menu you get an
  error

24
MenuItem Events - Click

• When you select a MenuItem a Click Event is fired
• When you click on a root MenuItem the Click Event
  is handled internally
• Note The compiler will allow you to add a
  Handler for a root MenuItem click but it will not
  be called

25
MenuItem Click Event Example
When the MenuItem is selected we launch a
MessageBox
26
MenuItem Events - Popup

• MenuItems do not receive or lose focus like
  standard controls
• Instead an event called Popup is fired when a
  menu item is activated
• For example to decide which items should be
  available in a dynamic menu
• Cut/Copy/Paste classic example

27
MenuItem Popup Event Example
If there is no text selected then providing
cut/copy/paste is pointless. If there is then we
provide the option.
28
Building a Menu Structure - IDE

• You can nest up to 255 levels of menus
• Note how the items are added
• To add a separator just enter a hyphen
• You can manoeuvre the separator by selecting and
  dragging

29
Building a Menu Structure - Programmatically
As stated, Menu subclasses have a MenuItems
collection as a member. In this example, Base 1
will be added to MainMenu1, Sub 1/Sub 2/Sub
3/seperator to Base 1.
This code will be in the .Designer.cs file
30
Coding Practice!
Recall my warning about default Names. Working
with menus graphically exposes the problem of
productivity misconception in the IDE. Whilst
creating the menus using the Designer is simple
and swift, hours can easily be lost tracking back
against the default Names just which option is
menuItem4?
31
Maximising ScreenReal Estate
32
Options

• Scrolling Forms
• As stated problematic due to SIP
• Multiple Forms
• We can spread our application over several
  discrete Forms
• Tabbed Panels
• If the Forms have a common theme we can use a
  Tabbed Pane

33
Muliform Applications

• Whilst PPC is a single instance OS an application
  may have more than one Form

IMPORTANT Because C is an OO language we create
new instances of Forms when we require
them. This means that we can have any number (up
to memory capacity) of different or indeed the
same Form!
Note that because Controls such as Menus are
bound to a particular Form class when we create
them, they are not automatically available to our
new Form.
34
Creating a New Form
From the Project menu select Add Windows Form
Windows Form is selected by default.
Enter a class name for your new class.
Class is added to the project. You can now add
Controls etc. just like with the default Form.
35
Using a New Form

• To be able to view another Form in the
  application you have to take two steps

1. Create a new instance of the Form class.
2. Call the Show member method of the Form.

• Where you place this code is application specific
• Menu option, button, automated response to event

36
Problems with Multi-Form Applications

• When creating a Multi-Form based application,
  need to think of the relationship and navigation
  between the Forms

Application Loads
Form 1
Loads
Form 2
Form 4
Loads
Form 3
Loads
37
Problems with Multi-Form Applications

• How can you navigate from one Form to another?

Form 1
Form 2
When the user selects Load Form 2 menu option the
application must load Form 2
Load Form 2
Menu
38
Problems with Multi-Form Applications

• Where do you place the code?

• Because the instance of Form2 is declared inside
  the menuItem2 method, it is not visible anywhere
  else in the code for Form1
• Form1 will know nothing about Form2 outside of
  this method
• Form2 will know nothing about Form1

39
Problems with Multi-Form Applications

• Dangers of Form references

Creates and loads Form 2
Form 1
Form 2
Where will this code leave us?
Has an option to go back to Form 1
?
40
Working with Multi-Form Applications

• More logical to consider the relationship in OO
  terms
• Form 1 knows about Form 2 and Form 3
• Form 2 knows about Form 1 and Form 4
• Form 3 knows about Form 1

Application Loads
Form 1
Loads
Form 2
Form 4
Loads
Form 3
Loads
41
Working with Multi-Form Applications
1. Create a member variable in Form1 to store an
instance of Form2 as and when it is required.
2. Create a member variable in Form2 to store an
instance of Form1.
3. Now we can create an instance of Form2 and
pass it a reference to the Form that creates it.
4. Now Form2 will already know about Form1 when
it is created. So we just need to display it
when required.
42
Working with Multi-Form Applications

• Problem of floating Forms

Consider
Form 1
Form 2
Creates and displays Form2 using Show()
Returns to Form1 using Show()
Form 1
User then closes Form1.
Form 2
What happens to Form2?
May be wise to close Form on returning.
43
Problems with Multi-Form Applications

• Inter-Form communication
• Read/Write values across Forms
• Branch base on state of another Form

Form1
Form 2
Label1 on Form 2 needs to contain the value of
TextBox1 from Form 1
TextBox1
Label1
44
Inter-Form Communication

• Two options
• Write methods to get/set properties from outside
  the Form
• Change the access modifier from private to public

Form1 can now access label1 on Form2 because it
is public!
45
Selecting Which Form Loads On Start Up

• Can set which Form will load first by selecting
  by changing the code in Program.cs

46
Tabbed Panels

• If related data/options are too large for a
  single Form Tabbed Panels are recommended
• TabControl is the holder for a collection of Tab
  Pages
• Can be added to any Form
• Can be created dynamically
• Added like any other Control

47
Tab Controls

• PPC specification states that the tabs appear
  underneath pages
• By default
• Two pages are added
• Page height is 0
• TabControl x, y is set to 0, 0 inside the
  containing object Control

48
TabControl Code

• Declaration

• Default definition

• Default properties

• Setting a TabControl to fill the Window
• Recall Form default Form height 268 pixels
• Modify the designer code as follows

49
TabControl Key Properties

• Anchor property fixes to the specified edges of
  the application

Acceptable values are
To reposition the TabControl to any position on
the Form set Anchor to None.
None
Top
Left
Right
Bottom
Combinations
Top, Left
Top, Right
Note if the width is insufficient to display all
available tabs cycle buttons are added
automatically.
Etc.
50
TabControl Key Properties

• TabPages are the region we can treat as mini
  Forms

To activate a TabPage for editing click in the
region above the tab bar.
To toggle between TabPages click the page tab in
the TabControl region.
51
TabPage Code

• Declaration

• Default definition

• Default properties

• How does a TabPage get added to a TabControl?
• Pages are stored in a Control collection
• Can Add, Remove pages dynamically

52
Adding/Removing Pages During Design

• TabPage Collection Editor

Clicking the elipses button opens the Collection
Editor.
As with all collections, indexed from 0.
Can change the order (index value) they appear in.
Dialog contains the TabPage Property sheet.
53
TabControl General

• When a Tab is selected the SelectedIndexChange
  event is fired
• Can use this to check if correct fields have been
  completed
• Provide feedback, etc.
• Not possible to enable/disable tabs
• Regarded as bad HCI
• Can be nested

54
Using TabControl to Get Round SIP Problem

• Recall problem with autoscrolling a Form
• Using a TabControl and autoscrolling a TabPage
  provides an easy work around

Consider
When SIP is enabled it obscures as before.
55
Using TabControl to Get Round SIP Problem

• SIP on generates one event, EnabledChanged fired
  whenever it is enabled or disabled

• SIP has a property not listed in the Property
  Sheet called VisibleDesktop
• Returns a Rectangle object representing the
  usable screen size less the area occupied by the
  SIP
• Can set the Height property of the TabControl to
  the Rectangle Height to resize appropriately
• When SIP is disabled just reset the TabControl
  Height to the original value

56
Using TabControl to Get Round SIP Problem
Then set the TabPage AutoScroll property to true.
And add the SIP enable/disable code to the
relevant Controls.
57
Using TabControl to Get Round SIP Problem
Result.
58
Recap

• Programming the SIP
• Menus
• Forms
• Tabbed Panels

59
Questions ?