bcis 4650 visual programming for business...

1

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

BCIS 4650

Visual Programming for

Business Applications

XAML Controls

(That You Will, or Could, Use in Your BCIS 4650 App – i.e., a Subset)

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

1

What is a XAML“Control” / “Element”?

� Is a Toolbox class which, when placed on a XAML page (= a runtime object), provides display or other UI capabilities at runtime

�Has members, ex.,

�Properties (wrench symbol)

�Methods

� (Recognized) events (lightning bolt symbol)

�Enumerations (sets of legal values), etc.

�Search controlName Class (Windows.UI.Xaml.Controls) ((UWP app))

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

2


Setting Control Properties & Events

�Probably easier to use Properties Window at first (wrench for properties, bolt for events)

�Code attributes/properties in XAML (propertyname=“value”)

�Custom-name a control if you refer to it in code-behind or elsewhere

�Use Name property in Properties Window, or

�Use x:Name attribute/property


Brush Category is Complex


Alpha channel

normally reports

opacity.

3


You Can Expand Some Categories


What are “Property Markers”?

�Little squares appearing in Properties Window or context menus

�Source for value is color-coded, exs.:

�White/blank – holds default value, if any

�Black – holds local data value or local resource

�Green – holds non-local resource (ex., a Windows 10 style)

�Yellow – holds a data-bound value

�Purple – inherited from another control


4


What are “Property Markers”?, 2


Attaching an Event to a Control

�Recall event recognition is automatic; event response is NOT

�Code response with an event handler

�Call in Properties Window or XAML code (Click=“name of code-behind handler”)


5


Layout Controlsfor organizing UI elements; all are subclasses of Panel

Some Containers


10

(Animations, Games)

6


Grid (Grid Panel)

�Organizes child elements into rows and columns; good for nesting varied elements

�Uses zero-based row & column IDs

�Define grid first, then fill


StackPanel

�Orders child elements into a single vertical or horizontal row

�Preferred for nesting lists of items


7


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


Command Controls

8


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 as an attached property


HyperlinkButton

�Has NavigateUri property

�Uses blue as default color for Content text (use Foreground property to change)


9


Selection (“Data

Input”) Controls

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 (like the Checkbox: true, false, not determined / null)

�Differ in appearance


10


User Selection Control Examples


19

RadioButton (“Option Button”)

�Supports exclusive choice when grouped together

�Appear typically inside a StackPanel

�Use GroupName property if you need to associate RadioButtons from different StackPanel parent containers


11


RadioButtons with GroupNames


21

Text Controls

12


Two Types of Text Control

�Block – used for read-only text

�TextBlock

�RichTextBlock

�Box – used for user input and editing as well as display

� TextBox

�RichEditBox (probably not used in BCIS 4650)


Read-Only: TextBlock

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

�Has many properties; read up!

(Run element = text with identical formatting)


13


TextBlock Has Built-In Styles


Another TextBlock Example


14


Read Only: RichTextBlock

�Displays read-only ‘rich content’: character or paragraph-formatted text, in-line images, videos, hyperlinks, etc.

�Uses Blocks property to get contents

�Can embed other UI elements inside text


RichTextBlock Example #1


15


RichTextBlock Example #2


Input: TextBox

�Used mainly for single or multi-line user input / editing, but can also display single or mulit-line plain text

�Set MaxLength prop. to limit user entry

�Offers IsSpellCheckEnabled property


16


ToolTip

�Displays explanation for associated element

�Responds to mouse/pen hover or touch and hold


Some Remarks

About URIs

17


Uniform Resource Identifier (URI)

�Used to access and load a resource located in another folder, on a company intranet, or on the Internet

�Can load

� Images (frequently)

�Data files

�Code assemblies

�Pages

�Many other types of files


Organizing Image Resourcesin an App Package

� Important for maintenance and globalization to separate code from resources, incl. images

�The Pack URI Scheme -- a model for organizing and identifying app content; packages (.appx) and member parts

�Prefix identifies the “scheme” (often an Internet service) used


18


Packaging Scheme Syntax Varies!

�General syntax: scheme://domainName/path

�So http://, https://, ftp://, file://, etc.

�BUT when domainName = installed app name

� ms-appx:/// = installed app location

