1 / 33

Programming III .

Programming III. Comparison of GUI A PIs WPF Hello World UI elements Content models Inheritance chains. Graphical User Interface APIs. API: Application Programming Interface Usually we do not start the programming of a GUI from scratch Exception: games, very often

Download Presentation

Programming III .

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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!

More Related