bcis 4650 visual programming for business...
Post on 27-May-2018
218 Views
Preview:
TRANSCRIPT
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
University of North Texas, ITDS Dept., Dr. Vedder
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
3The University of North Texas, ITDS Dept., Dr. Vedder
Brush Category is Complex
4The University of North Texas, ITDS Dept., Dr. Vedder
Alpha channel
normally reports
opacity.
3
University of North Texas, ITDS Dept., Dr. Vedder
You Can Expand Some Categories
5The University of North Texas, ITDS Dept., Dr. Vedder
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
6The University of North Texas, ITDS Dept., Dr. Vedder
4
University of North Texas, ITDS Dept., Dr. Vedder
What are “Property Markers”?, 2
7The University of North Texas, ITDS Dept., Dr. Vedder
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”)
8The University of North Texas, ITDS Dept., Dr. Vedder
5
University of North Texas, ITDS Dept., Dr. Vedder
Layout Controlsfor organizing UI elements; all are subclasses of Panel
Some Containers
The University of North Texas, ITDS Dept., Dr. Vedder
10
(Animations, Games)
6
University of North Texas, ITDS Dept., Dr. Vedder
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
11The University of North Texas, ITDS Dept., Dr. Vedder
StackPanel
�Orders child elements into a single vertical or horizontal row
�Preferred for nesting lists of items
12The University of North Texas, ITDS Dept., Dr. Vedder
7
University of North Texas, ITDS Dept., Dr. Vedder
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
13The University of North Texas, ITDS Dept., Dr. Vedder
Command Controls
8
University of North Texas, ITDS Dept., Dr. Vedder
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
15The University of North Texas, ITDS Dept., Dr. Vedder
HyperlinkButton
�Has NavigateUri property
�Uses blue as default color for Content text (use Foreground property to change)
16The University of North Texas, ITDS Dept., Dr. Vedder
9
University of North Texas, ITDS Dept., Dr. Vedder
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
18The University of North Texas, ITDS Dept., Dr. Vedder
10
University of North Texas, ITDS Dept., Dr. Vedder
User Selection Control Examples
The University of North Texas, ITDS Dept., Dr. Vedder
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
20The University of North Texas, ITDS Dept., Dr. Vedder
11
University of North Texas, ITDS Dept., Dr. Vedder
RadioButtons with GroupNames
The University of North Texas, ITDS Dept., Dr. Vedder
21
Text Controls
12
University of North Texas, ITDS Dept., Dr. Vedder
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)
23The University of North Texas, ITDS Dept., Dr. Vedder
Read-Only: TextBlock
�Displays single or mulit-line, read-only text
�Has many properties; read up!
(Run element = text with identical formatting)
24The University of North Texas, ITDS Dept., Dr. Vedder
13
University of North Texas, ITDS Dept., Dr. Vedder
TextBlock Has Built-In Styles
25The University of North Texas, ITDS Dept., Dr. Vedder
Another TextBlock Example
26The University of North Texas, ITDS Dept., Dr. Vedder
14
University of North Texas, ITDS Dept., Dr. Vedder
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
27The University of North Texas, ITDS Dept., Dr. Vedder
RichTextBlock Example #1
28The University of North Texas, ITDS Dept., Dr. Vedder
15
University of North Texas, ITDS Dept., Dr. Vedder
RichTextBlock Example #2
29The University of North Texas, ITDS Dept., Dr. Vedder
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
30The University of North Texas, ITDS Dept., Dr. Vedder
16
University of North Texas, ITDS Dept., Dr. Vedder
ToolTip
�Displays explanation for associated element
�Responds to mouse/pen hover or touch and hold
31The University of North Texas, ITDS Dept., Dr. Vedder
Some Remarks
About URIs
17
University of North Texas, ITDS Dept., Dr. Vedder
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
33The University of North Texas, ITDS Dept., Dr. Vedder
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
34The University of North Texas, ITDS Dept., Dr. Vedder
18
University of North Texas, ITDS Dept., Dr. Vedder
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);
35The University of North Texas, ITDS Dept., Dr. Vedder
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.
36The University of North Texas, ITDS Dept., Dr. Vedder
19
University of North Texas, ITDS Dept., Dr. Vedder
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
The University of North Texas, ITDS Dept., Dr. Vedder
20
University of North Texas, ITDS Dept., Dr. Vedder
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
39The University of North Texas, ITDS Dept., Dr. Vedder
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**)
40The University of North Texas, ITDS Dept., Dr. Vedder
21
University of North Texas, ITDS Dept., Dr. Vedder
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
41The University of North Texas, ITDS Dept., Dr. Vedder
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" />
42The University of North Texas, ITDS Dept., Dr. Vedder
22
University of North Texas, ITDS Dept., Dr. Vedder
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
43The University of North Texas, ITDS Dept., Dr. Vedder
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
44The University of North Texas, ITDS Dept., Dr. Vedder
23
University of North Texas, ITDS Dept., Dr. Vedder
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
45The University of North Texas, ITDS Dept., Dr. Vedder
WebView Control
�Hosts HTML content within an app
�Will discuss in more detail later in this course
46The University of North Texas, ITDS Dept., Dr. Vedder
24
University of North Texas, ITDS Dept., Dr. Vedder
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
48The University of North Texas, ITDS Dept., Dr. Vedder
25
University of North Texas, ITDS Dept., Dr. Vedder
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)
49The University of North Texas, ITDS Dept., Dr. Vedder
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
University of North Texas, ITDS Dept., Dr. Vedder
ListBox Control
�Displays a list of selectable text items
�Populate by Adding to the control’s Itemscollection
The University of North Texas, ITDS Dept., Dr. Vedder
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
52The University of North Texas, ITDS Dept., Dr. Vedder
27
University of North Texas, ITDS Dept., Dr. Vedder
Populating a ListView’s Items
Collection (when you have a few items that are static)
Writing inline code (in XAML or C#)
53The University of North Texas, ITDS Dept., Dr. Vedder
Populating a ListView’s Items
Collection (from a db or Internet source)
We will start covering this later.
54The University of North Texas, ITDS Dept., Dr. Vedder
28
University of North Texas, ITDS Dept., Dr. Vedder
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
55The University of North Texas, ITDS Dept., Dr. Vedder
GridView Control / Element
�Offers for display
�Default grid view
� Large tile view
�Grouped grid view
�Variable-sized gird view (complicated!)
�Highly customizable
56The University of North Texas, ITDS Dept., Dr. Vedder
29
University of North Texas, ITDS Dept., Dr. Vedder
57The University of North Texas, ITDS Dept., Dr. Vedder
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
top related