V 1.1

Programming III.

Creating additional windowsEvent handling: preview/routed events

V 1.1 ÓE-NIK, 2015 2

Creating additional windows• Two ways to display a new window:

– Modal windows: “always on top”, the user cannot switch to another window (warning/error/confirmation or data input)

– Non-modal windows: other windows can be used meanwhile the new window is open (special case: MDI)

• Possibilities:– MessageBox class (only modal)– Microsoft.Win32 dialog windows (only modal)– Inheriting from the Window class (modal or non-modal)– Some old Windows Forms dialog windows are not in WPF:

FolderBrowserDialog (WHY???), ColorDialog, FontDialog, PageSetupDialog, PrintPreviewDialog (not so big problem + conflicting types)

V 1.1 ÓE-NIK, 2015 3

MessageBox class• Display pre-defined simple dialog windows: message,

buttons, icons• Static method: MessageBox.Show

– The parameters determine the message, the header, the buttons and the icons to be displayed

– Return value: MessageBoxResult enum value• Usage:

MessageBox.Show(“Single line message");

MessageBox.Show(“Multi line\nmessage\nwith title", “TITLE");

V 1.1 ÓE-NIK, 2015 4

MessageBox parameters I.• Buttons:

• MessageBoxButton enum:

• The return values are the same enum values, only in the MessageBoxResult enum type:– MessageBoxResult.OK, MessageBoxResult.Cancel, MessageBoxResult.Yes…– Closing the window without answering is usually MessageBoxResult.Cancel,

except if only the OK button is shown– WPF has 4 different button sets, Windows Forms had 6 ...

Enum value DescriptionOK OK buttonOKCancel OK + Cancel buttonsYesNo Yes + No buttons (no way to close it without answering)YesNoCancel Yes + No + Cancel buttons

MessageBox.Show(“Multi line\nmessage\nwith title", “TITLE“, MessageBoxButton.YesNoCancel);

V 1.1 ÓE-NIK, 2015 5

MessageBox parameters II.• Icon:

• MessageBoxImage enum:

MessageBox.Show(“Multi line\nmessage\nwith title", “TITLE“, MessageBoxButton.YesNoCancel,

MessageBoxImage.Error);

V 1.1 ÓE-NIK, 2015 6

Microsoft.Win32 dialog windows• OpenFileDialog, SaveFileDialog

• A ShowDialog() return value:– bool? type (nullable bool)– true: the user successfully completed the interaction (the

values can be used)– false: „cancel” type exit (the values cannot be used)– null: the window is still open

• DIFFERENT than in Windows Forms! We must ALWAYS check for this value!

OpenFileDialog openFileDialog = new OpenFileDialog();if (openFileDialog.ShowDialog() == true){ string fileName = openFileDialog.FileName; //... Open file, read file ... }

V 1.1 ÓE-NIK, 2015 7

Homework – mini notepad

V 1.1 ÓE-NIK, 2015 8

Homework – extend it!

V 1.1 ÓE-NIK, 2015 9

Inheriting from the Window class• Creating our own custom windows:

1. .xaml + .xaml.cs files are required:• Project -> Add -> Window...• Same usage as our first window: use the designer, edit properties, add event

handlers ...

2. Create an instance, then use Show() or ShowDialog()• Show?

– window.Show(); non modal, non-blocking method call

– window.ShowDialog(); modal, with a bool? return value; this is a BLOCKING method call!

MyWindow window = new MyWindow();window.Show();

MyWindow window = new MyWindow();if (window.ShowDialog() == true){

//... }

V 1.1 ÓE-NIK, 2015 10

Inheriting from the Window class• To give information after a ShowDialog() call, we have to

set the this.DialogResult property within the new window

– This will also instantly close the new window• Button controls have the following related properties:

– IsCancel – This button will be “clicked” when pressing the ESC key, this will also close the window

– IsDefault – This button will be “clicked” when pressing the ENTER/RETURN key

• Will not close the window• Usually we set the DialogResult in the event handler

private void Button_Click(object sender, RoutedEventArgs e){ this.DialogResult = true;}

V 1.1 ÓE-NIK, 2015 11

Inheriting from the Window class• To get data from a modal window, we use properties

– Create one property for every data field– Don’t access controls directly!– x:Name="myTextBox" x:FieldModifier="private"

• In the activator window, we first check the dialog result and then we use the property values

string name;string birthPlace;int age;PersonalDataWindow dataInput = new PersonalDataWindow();if (dataInput.ShowDialog() == true){ name = dataInput.Name; birthPlace = dataInput.BirthPlace; age = dataInput.Age;}

V 1.1 ÓE-NIK, 2015 12

Window properties, methods, events

• The Window class is a ContentControl descendant– We can use all properties/events of the base class (Width, Height,

Foreground, Background… MouseDown, MouseUp, KeyDown, KeyUp, PreviewXXX… Loaded…)

• Main properties: – Title– Topmost– WindowStartupLocation– WindowState (maximized, minimized, normal)

V 1.1 ÓE-NIK, 2015 13

Window properties, methods, events

• Important methods:– Show() – modal– ShowDialog() – non-modal– Close() – Activate() – bring to front– Hide()

• Important events– Closed – Closing – before being closed– Activated– Deactivated

V 1.1 ÓE-NIK, 2015 14

Homework – list of workers, sick/on holiday

V 1.1 ÓE-NIK, 2015

Event handling: preview/routed events• Main problems:

– We know there can be several UI elements in a window – We would like to know when the user moves the mouse

ANYwhere!• „Traditionally” we should handle the MouseMove event of all controls…

– Also, there can be many UI elements within a single ContentControl

– E.g.: Button, with a StackPanel and two Rectangle controls = pause button

– What did the user clicked on? • We don’t really care which part of the visible/non visible controls we want

to handle the single Click event• Solution: an event is not only fired on one single control, but

also on the container controls as well!15

V 1.1 ÓE-NIK, 2015

Routed Events• Most of the UI events are routed events

– The event is not only fired on the control where it actually occurred

– It will (or: it can) be fired on the parent controls as well it is possible to handle controls only on the parent homework: do the calculator with *ONE* event handler!

• The UI elements are organized into a tree: element tree– ContentControl, ItemsControl elemeknél: Content, Items– Layout managers: Children– Some UI elements can be more complex inside: Button + string

content = Button + Border + ContentPresenter + TextBlock)• We usually talk about two trees: logical tree, visual tree

16

V 1.1 ÓE-NIK, 2015

Trees of UI elements• The logical tree shows the connections between the different

UI elements:

• The visual tree also contains the inner structure of all UI elements – this is a lot bigger construction!

17

V 1.1 ÓE-NIK, 2015

Trees of UI elements

18

MainWindow

Border

AdornerDecorator

AdornerLayer ContentPresenter

Grid

Label Button

Border

ContentPresenter

TextBlock

Border

ContentPresenter

TextBlock

• Logical tree– In red– Shown in the

Document Outline• Visual tree

– Red + Cyan– Can be shown

while debugging

V 1.1 ÓE-NIK, 2015

Routed events• The events are “forwarded” on the tree nodes

• Logical tree: dynamic resources, the element name lookups during the data binding

• Visual tree: render events, transparency, transformations, IsEnabled, hit test

• Hybrid: dependency properties, forwarded events• Forwarding strategies:

– Upwards („bubbling”): first on the UI element that had the event, then goes up to the parent, until the root

– Downwards („tunneling”): first on the root, then through the children towards the UI element that had the event

– „Direct”: not forwarded, the event is fired only on the UI element that had the event

• The documentation defines the forwarding strategy for all events in the framework

19

V 1.1 ÓE-NIK, 2015

Preview events• Some events, e.g.:

– KeyDown– KeyUp– MouseDown– MouseUp– …

• … have a Preview… pair:– PreviewKeyDown– PreviewKeyUp– PreviewMouseDown– PreviewMouseUp

20

V 1.1 ÓE-NIK, 2015

Preview/routed events• A PreviewXXX-XXX pairs:

– The PreviewXXX uses the „tunneling” strategy– The XXX uses the „bubbling” strategy– The PreviewXXX will always fire first

• PreviewMouseDown, MouseDown example

1. PreviewMouseDown on the MainWindow2. PreviewMouseDown on the Grid3. PreviewMouseDown on the Label4. MouseDown on the Label5. MouseDown on the Grid6. MouseDown on the MainWindow

21

MainWindow

Grid

Label Button

V 1.1 ÓE-NIK, 2015

Preview events• The preview event is always fired before the “real”

event• Usage:

– Pre-processing– Block the „real” event (e.Handled)

22

private void textBoxText_PreviewKeyDown(object sender, KeyEventArgs e){ e.Handled = true; //result: we can’t type to the textbox}

V 1.1 ÓE-NIK, 2015

Small variations

23

• Some exceptions exist to the usual processing in the Preview→”real” event forwarding:– E.g. the Button events– The “purpose” of the Button is to create a Click event– This converts the PreviewMouseDown and …Up-ot into a Click

event and blocks some of the further events– The MouseDown will not be fired after the PreviewMouseDown

• Some exceptions exist to the usual event handling– The MouseDown event of the Grid is always affected when

clicking on a control inside the Grid– But if it is clicked directly, then the MouseDown is only fired if

the Grid is visible (its Background is not null)– Otherwise, only the MouseDown event of the MainWindow is

fired!

V 1.1 ÓE-NIK, 2015

Routed events• To know where the event comes from…

– sender: the UI element that is executing the current event handler. NOT NECESSARILY the element that had the event!

– e.Source: The element that had the event (logical tree)– e.OriginalSource: The element that had the event (visual tree)

24

V 1.1 ÓE-NIK, 2015

Exercise – Simplified Android password input

Image source: http://www.groovypost.com/howto/security/how-to-enable-pattern-lock-security-on-android-devices/

Extra task: when entering the good password, display another window with the current applications + a textbox to change the password

25