1. V 1.0 Programming III. Comparison of GUI APIs WPF Hello World UI elements Content models Inheritance chains

2. V 1.0ÓE-NIK, 2014 Graphical User Interface APIs API: Application Programming Interface Usually we do not start the programming of a GUI from scratch –Exception: games, very often There are several APIs that give us some basic components/concepts/approaches –MFC(Windows/C++) –Windows Forms(Windows/.NET) –Java AWT/Swing(Java) –Cocoa(Mac OS X) –QT(Unix/Linux...) –GTK/GTK+(Unix/Linux...) –WPF(Windows/.NET) –Windows Runtime (Metro)(Windows/C#, C++) 2

3. V 1.0ÓE-NIK, 2014 GUI APIs / Windows Forms Available since.NET 1.0 (2002) –Provides managed access of the native Windows API elements –Windows API: from Windows 1.0 (1985) Simple, standard-looking user interfaces Functionality: only GUI, no logic/layering –Creation and management of windows –Basic controls/components –Dialog windows –Handling of mouse/keyboard input events –Various different APIs for different tasks 3

4. V 1.0ÓE-NIK, 2014 GUI APIs / WPF Since.NET 3.0 (2006) Designed to replace the old Windows Forms –Only half-success (as of 2014) Offers a standardized access and logical representation of (almost) every aspect of a Graphical application –Build-up of the user interface (similar to Windows Forms) –2D –3D –Multimedia/video –Document management –Input management 4

5. V 1.0ÓE-NIK, 2014 GUI APIs / Windows Runtime Metro: design principles, design language (Metro -> Modern -> Windows Store/Windows 8) Modal, fullscreen apps with simple graphical layout –Good for portable devices with smaller screens 5

6. V 1.0ÓE-NIK, 2014 Windows Forms vs. WPF 6 Windows FormsWPF For developing simple GUI appsFor developing „Rich desktop apps” with better graphics / multimedia content Usually restricted to one possible solution for a problem Usually multiple solutions are possible A typical program requires external (ms or non-ms) libraries that can be very different in their approaches and usage logics The same principles and usage logics can be used for lots of devices Very mature, the flaws are known and usually there is a known work- around for everything Under heavy development even nowadays, some known bugs/problems have no official / proven workarounds Easier to learnHARDER TO LEARN

7. V 1.0ÓE-NIK, 2014 Choose which one? http://blog.arsanth.com/index.php/2011/09/15/what-is-and-isnt-dead-in- windows-8/ (2013. február 22.)http://blog.arsanth.com/index.php/2011/09/15/what-is-and-isnt-dead-in- windows-8/ At the moment, WPF is the better way to develop desktop apps – use WinForms for quick prototyping or if it has to be used for compatibility / HR reasons 7

8. V 1.0ÓE-NIK, 2014 The future (as of 2014) ? The support for Windows Forms seems to be eternal, but it is no longer developed The future of WPF is not certain, its development is slow, and the developer tools are not mature enough The XAML is a technology that will surely live on 8

9. V 1.0ÓE-NIK, 2014 WPF Hello World 9

10. V 1.0ÓE-NIK, 2014 WPF Hello World 10

11. V 1.0ÓE-NIK, 2014 WPF Hello World View -> View -> Other Windows -> 11

12. V 1.0ÓE-NIK, 2014 WPF Hello World Window representation and the XAML designer 12

13. V 1.0ÓE-NIK, 2014 WPF Hello World Code-behind file of the MainWindow 13

14. V 1.0ÓE-NIK, 2014 WPF Hello World The properties of the selected UI element can be altered in the Properties window 14

15. V 1.0ÓE-NIK, 2014 WPF Hello World Project settings –Compile settings –Pre- and post-compile tasks –Command line arguments –User/app level configuration –Etc. External References –To ms or non-ms software libraries or web services App-level configuration files Window XAML and code- behind files 15

16. V 1.0ÓE-NIK, 2014 App, MainWindow App class: –App.xaml.cs + generated bin/obj/App.g.cs = App class –This is where the Main() is generated, which creates an instance of the Main window –The “Current” static property represents the currently running application. It has events/methods to detect/control the execution of the application (e.g. Startup, Exit events, or App.Current.Shutdown()) MainWindow class / other Window classes: –Represents windows / forms –MainWindow.xaml.cs + generated bin/obj/MainWindow.g.cs = MainWindow class –It contains the InitializeComponent() method that processes and loads the XAML 16

17. V 1.0ÓE-NIK, 2014 Toolbox Controls –For user input Simple graphical/UI elements “Window frame extensions” –Menus, toolbars, status bars… Content managers –Used for grouping and placement of other UI elements Etc 17

18. V 1.0ÓE-NIK, 2014 Simple controls Button –Content property to set the caption text (?) –Click event Label –Content property to set the caption text (?) CheckBox –Content property to set the caption text (?) –IsChecked property to get/set the checked state –Checked/Unchecked events RadioButton –Content property to set the caption text (?) –GroupName to define groups (or use a content manager) –IsChecked property –Checked/Unchecked events 18

19. V 1.0ÓE-NIK, 2014 Simple controls TextBlock (to display multiline or simple text) –Text property TextBox (input box) –Text property –TextChanged event GroupBox –Header property –Content property 19

20. V 1.0ÓE-NIK, 2014 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 (if the elements are TreeViewItem instances, then each will have an Items property) 20

21. V 1.0ÓE-NIK, 2014 Content models ContentControl: –Can contain a single element (Content property  user controls?) HeaderedContentControl: one element + a header text. ItemsControl: –Can contain multiple elements (ItemsSource / Items properties) HeaderedItemsControl: multiple elements+headers. 21

22. V 1.0ÓE-NIK, 2014 Inheritance of the GUI classes System.Windows.Media.Visual: –Rendering, transformations, hit check, bounding box… System.Windows.UIElement: –Input, placement, focus management, event handling System.Windows.FrameworkElement: –Data binding 22

23. V 1.0ÓE-NIK, 2014 Inheritance of the GUI classes System.Windows.Controls.Control: –Mainly manages the styles of the different controls (Background, BorderThickness, BorderBrush, FontFamily, FontSize) – it’s possible to completely change the look of every control! –Important question: what can be on this control? (ContentControl vs ItemsControl)  descendant classes? 23

24. V 1.0ÓE-NIK, 2014 Inheritance of the GUI classes System.Windows.Controls.ContentControl: –Can contain only ONE element (Content property). It can be any type (Object), but it is usually a string or a UIElement descendant Encapsulating User Controls into each other is a common usage 24

25. V 1.0ÓE-NIK, 2014 Inheritance of the GUI classes ContentControl descendants : –Button –CheckBox –Label –RadioButton –… –Window 25

26. V 1.0ÓE-NIK, 2014 Inheritance of the GUI classes System.Windows.Controls.ItemsControl: –Can contain MULTIPLE elements (Items, ItemsSource property). –Items: ItemCollection – can store Object references –ItemsSource: IEnumerable –Only one of the two storage modes can be used!!! If we use the ItemsSource, then the Items will be read-only. If we set the Items property, then we cannot set the ItemsSource 26

27. V 1.0ÓE-NIK, 2014 Inheritance of the GUI classes ItemsControl descendants: –ComboBox –ListBox –ListView –Menu –TreeView –… 27

28. V 1.0ÓE-NIK, 2014 Placement of UI elements HorizontalAlignment VerticalAlignment Margin, Height, Width Every UI element is placed according to the combination of these values (e.g. …Alignment+Margin, Height+VerticalAlignment, Width+HorizontalAlignment…) 28

29. V 1.0ÓE-NIK, 2014 Content managers They are used to organize the placement and the resizing of the sub-elements – the content managers have no visual representation on their own Grid (helper row/column definitions) Canvas (strictly pixel-accurate placement) DockPanel (docked to left/right/top/bottom) StackPanel (Elements are stacked) WrapPanel (Elements are stacked + paginated/scrolled) Grid: StackPanel: 29

30. V 1.0ÓE-NIK, 2014 Inheritance of the GUI classes System.Windows.Controls.Panel: –Every content manager is the descendant of the Panel base class –Children: UIElementCollection typed property – can store UIElement references 30

31. V 1.0ÓE-NIK, 2014 WPF Hello World II. 31

32. V 1.0ÓE-NIK, 2014 WPF Hello World II. Event handling –The list of events can be accessed in the Properties window (“lightning” icon) –After double-clicking, a new event handler is created in the code-behind source, and the new method is added into the event- delegate –After deleting the reference in the Properties window, the association for the method is removed from the event- delegate (but the method itself is not deleted!) –We can also add an event handler to the “default event” of an element by double- clicking on the element itself 32

33. V 1.0ÓE-NIK, 2014 Exercise Tax checker. Input: income, tax percentage, prepaid tax... Evaluate the user input! 33