V 1.1 Programming III. Creating additional windows Event handling: preview/routed events

V 1.1ÓE-NIK, 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, 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, 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 valueDescription OKOK button OKCancelOK + Cancel buttons YesNoYes + No buttons (no way to close it without answering) YesNoCancelYes + No + Cancel buttons MessageBox.Show(“Multi line\nmessage\nwith title", “TITLE“, MessageBoxButton.YesNoCancel);

V 1.1ÓE-NIK, MessageBox parameters II. Icon: MessageBoxImage enum: MessageBox.Show(“Multi line\nmessage\nwith title", “TITLE“, MessageBoxButton.YesNoCancel, MessageBoxImage.Error);

V 1.1ÓE-NIK, 2015 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! 6 OpenFileDialog openFileDialog = new OpenFileDialog(); if (openFileDialog.ShowDialog() == true) { string fileName = openFileDialog.FileName; //... Open file, read file... }

V 1.1ÓE-NIK, 2015 Homework – mini notepad 7

V 1.1ÓE-NIK, 2015 Homework – extend it! 8

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

V 1.1ÓE-NIK, 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 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) 12

V 1.1ÓE-NIK, 2015 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 13

V 1.1ÓE-NIK, 2015 Homework – list of workers, sick/on holiday 14

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 AdornerLayerContentPresenter Grid LabelButton 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 MainWindow 2.PreviewMouseDown on the Grid 3.PreviewMouseDown on the Label 4.MouseDown on the Label 5.MouseDown on the Grid 6.MouseDown on the MainWindow 21 MainWindow Grid LabelButton

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: 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