Bcis 4650 visual programming for business applications
This presentation is the property of its rightful owner.
Sponsored Links
1 / 47

BCIS 4650 Visual Programming for Business Applications PowerPoint PPT Presentation


  • 45 Views
  • Uploaded on
  • Presentation posted in: General

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’?.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Bcis 4650 visual programming for business applications

BCIS 4650 Visual Programming for Business Applications

XAML Controls

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


Xaml elements

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


What is a control

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


Designer tools in visual studio include

Designer Tools in Visual Studioinclude

  • Toolbox (left-side)

  • XAML Designer

  • XAML Editor

  • Properties Window

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


Toolbox designer code editor properties window

Toolbox, Designer, Code Editor, Properties Window

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


Adding a control to a page

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


Set a control s properties

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


Property markers

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


Attaching an event to a control

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


Controls by function

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


Before picking a control

Before Picking a Control….

  • How will the user INTERACT w/ your app?

    • Quick flicking?

    • Careful reading?

  • How will the user COMMAND your app?

    • Touch?

    • Pen?

    • Mouse?

  • What is the expected device orientation?

    • Landscape?

    • Portrait?

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


Layout controls for organizing ui elements all subclasses of panel

Layout Controlsfor organizing UI elements; all subclasses of Panel


Bcis 4650 visual programming for business applications

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


Canvas canvas panel

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


Grid grid panel

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


Stackpanel

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


Variablesizewrapgrid

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


Command controls

Command Controls


Lightweight ui a k a light dismiss behavior

“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


Flyout

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


Sample flyout

Sample Flyout

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


Flyout 2

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


Flyoutbase attachedflyout samples

FlyoutBase.AttachedFlyout Samples

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


Sample flyout resource

Sample Flyout Resource

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


Button

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


Appbarbutton

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


Appbutton example

AppButton Example

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


Appbar and commandbar

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


Appbar

AppBar

  • Locate at top of screen

  • Must be attached 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


Appbar example

AppBar Example

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


Commandbar

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


Commandbar example

CommandBar Example

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


Hyperlinkbutton

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


Toggleswitch togglebutton checkbox

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


User selection examples

User Selection Examples

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


Radiobutton

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


Radiobuttons w groupname

RadioButtons w/GroupName

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


Tooltip

ToolTip

  • Displays explanation for associated element

  • Responds to mouse/pen hover or touch and hold

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


Text controls

Text Controls


Two types of textual control

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


Textblock

TextBlock

  • Displays single or mulit-line, read-only text

  • Inlines property for large content

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


Another textblock example

Another TextBlock Example

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


Richtextblock

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


Richtextblock example 1

RichTextBlock Example #1

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


Richtextblock example 2

RichTextBlock Example #2

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


Textbox

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


Itds logo mood slide

ITDS Logo / Mood Slide

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


  • Login