Programming III .

1. Programming III. Creation of additional windows Routed events

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: • MessageBoxclass to display simple messages/confirmations (only modal dialogs) • Microsoft.Win32 dialogs (only modal dialogs) • Create a window on our own

3. MessageBoxclass • 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 MessageBoxResultenum value, it can tell us how the window was closed • Usage: MessageBox.Show(“One Line Message"); MessageBox.Show(“Multi\nLines\nWith Title", “Title");

4. MessageBoxparameters I. • Buttons: • MessageBoxButtonenum: • The return value is usually a MessageBoxResultenum 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) MessageBox.Show(“Any\nText", “Title", MessageBoxButton.YesNoCancel);

5. MessageBoxparameters II. • Choose an icon to display: • We can use theMessageBoxImageenum: MessageBox.Show(“Any\nText", “Title", MessageBoxButton.YesNoCancel, MessageBoxImage.Error);

6. Microsoft.Win32 dialogs • OpenFileDialog: to open a file • SaveFileDialog: to save a file • The ShowDialog() will return: • bool? típusú (nullablebool) • 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 OpenFileDialogopenFileDialog = newOpenFileDialog(); if(openFileDialog.ShowDialog() == true) { stringselectedFile= openFileDialog.FileName; //... Open file, read/write, close ... }

7. Exercise – mini notepad with save function

8. Exercise – mini notepad with save function

9. Creating your own windows • Add the window to the project: • .xaml + .xaml.csfiles will be created: • Project -> Add -> Window... • Design the window the same way • Create an instance, display it using the methods Show() or ShowDialog() (non-modal / modal display) MyWindowwindow = newMyWindow(); window.Show(); MyWindowwindow = newMyWindow(); if(window.ShowDialog() == true) { //... }

10. Creating your own windows privatevoidButton_Click(objectsender, RoutedEventArgse) { this.DialogResult = true; } • 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 ButtonUI 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)

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 stringname; stringbirthPlace; intage; PersonalDataWindowdataInput= newPersonalDataWindow(); if(dataInput.ShowDialog() == true) { name= dataInput.Name; birthPlace= dataInput.BirthPlace; age= dataInput.Age; }

12. Window properties, methods, events • The Windowis a ContentControldescendant • 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)

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

14. Exercise – Worker list management

15. Exercise – Pizza order with dialog window

16. Forwarded events(RoutedEvents) • 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 = pausebutton • 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!

17. Forwarded events (RoutedEvents) • 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, Itemsproperty • 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

18. UI element tree • The logicaltree shows how the different UI elements contain each other – this is what we create in the design view) • The visualtree also contains the inner structure of the UI elements (e.g. Button = Border + ContentPresenter + TextBlock)

19. UI element tree MainWindow • Logical tree • RED only • This is shown in the DocumentOutline • Visual tree • RED+CYAN • Can be shown during debugging, can be used with some events Border AdornerDecorator AdornerLayer ContentPresenter Grid Label Button Border Border ContentPresenter ContentPresenter TextBlock TextBlock

20. Forwarded events (RoutedEvents) • 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 MainWindow • PreviewXXX-XXXevents: • The Preview event is fired first • PreviewXXXwill move from the root to the starter  „tunneling” • Then XXX will move from the starter to the root  „bubbling” • Example • PreviewMouseDownfor the MainWindow. • PreviewMouseDownfor the Grid. • PreviewMouseDownfor theLabel. • MouseDownfor theLabel. • MouseDownfor the Grid. • MouseDownfor the 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 ...

21. Forwarded events (RoutedEvents) • 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: dependencyproperties, 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

22. Forwarded events (RoutedEvents) • 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!!!

23. Exercise – Android lock screen http://www.groovypost.com/howto/security/how-to-enable-pattern-lock-security-on-android-devices/

24. Pizza order

25. Create advanced worker management