V 1.0

Programming III.

Creation of additional windowsRouted events

V 1.0 ÓE-NIK, 2014 2

Creation of additional windows• There are two ways to display a window

– Display modally: The user cannot switch to the original window until the modal window (dialog window) is closed

• Warning• Error• Confirmation• Input

– Display normally (non-modal window): The user can freely switch between the windows of the application

• Possibilities:– MessageBox class to display simple messages/confirmations

(only modal dialogs)– Microsoft.Win32 dialogs (only modal dialogs)– Create a window on our own

V 1.0 ÓE-NIK, 2014 3

MessageBox class• The new window can show a message, buttons and a

big icon• Static class, Show method with several overloads

– The parameters define what is shown– The return value is a MessageBoxResult enum value, it can tell us how the

window was closed• Usage:

MessageBox.Show(“One Line Message");

MessageBox.Show(“Multi\nLines\nWith Title", “Title");

V 1.0 ÓE-NIK, 2014 4

MessageBox parameters I.• Buttons:

• MessageBoxButton enum:

• The return value is usually a MessageBoxResult enum value complying with the button name– MessageBoxResult.OK, MessageBoxResult.Cancel, MessageBoxResult.Yes…– If closed without clicking on a button, then usually

MessageBoxResult.Cancel (except if it is called with MessageBoxButton.OK)

Enum value DescriptionOK One OK buttonOKCancel OK + Cancel buttonsYesNo Yes + No buttons (close is not possible without choosing)YesNoCancel Yes + No + Cancel buttons

MessageBox.Show(“Any\nText", “Title",MessageBoxButton.YesNoCancel);

V 1.0 ÓE-NIK, 2014 5

MessageBox parameters II.• Choose an icon to display:

• We can use the MessageBoxImage enum:Enum Value

Asterisk ErrorExclamation

Hand

InformationNoneQuestionStopWarning

MessageBox.Show(“Any\nText", “Title",MessageBoxButton.YesNoCancel,

MessageBoxImage.Error);

V 1.0 ÓE-NIK, 2014 6

Microsoft.Win32 dialogs• OpenFileDialog: to open a file• SaveFileDialog: to save a file

• The ShowDialog() will return:– bool? típusú (nullable bool)– true: the user clicked on the OK button (or double clicked, the

dialog data can be used)– false: the user cancelled (the dialog data should not be used)– null: the dialog is still shown

• We must ALWAYS check the return value

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

V 1.0 ÓE-NIK, 2014 7

Exercise – mini notepad with save function

V 1.0 ÓE-NIK, 2014 8

Exercise – mini notepad with save function

V 1.0 ÓE-NIK, 2014 9

Creating your own windows• Add the window to the project:

1. .xaml + .xaml.cs files will be created:• Project -> Add -> Window...• Design the window the same way

2. Create an instance, display it using the methods Show() or ShowDialog() (non-modal / modal display)

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

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

//... }

V 1.0 ÓE-NIK, 2014 10

Creating your own windows• If we want to give back information about our dialog

window, then we can set the DialogResult value from our event handlers

– This will also instantly close the window• Related properties of the Button UI elements:

– IsCancel – This button will be pressed if the ESC key is pressed, and the window will be closed

– IsDefault – This button will be pressed if the Enter key is pressed, and the window will remain opened (we have to set the dialogresult if we want to close it)

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

V 1.0 ÓE-NIK, 2014 11

Creating your own windows• We usually use properties to give back values from

dialog windows– One property for every returned value– Typically when displaying modal windows

• First we have to check the dialogresult, and then we can check the propertiesstring name;string birthPlace;int age;PersonalDataWindow dataInput = new PersonalDataWindow();if (dataInput.ShowDialog() == true){ name = dataInput.Name; birthPlace = dataInput.BirthPlace; age = dataInput.Age;}

V 1.0 ÓE-NIK, 2014 12

Window properties, methods, events

• The Window is a ContentControl descendant– We can use the usual events and properties (Width, Height,

Foreground, Background… MouseDown, MouseUp, KeyDown, KeyUp, PreviewXXX… Loaded…), the Content is usually a Grid / Cavas / StackPanel / etc

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

V 1.0 ÓE-NIK, 2014 13

Window properties, methods, events

• Important methods:– Show() – show as a non-modal window – ShowDialog() – show as a modal dialog– Close()– Activate() – bring to front and activate– Hide()

• Important events:– Closed – already closed – Closing – about to be closed (BEFORE Closed)– Activated– Deactivated

V 1.0 ÓE-NIK, 2014 14

Exercise – Worker list management

V 1.0 ÓE-NIK, 2014

Exercise – Pizza order with dialog window

15

V 1.0 ÓE-NIK, 2014

Forwarded events (Routed Events)• Problem:

– We would like to handle events in a smarter way– E.g. we want to know if the user moves the mouse

*anywhere* in the window... Usually this would mean intercepting all possible MouseMove events

– ContentControls can contain other UI elements– E.g.: Button + StackPanel + Rectangles = pause button

– What did the user clicked on? We want the same event!• It doesn’t matter which sub-element the user clicked on... We want the

same Click event • Solution: events are fired on more than one UI elements –

events are fired not only for a given element, but also for the parent element!

16

V 1.0 ÓE-NIK, 2014

Forwarded events (Routed Events)• Every WPF event is a routed event

– The user interacts with a given UI element, but the same interaction can trigger several event handlers

– Several events can occur based on the placement of the UI elements it is possible one of the parent elements will handle the event

• The UI elements form a tree structure as they include each other– ContentControl, ItemsControl : Content, Items property– Content managers (Children)– Inside a content, there can be anything else!

• We must distinguish between the logical tree and the visual tree: the logical is what we create, the visual tree contains everything that is displayed

17

V 1.0 ÓE-NIK, 2014

UI element tree• The logical tree shows how the different UI elements contain

each other – this is what we create in the design view)

