Programming III .

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

2. Graphical User Interface APIs • API: ApplicationProgrammingInterface • 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++)

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

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

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

6. Windows Forms vs. WPF

7. Choose which one? • http://blog.arsanth.com/index.php/2011/09/15/what-is-and-isnt-dead-in-windows-8/ (2013. február 22.) • 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

8. The future • (as of 2014) • ? • The support for Windows Formsseems 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

9. WPF Hello World

10. WPF Hello World

11. WPF Hello World • View -> <important toolbox> • View -> Other Windows -> <less important toolbox>

12. WPF Hello World • Window representation and the XAML designer

13. WPF Hello World • Code-behind file of the MainWindow

14. WPF Hello World • The properties of the selected UI elementcan be altered in the Properties window

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

16. App, MainWindow • Appclass: • App.xaml.cs + generated bin/obj/App.g.cs = Appclass • 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, Exitevents, or App.Current.Shutdown()) • MainWindowclass / other Window classes: • Represents windows / forms • MainWindow.xaml.cs + generated bin/obj/MainWindow.g.cs = MainWindowclass • It contains the InitializeComponent() method that processes and loads the XAML

17. Toolbox • Controls • For user input • Simple graphical/UIelements • “Window frame extensions” • Menus, toolbars, status bars… • Content managers • Used for grouping and placement of other UI elements • Etc

18. Simple controls • Button • Contentproperty to set the caption text (?) • Clickevent • Label • Contentproperty to set the caption text (?) • CheckBox • Contentproperty to set the caption text (?) • IsCheckedproperty to get/set the checked state • Checked/Uncheckedevents • RadioButton • Contentproperty to set the caption text (?) • GroupNameto define groups (or use a content manager) • IsChecked property • Checked/Uncheckedevents

19. Simple controls • TextBlock (to display multiline or simple text) • Text property • TextBox (input box) • Text property • TextChangedevent • GroupBox • Headerproperty • Contentproperty

20. List controls • ListBox • Itemsproperty for the elements • SelectionChangedevent • ComboBox (drop-down list) • Itemsproperty for the elements • SelectionChangedevent • TreeView + TreeViewItem • Itemsproperty for the elements (if the elements are TreeViewItem instances, then each will have an Items property)

21. Content models • ContentControl: • Can contain a single element (Contentproperty  user controls?) • HeaderedContentControl: one element + a header text. • ItemsControl: • Can contain multiple elements (ItemsSource / Itemsproperties) • HeaderedItemsControl: multiple elements+headers.

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

23. 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? (ContentControlvsItemsControl) descendant classes?

24. Inheritance of the GUI classes • System.Windows.Controls.ContentControl: • Can contain only ONE element (Contentproperty). 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

25. Inheritance of the GUI classes • ContentControldescendants : • Button • CheckBox • Label • RadioButton • … • Window

26. Inheritance of the GUI classes • System.Windows.Controls.ItemsControl: • Can contain MULTIPLE elements (Items, ItemsSourceproperty). • Items: ItemCollection–can store Objectreferences • ItemsSource: IEnumerable • Only one of the two storage modes can be used!!! • If we use theItemsSource, then the Items will be read-only. If we set the Items property, then we cannot set the ItemsSource

27. Inheritance of the GUI classes • ItemsControldescendants: • ComboBox • ListBox • ListView • Menu • TreeView • …

28. Placement of UI elements • HorizontalAlignment • VerticalAlignment • Margin, Height, Width • Every UI elementis placed according to the combination of these values (e.g. …Alignment+Margin, Height+VerticalAlignment, Width+HorizontalAlignment…)

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

30. Inheritance of the GUI classes • System.Windows.Controls.Panel: • Every content manager is the descendant of the Panel base class • Children: UIElementCollectiontyped property – can store UIElementreferences

31. WPF Hello World II.

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

33. Exercise • Tax checker. Input: income, tax percentage, prepaid tax ... Evaluate the user input!