1. V 1.0 Programming III. Creation of additional windows Routed events

2. 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

3. 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");

4. 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 valueDescription OKOne OK button OKCancelOK + Cancel buttons YesNoYes + No buttons (close is not possible without choosing) YesNoCancelYes + No + Cancel buttons MessageBox.Show(“Any\nText", “Title", MessageBoxButton.YesNoCancel);

5. V 1.0ÓE-NIK, 2014 5 MessageBox parameters II. Choose an icon to display: We can use the MessageBoxImage enum: Enum Value Asterisk Error Exclamation Hand Information None Question Stop Warning MessageBox.Show(“Any\nText", “Title", MessageBoxButton.YesNoCancel, MessageBoxImage.Error);

6. V 1.0ÓE-NIK, 2014 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 6 OpenFileDialog openFileDialog = new OpenFileDialog(); if (openFileDialog.ShowDialog() == true) { string selectedFile = openFileDialog.FileName; //... Open file, read/write, close... }

7. V 1.0ÓE-NIK, 2014 Exercise – mini notepad with save function 7

8. V 1.0ÓE-NIK, 2014 Exercise – mini notepad with save function 8

9. 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) { //... }

10. V 1.0ÓE-NIK, 2014 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) 10 private void Button_Click(object sender, RoutedEventArgs e) { this.DialogResult = true; }

11. 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 properties string name; string birthPlace; int age; PersonalDataWindow dataInput = new PersonalDataWindow(); if (dataInput.ShowDialog() == true) { name = dataInput.Name; birthPlace = dataInput.BirthPlace; age = dataInput.Age; }

12. V 1.0ÓE-NIK, 2014 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) 12

13. V 1.0ÓE-NIK, 2014 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 13

14. V 1.0ÓE-NIK, 2014 Exercise – Worker list management 14

15. V 1.0ÓE-NIK, 2014 Exercise – Pizza order with dialog window 15

16. 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

17. 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

18. 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

19. V 1.0ÓE-NIK, 2014 UI element tree 19 MainWindow Border AdornerDecorator AdornerLayerContentPresenter Grid LabelButton 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

20. 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” Example 1.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 LabelButton 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...

21. 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

22. 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

23. 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

24. V 1.0ÓE-NIK, 2014 Pizza order 24

25. V 1.0ÓE-NIK, 2014 Create advanced worker management 25