• The visual tree also contains the inner structure of the UI elements (e.g. Button = Border + ContentPresenter + TextBlock)

18

V 1.0 ÓE-NIK, 2014

UI element tree

19

MainWindow

Border

AdornerDecorator

AdornerLayer ContentPresenter

Grid

Label Button

Border

ContentPresenter

TextBlock

Border

ContentPresenter

TextBlock

• Logical tree– RED only– This is shown in the

Document Outline• Visual tree

– RED+CYAN– Can be shown

during debugging, can be used with some events

V 1.0 ÓE-NIK, 2014

• PreviewXXX-XXX events:– The Preview event is fired first– PreviewXXX will move from the root to the starter „tunneling”– Then XXX will move from the starter to the root „bubbling”

• Example1. PreviewMouseDown for the MainWindow.2. PreviewMouseDown for the Grid.3. PreviewMouseDown for the Label.4. MouseDown for the Label.5. MouseDown for the Grid.6. MouseDown for the MainWindow.

Forwarded events (Routed Events)• The events are forwarded

between nodes– The starter node is the node the

user is interacting with– The sender of an event is always

the current node

20

MainWindow

Grid

Label Button

The Bubbling/Tunneling can be stopped with e.Handled=true

There are tons of small extras: e.g. the Grid will only intercept direct (non-forwarded) clicks if the Background is not null ...

V 1.0 ÓE-NIK, 2014

Forwarded events (Routed Events)• The events are forwarded along the element tree

• Logical tree: dynamic resources, element name search during data binding…• Visual tree: display, transparency, transformations, IsEnabled, hit test• Hybrid: dependency properties, routed events

• Event strategies:– Up „bubbling”: first for the element the user interacts with,

then it is forwarded to the parent element, towards the root– Down „tunneling”: first for the root element, then it is

forwarded to the children elements, towards the element the user interacted with

– „Direct” event: the event will only fire for the originating UI element

• The documentation clearly states which event uses which strategy

21

V 1.0 ÓE-NIK, 2014

Forwarded events (Routed Events)• If we must know where the event is coming from…

– sender: the UI element that launched event handler. It is NOT the element where the event was fired originally!

– e.Source: the node that originally fired the event (logical tree)– e.OriginalSource: the node that originally fired the event

(visual tree) • Practical uses:

– When creating complex UI elements, the user will not care about the complex layout of the elements – the “main” control will handle the events

– Prevent events from firing: e.Handled=true– Several UI elements are doing the same task

• The common parent can handle the events• E.g. the calculator could be done with this!!!

22

V 1.0 ÓE-NIK, 2014

Exercise – Android lock screen

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

23

V 1.0 ÓE-NIK, 2014 24

Pizza order

V 1.0 ÓE-NIK, 2014 25

Create advanced worker management