Programming III.
GUI APIs
WPF Hello World
Important UI elements
UI elements / content models
UI elements / inheritance
V 1.1
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
–
–
–
–
–
–
–
–
–
V 1.1
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)
ÓE-NIK, 2015
(Only the desktop
APIs are listed here)
2
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
–
–
–
–
–
V 1.1
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.
ÓE-NIK, 2015
3
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
–
–
–
–
–
V 1.1
UI layout (similar elements as in Windows Forms)
2D
3D
Multimedia/video
Etc.
ÓE-NIK, 2015
4
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?
V 1.1
ÓE-NIK, 2015
5
Windows Forms demo + problems
• Event-driven approach, MANY controls
• Mature, but many problems with BIG programs
•
•
•
•
•
•
V 1.1
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)?
ÓE-NIK, 2015
6
Windows Forms vs. WPF
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
Unified business logic
required, even the MS solutions
can have different usage principles
Old and mature – few bugs, but
they are known and workarounds
exist
Easy to learn
V 1.1
ÓE-NIK, 2015
Some bugs, not mature framework,
not mature IDE, ”under
development” feeling
Hard to learn
7
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!
V 1.1
ÓE-NIK, 2015
8
WPF Hello World
V 1.1
ÓE-NIK, 2015
9
WPF Hello World
V 1.1
ÓE-NIK, 2015
10
WPF Hello World
• View -> <name_of_window>
• View -> Other Windows -> <name_of_window>
V 1.1
ÓE-NIK, 2015
11
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
V 1.1
ÓE-NIK, 2015
12
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
V 1.1
ÓE-NIK, 2015
13
WPF Hello World
• The XAML describes the GUI, the designer allows us to
edit the GUI – not mature, autocomplete is imperfect
V 1.1
ÓE-NIK, 2015
14
WPF Hello World
• Code-behind for the window
V 1.1
ÓE-NIK, 2015
15
WPF Hello World
• We can edit the properties and the events for the
selected UI element in the Properties window
V 1.1
ÓE-NIK, 2015
16
WPF Hello World II.
V 1.1
ÓE-NIK, 2015
17
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
V 1.1
ÓE-NIK, 2015
18
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.
V 1.1
ÓE-NIK, 2015
19
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
–
–
–
–
V 1.1
Content property for the “text”
GroupName property (if not specified: same parent = group)
IsChecked property
Checked/Unchecked events
ÓE-NIK, 2015
20
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.
V 1.1
ÓE-NIK, 2015
21
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
V 1.1
ÓE-NIK, 2015
22
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 (!!!)
V 1.1
ÓE-NIK, 2015
23
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
V 1.1
ÓE-NIK, 2015
24
Inheritance chain of UI elements
• System.Windows.Controls.ContentControl:
– Can contain only ONE element: Content
– The content can be ANYTHING: String, Grid, etc.
V 1.1
ÓE-NIK, 2015
25
Inheritance chain of UI elements
• ContentControl descendants:
–
–
–
–
–
–
V 1.1
Button
CheckBox
Label
RadioButton
…
Window
ÓE-NIK, 2015
26
Inheritance chain of UI elements
• System.Windows.Controls.ItemsControl:
–
–
–
–
V 1.1
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
ÓE-NIK, 2015
27
Inheritance chain of UI elements
• ItemsControl descendants:
–
–
–
–
–
–
V 1.1
ComboBox
ListBox
ListView
Menu
TreeView
…
ÓE-NIK, 2015
28
Inheritance chain of UI elements
• System.Windows.Controls.Panel:
– Base class for layout managers
– Children: UIElementCollection type – accepts UIElement
instances
V 1.1
ÓE-NIK, 2015
29
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:
V 1.1
StackPanel:
ÓE-NIK, 2015
30
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…)
V 1.1
ÓE-NIK, 2015
31
Task – tax calculator
V 1.1
ÓE-NIK, 2015
32