1 / 46

BCIS 4650 Visual Programming for Business Applications

BCIS 4650 Visual Programming for Business Applications. XAML Controls. XAML Elements. Represent objects at runtime Organized (mostly) into 5 groups Root elements Control elements Panel elements Shape and geometric elements Document elements. What is a ‘Control’?.

fola
Download Presentation

BCIS 4650 Visual Programming for Business Applications

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. BCIS 4650 Visual Programming for Business Applications XAML Controls The University of North Texas, ITDS Dept., Dr. Vedder

  2. XAML Elements • Represent objects at runtime • Organized (mostly) into 5 groups • Root elements • Control elements • Panel elements • Shape and geometric elements • Document elements The University of North Texas, ITDS Dept., Dr. Vedder

  3. What is a ‘Control’? • Is a class which, when placed on a XAML page, provides display or other UI capabilities at runtime to the user • Has members, ex., • Properties • Methods • (Recognized) events • Enumerations (sets of legal values) • Etc. • Go online to learn details The University of North Texas, ITDS Dept., Dr. Vedder

  4. Designer Tools in Visual Studioinclude • Toolbox (left-side) • XAML Designer • XAML Editor • Properties Window The University of North Texas, ITDS Dept., Dr. Vedder

  5. Toolbox, Designer, Code Editor, Properties Window The University of North Texas, ITDS Dept., Dr. Vedder

  6. Adding a Control to a Page • Use VS Toolbox: Select, drag, drop, place, size • Write XAML code (as an element) • Create in Blend for Visual Studio The University of North Texas, ITDS Dept., Dr. Vedder

  7. Set a Control’s Properties • Probably easier to use Properties Window at first • Code attributes/properties in XAML (propertyname=“value”) • Name control/element if used in code-behind or elsewhere • Name property in Properties Window • x:Name attribute/property The University of North Texas, ITDS Dept., Dr. Vedder

  8. Property Markers • Little squares appearing in Properties Window or context menus • Colors: • White/blank – holds default value, if any • Black – holds local data value/resource • Green – holds non-local resource (ex., Win 8.1 style) • Orange – holds a data- bound value The University of North Texas, ITDS Dept., Dr. Vedder

  9. Attaching an Event to a Control • Recall event recognition is automatic; event response is NOT • Code response with an event handler • Create in Properties Window or XAML code (Click=“name of code-behind handler”) The University of North Texas, ITDS Dept., Dr. Vedder

  10. Controls by Function • Appbars and commands • Buttons • Collection/data controls • Flyouts • Images • Graphics • Layout controls • Media controls • Navigation • Progress controls • Text controls • Selection controls The University of North Texas, ITDS Dept., Dr. Vedder

  11. Layout Controlsfor organizing UI elements; all subclasses of Panel

  12. The University of North Texas, ITDS Dept., Dr. Vedder

  13. Canvas (Canvas Panel) • Supports absolute positioning of child elements relative to top left corner • Offers no real support for resizing • Is best for games, animations The University of North Texas, ITDS Dept., Dr. Vedder

  14. Grid (Grid Panel) • Organizes child elements into rows and columns • Uses zero-based row & column IDs • Define first, then fill The University of North Texas, ITDS Dept., Dr. Vedder

  15. StackPanel • Orders child elements into a single vertical or horizontal row • Preferred for nesting diverse elements The University of North Texas, ITDS Dept., Dr. Vedder

  16. VariableSizeWrapGrid • Orders by rows and columns, but each child element can extend beyond its cell (variable size based on content) • Star with standard Grid; play with this later if your UI would benefit The University of North Texas, ITDS Dept., Dr. Vedder

  17. Command Controlsfor organizing UI elements; all subclasses of Panel

  18. “Lightweight UI”a.k.a. “light-dismiss behavior” • Controls that can be dismissed by the user touching anywhere outside it • Examples – • Flyout • ToolTip • AppBars The University of North Texas, ITDS Dept., Dr. Vedder

  19. Flyout • Use for temporary messages or simple requests to the user • Will light-dismiss unless user must act • Associated often with a Button, so there is a Button.Flyout attached property The University of North Texas, ITDS Dept., Dr. Vedder

  20. Sample Flyout The University of North Texas, ITDS Dept., Dr. Vedder

  21. Flyout, 2 • Use FlyoutBase.AttachedFlyout to associate a Flyout with other controls • Create a Flyout resource if you want to use the same message with multiple controls The University of North Texas, ITDS Dept., Dr. Vedder

  22. FlyoutBase.AttachedFlyout Samples The University of North Texas, ITDS Dept., Dr. Vedder

  23. Sample Flyout Resource The University of North Texas, ITDS Dept., Dr. Vedder

  24. Button Responds to a Click event (left-mouse button) as well as a Tapped event (any mouse button, finger, pen) • Use Content attribute for label • Has Flyout attached property The University of North Texas, ITDS Dept., Dr. Vedder

  25. AppBarButton • Used inside AppBar and CommandBar controls; circled icons • Use SymbolIcon nested element to show a Segoe glyph from the SymbolIcon enumeration (see Nathan, p. 250) • Use FontIconto show a symbol from another typeface. The University of North Texas, ITDS Dept., Dr. Vedder

  26. AppButton Example The University of North Texas, ITDS Dept., Dr. Vedder

  27. AppBar and CommandBar • Use for displaying application-specific commands to the user (ex., nav., tools) • Hidden by default; top and/or bottom • Overlay page content when visible • Are containers for, ex., StackPanels • Use an app color for background • Edge swipe with finger; rt.-click; Win+Z The University of North Texas, ITDS Dept., Dr. Vedder

  28. AppBar • Locate at top of screen • Must beattached to a Page • Has looser design guidelines than for the bottom bar, ex., can be thicker. The University of North Texas, ITDS Dept., Dr. Vedder

  29. AppBar Example The University of North Texas, ITDS Dept., Dr. Vedder

  30. CommandBar • Appears at the bottom • Must follow strict guidelines • Primary commands start at the right corner • Secondary commands at the left • Supports only AppBarButton, AppBarToggleButton, AppBarSeparator The University of North Texas, ITDS Dept., Dr. Vedder

  31. CommandBar Example The University of North Texas, ITDS Dept., Dr. Vedder

  32. HyperLinkButton • Has NavigateUri property • Uses purple as default color for Content text (and is a lot of work to change) The University of North Texas, ITDS Dept., Dr. Vedder

  33. ToggleSwitch, ToggleButton, CheckBox • Are “sticky” buttons that hold their state when clicked • Allow for more than one choice when grouped • Supports 2 states (ToggleSwitch) or 3 states (ToggleButton, Checkbox: true, false, not determined/null) • Differ in appearance The University of North Texas, ITDS Dept., Dr. Vedder

  34. User Selection Examples The University of North Texas, ITDS Dept., Dr. Vedder

  35. RadioButton • Supports exclusivechoice when grouped together • Appear typically inside a StackPanel • Use GroupName property if you need to associate RadioButtons from different StackPanel parent containers The University of North Texas, ITDS Dept., Dr. Vedder

  36. RadioButtons w/GroupName The University of North Texas, ITDS Dept., Dr. Vedder

  37. ToolTip • Displays explanation for associated element • Responds to mouse/pen hover or touch and hold The University of North Texas, ITDS Dept., Dr. Vedder

  38. Text Controlsfor organizing UI elements; all subclasses of Panel

  39. Two Types of Textual Control • Block – used for display • TextBlock • RichTextBlock • Box – used for user input and editing as well as display • TextBox • RichEditBox (not discussed today) The University of North Texas, ITDS Dept., Dr. Vedder

  40. TextBlock • Displays single or mulit-line, read-only text • Inlines property for large content The University of North Texas, ITDS Dept., Dr. Vedder

  41. Another TextBlock Example The University of North Texas, ITDS Dept., Dr. Vedder

  42. RichTextBlock • Displays read-only ‘rich content’: character or paragraph-formatted text, in-line images, videos, hyperlinks, etc. • Use Blocks property to get contents • Can embed other UI elements inside text The University of North Texas, ITDS Dept., Dr. Vedder

  43. RichTextBlock Example #1 The University of North Texas, ITDS Dept., Dr. Vedder

  44. RichTextBlock Example #2 The University of North Texas, ITDS Dept., Dr. Vedder

  45. TextBox • Used mainly for single or multi-line user input/editing, but can also display single or mulit-line plain text • Can use with MaxLength property to limit user entry • Offers IsSpellCheckEnabledproperty The University of North Texas, ITDS Dept., Dr. Vedder

  46. ITDS Logo / Mood Slide The University of North Texas, ITDS Dept., Dr. Vedder

More Related