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

V 1.0

Programming III.

Comparison of GUI APIsWPF Hello World

UI elementsContent models

Inheritance chains

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

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

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

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

V 1.0 ÓE-NIK, 2014

Windows Forms vs. WPF

6

Windows Forms WPF

For developing simple GUI apps For 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 learn HARDER TO LEARN

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

• 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

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

V 1.0 ÓE-NIK, 2014

WPF Hello World

9

V 1.0 ÓE-NIK, 2014

WPF Hello World

10

V 1.0 ÓE-NIK, 2014

WPF Hello World

• View -> <important toolbox>• View -> Other Windows -> <less important toolbox>

11

V 1.0 ÓE-NIK, 2014

WPF Hello World

• Window representation and the XAML designer

12

V 1.0 ÓE-NIK, 2014

WPF Hello World

• Code-behind file of the MainWindow

13

V 1.0 ÓE-NIK, 2014

WPF Hello World

• The properties of the selected UI element can be altered in the Properties window

14

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

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

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

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

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

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

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

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

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

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

V 1.0 ÓE-NIK, 2014

Inheritance of the GUI classes

• ContentControl descendants :– Button– CheckBox– Label– RadioButton– …– Window

25

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

V 1.0 ÓE-NIK, 2014

Inheritance of the GUI classes

• ItemsControl descendants: – ComboBox– ListBox– ListView– Menu– TreeView– …

27

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

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

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

V 1.0 ÓE-NIK, 2014

WPF Hello World II.

31

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

V 1.0 ÓE-NIK, 2014

Exercise• Tax checker. Input: income, tax percentage, prepaid

tax ... Evaluate the user input!

33