1. V 1.1 Programming III. GUI APIs WPF Hello World Important UI elements UI elements / content models UI elements / inheritance

2. V 1.1ÓE-NIK, 2015 (Only the desktop APIs are listed here) GUI APIs API: Application Programming Interface We usually do not start a GUI program from zero –Common exceptions: games We use external APIs as building blocks/templates/ tools –MFC(Windows/C++) –Windows Forms(Windows/.NET) –Java AWT/Swing(Java) –Cocoa(Mac OS X) –QT(főleg Unixok) –GTK/GTK+(főleg Unixok) –WPF(Windows/.NET) –Metro (Windows RT)(Windows/C#, C++) –Universal apps (WRT/UWP)(Windows 10) 2

3. V 1.1ÓE-NIK, 2015 Windows Forms From.NET 1.0 (2002), mature in 2.0 –Provides managed access for Windows API components and controls –Windows API: from Windows 1.0 (1985) Simple, classic look Functionality: basic GUI concepts –Creation and management of windows –Basic required controls (buttons, text boxes, scrollbars, etc.) –Dialog windows –Event-driven approach to handle mouse and keyboard input –Etc. 3

4. V 1.1ÓE-NIK, 2015 Windows Presentation Foundation From.NET 3.0 (2006) Designed to replace Windows Forms –Only half successful! (as of 2015) Provides a unified approach for (almost) all aspects of the visual application development’s logic –UI layout (similar elements as in Windows Forms) –2D –3D –Multimedia/video –Etc. 4

5. V 1.1ÓE-NIK, 2015 Windows Runtime, Universal Apps Metro: design principles, design language (Metro -> Modern - > Windows Store/Windows 8 apps) Typography-oriented, simple graphics, relaxed layouts –Usually advantageous with small resolutions / portable devices –Not successful, WPF Metro toolkits can provide same design with the old WPF approaches Win 10: Universal Windows Platform 10 –Same app runs on multiple platforms/devices –Common functionality API: Universal Windows Platform + API parts for the distinct platforms/devices –Weak spot: Windows Phone and Surface Tablets are not popular  is it really necessary? 5

6. V 1.1ÓE-NIK, 2015 Windows Forms demo + problems Event-driven approach, MANY controls Mature, but many problems with BIG programs Only direct events? (few exceptions...) Only name-based access? (even less exceptions...) Only C# code for layout and style? Reusable Styles? Complex controls? List controls (item templates)? 6

7. V 1.1ÓE-NIK, 2015 Windows Forms vs. WPF 7 Windows FormsWPF For simple GUIs„Rich desktop apps” and multimedia Old-fashioned solutions, many examples New approaches, several possible solutions (e.g. layout engines) Usually external libraries are required, even the MS solutions can have different usage principles Unified business logic Old and mature – few bugs, but they are known and workarounds exist Some bugs, not mature framework, not mature IDE, ”under development” feeling Easy to learnHard to learn

8. V 1.1ÓE-NIK, 2015 Which one? / The future (2015 aug.) As of Win8.1: WPF > WinForms –The future of the Metro layout is highly doubtful As of Win10: The Universal Windows Platform 10 looks VERY promising, but currently not tested –No experience with big apps… The new technologies (WPF and after) share a lot of basic concepts, so there are many reusable parts –The WPF is the safe choice – Windows Forms is obsolete –XAML, data binding, MVVM  these WILL go on! 8

9. V 1.1ÓE-NIK, 2015 WPF Hello World 9

10. V 1.1ÓE-NIK, 2015 WPF Hello World 10

11. V 1.1ÓE-NIK, 2015 WPF Hello World View -> View -> Other Windows -> 11

12. V 1.1ÓE-NIK, 2015 WPF Hello World Project settings –Compile/build settins –Pre and post-build events –Command line arguments –Application settings –Etc. References to DLLs –Framework or third-party libraries Application-level files Files for the window 12

13. V 1.1ÓE-NIK, 2015 App, MainWindow App class: –App.xaml.cs + generated bin/obj/App.g.cs = App class –This is where the Main method is generated, along with the instances of the App and MainWindow classes –Represents the application itself, can be accessed through a static property (e.g. App.Current.Shutdown()) MainWindow class: –Represents the main window, of course it can be renamed –MainWindow.xaml.cs + generated bin/obj/MainWindow.g.cs = MainWindow class –InitializeComponent() is generated, which loads the XAML file 13

14. V 1.1ÓE-NIK, 2015 WPF Hello World The XAML describes the GUI, the designer allows us to edit the GUI – not mature, autocomplete is imperfect 14

15. V 1.1ÓE-NIK, 2015 WPF Hello World Code-behind for the window 15

16. V 1.1ÓE-NIK, 2015 WPF Hello World We can edit the properties and the events for the selected UI element in the Properties window 16

17. V 1.1ÓE-NIK, 2015 WPF Hello World II. 17

18. V 1.1ÓE-NIK, 2015 WPF Hello World II. Events –We can subscribe to events using the events section of the Properties window (“thunder” icon) –When we double-click, the XAML and the code-behind are both automatically edited –The event handler method is created in the code-behind, the association between the method and the control’s event is done in the XAML –We can remove the association by hand; compile error if we remove the event handler method without removing the association –Double clicking on the control = adding event handler for the default event 18

19. V 1.1ÓE-NIK, 2015 Toolbox Controls –For user interaction Simple graphical shapes (rectangle, ellipse) Window extension elements –Menu, toolbar, status bar… Layout managers –To group and align/size the elements Etc. 19

20. V 1.1ÓE-NIK, 2015 Simple controls Button –Content property for the “text” –Click esemény Labe –Content property for the “text” CheckBox –Content property for the “text” –IsChecked property –Checked/Unchecked events RadioButton –Content property for the “text” –GroupName property (if not specified: same parent = group) –IsChecked property –Checked/Unchecked events 20

21. V 1.1ÓE-NIK, 2015 Simple controls TextBlock –Text property for the text (!) TextBox –For user input –Text property for the text (!) –TextChanged event GroupBox –Header for the text (!) –Content property for the “text” (or anything else!) Etc. 21

22. V 1.1ÓE-NIK, 2015 List controls ListBox –Items property for the elements –SelectionChanged event ComboBox (drop down list) –Items property for the elements –SelectionChanged event TreeView + TreeViewItem –Items property for the elements –In a TreeViewItem: Items property for the elements, Header property for the text 22

23. V 1.1ÓE-NIK, 2015 Inheritance chain of UI elements System.Windows.Media.Visual: –Rendering, transformations, click test, bounding rectangle operations… System.Windows.UIElement: –Input, alignment, focus, event handling System.Windows.FrameworkElement: –Data binding (!!!) 23

24. V 1.1ÓE-NIK, 2015 Inheritance chain of UI elements System.Windows.Controls.Control: –Base class for controls: mainly manages the look of the controls (Background, BorderThickness, BorderBrush, FontFamily, FontSize stb) –Template management, if a ControlTemplate is present 24

25. V 1.1ÓE-NIK, 2015 Inheritance chain of UI elements System.Windows.Controls.ContentControl: –Can contain only ONE element: Content –The content can be ANYTHING: String, Grid, etc. 25

26. V 1.1ÓE-NIK, 2015 Inheritance chain of UI elements ContentControl descendants: –Button –CheckBox –Label –RadioButton –… –Window 26

27. V 1.1ÓE-NIK, 2015 Inheritance chain of UI elements System.Windows.Controls.ItemsControl: –Can contain MULTIPLE elements: Items, ItemsSource –Items: ItemCollection, we can Add/Remove objects –ItemsSource: IEnumerable –Only one of them should be used. If the ItemsSource is specified, then the Items property is Read-Only 27

28. V 1.1ÓE-NIK, 2015 Inheritance chain of UI elements ItemsControl descendants: –ComboBox –ListBox –ListView –Menu –TreeView –… 28

29. V 1.1ÓE-NIK, 2015 Inheritance chain of UI elements System.Windows.Controls.Panel: –Base class for layout managers –Children: UIElementCollection type – accepts UIElement instances 29

30. V 1.1ÓE-NIK, 2015 Layout managers No display on their own, they group and align the controls within Grid (in cells, with margins) Canvas (positioned by pixel) DockPanel (dock top/bottom/left/right) StackPanel (stack controls on each other) WrapPanel (stack controls on each other + pagination) –The children property contains the sub-controls Grid: StackPanel: 30

31. V 1.1ÓE-NIK, 2015 Alignment of controls HorizontalAlignment –Within the parent VerticalAlignment –Within the parent Margin: distance around the control Height, Width These properties together (along with the rules specified in the layout manager) specify the location and the size of the controls (e.g. …Alignment+Margin, Height+VerticalAlignment, Width+HorizontalAlignment…) 31

32. V 1.1ÓE-NIK, 2015 Task – tax calculator 32