� ms-appdata:/// = app data folder

�Examples:

� var uri = new System.Uri(“ms-appx:///images/ logo.png”);

� var file = Windows.Storage.StorageFile.GetFile

FromApplicationUriAsync(uri);


The ms-appx:// Scheme

�Will be the scheme you will use for the resources packaged with your app.

� Is good practice “to fully qualify” URI by including ms-appx:// in the path citation.

� Include a third / (i.e., ms-appx:///) when the desired resource is located one level below the package’s root folder.


19


Media Controls

All Resource Files in Your App …

�Must have their BuildAction property set to ‘Content’

�Otherwise they will not be included in your app package

�Select each file in Solution Explorer, then check Properties Window


20


Relevant Graphics Terminology

�Raster / Bitmap – what the Image control accepts (.bmp, .jpg, .png., .gif, .tiff, etc.)

�Vector – computer-drawn (.svg, .pdf, .eps)

�Codec

�“Decoding”

� Translating image format to image data that can be used by the OS

�By default the OS selects the codec used


Two Ways to Display an Image

�Use the Image control

�Paint an image on an object using the ImageBrush control (** not found in the Toolbox; must write C# code to use**)


21


Image Control

�Displays contents of a bitmap file

�Must be BMP, PNG, GIF, JPG/JPEG, JPEG-XR, TIF/TIFF, ICO; else convert

�Cannot change the background color, nor does Image accept the focus

�Use typically local files in /Assets or other separate folder(s) (ex., “/Images”)

�Can also use external server files as sources


Image: The Source Attribute

�Must set to a URI in XAML or in C#

�Must give full path (Win Store and universal app requirement)

�XAML: <Image Source= “Assets/MySplashScreen.bmp"/>

�XAML: <Image Source="C:\Users\Maria\

Pictures\Water Lilies.jpg"/>

�XAML: < Image Source="http:// SomeWebsite.com/example.png" />


22


The Source Attribute, 2

�With C#, you must write, ex., :

� Image.Source has an ImageFailed event for exception handling

�Requires BitmapImage class set to an URI


MediaPlayerElement Control

�Displays video and images; plays audio

�Offers built-in user controls; customizable

�Use only with Window 10 and up; use MediaElement for older versions of Windows


23


Map Control

�Displays customizable map data

�Must use with Bing Maps (later in this course)

�Can show, ex.,

�Road maps, incl. transit maps and traffic

�Aerial or streetside views

�3D views

�Directions

� Local businesses

�Search results


WebView Control

�Hosts HTML content within an app

�Will discuss in more detail later in this course


24


Item Collection

Controls

ComboBox Control / Element

�Can only select one item from a drop-down list (thus consumes less page space)

�Uses SelectedItem property for pick


25


ListBox Control / Element

�Shows all items in list (scrollable)

�Can support multiple selection with SelectModeproperty (single is default)

�Has SelectedItem, SelectedItems properties for user pick(s)


Note Button

invisible

when focus

movesXmlns:sys includes System namespace

for just this ListBox

XAML namespace (x:) Double data type

Sys: now makes specific calls

Data Controls(Data controls are a type of container)

26


ListBox Control

�Displays a list of selectable text items

�Populate by Adding to the control’s Itemscollection


51

ListView Control

�Shows user a vertical list of items that user can

scroll

� Is best suited for short lists, since most desktops

and tablets are used in landscape orientation

�Can pick 1 or more items (like ListBox) using

SelectionMode prop.

�Highly customizable

�Can have varied content


27


Populating a ListView’s Items

Collection (when you have a few items that are static)

Writing inline code (in XAML or C#)


Populating a ListView’s Items

Collection (from a db or Internet source)

We will start covering this later.


28


GridView Control

�Shows user a collection of items organized by rows and columns

�Scrolls vertically

�Populate as for ListView

�Positions content automatically to consume screen space

�Customizable


GridView Control / Element

�Offers for display

�Default grid view

� Large tile view

�Grouped grid view

�Variable-sized gird view (complicated!)

�Highly customizable


29



Use Third-Party Controls or Add-Ins

With Caution

�Costs to you

�Costs to client

�Costs to user

�Reliability, strength of supplier

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

ITDS Logo / Mood Slide

bcis 4650 visual programming for business...

Documents