V 1.1

Programming III.

GUI APIsWPF Hello World

Important UI elementsUI elements / content models

UI elements / inheritance

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

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

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

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

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

V 1.1 ÓE-NIK, 2015

Windows Forms vs. WPF

7

Windows Forms WPF

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 learn Hard to learn

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

V 1.1 ÓE-NIK, 2015

WPF Hello World

9

V 1.1 ÓE-NIK, 2015

WPF Hello World

10

V 1.1 ÓE-NIK, 2015

WPF Hello World

• View -> <name_of_window>• View -> Other Windows -> <name_of_window>

11

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

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

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

V 1.1 ÓE-NIK, 2015

WPF Hello World

• Code-behind for the window

15

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

V 1.1 ÓE-NIK, 2015

WPF Hello World II.

17

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

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

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

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

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

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

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

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

V 1.1 ÓE-NIK, 2015

Inheritance chain of UI elements

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

26

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

V 1.1 ÓE-NIK, 2015

Inheritance chain of UI elements

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

28

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

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

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

V 1.1 ÓE-NIK, 2015

Task – tax calculator

32