ComponentOne SpellChecker for WPF - HTML5 / jQuery, ASP.NET, WPF
V 1.0 Programming III. Comparison of GUI APIs WPF Hello World UI elements Content models Inheritance...
-
Upload
simon-richards -
Category
Documents
-
view
226 -
download
0
Transcript of 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