BCIS 4650 Visual Programming for Business Applications XAML Controls (That You Will, or Could, Use in Your BCIS 4650 App i.e., a Subset) 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)) 2 1
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 3 Brush Category is Complex Alpha channel normally reports opacity. 4 2
You Can Expand Some Categories 5 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 6 3
What are Property Markers?, 2 7 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 ) 8 4
Layout Controls for organizing UI elements; all are subclasses of Panel (Animations, Games) Some Containers 10 5
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 11 StackPanel Orders child elements into a single vertical or horizontal row Preferred for nesting lists of items 12 6
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 13 Command Controls 7
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 15 HyperlinkButton Has NavigateUri property Uses blue as default color for Content text (use Foreground property to change) 16 8
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 18 9
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 20 10
RadioButtons with GroupNames 21 Text Controls 11
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) 23 Read-Only: TextBlock Displays single or mulit-line, read-only text Has many properties; read up! (Run element = text with identical formatting) 24 12
TextBlock Has Built-In Styles 25 Another TextBlock Example 26 13
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 27 RichTextBlock Example #1 28 14
RichTextBlock Example #2 29 Input: TextBox Used mainly for single or multi-line user input / editing, but can also display single or mulitline plain text Set MaxLength prop. to limit user entry Offers IsSpellCheckEnabled property 30 15
ToolTip Displays explanation for associated element Responds to mouse/pen hover or touch and hold 31 Some Remarks About URIs 16
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 33 Organizing Image Resources in 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 34 17
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); 35 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. 36 18
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 19
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 39 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**) 40 20
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 41 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" /> 42 21
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 43 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 44 22
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 45 WebView Control Hosts HTML content within an app Will discuss in more detail later in this course 46 23
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 48 24
ListBox Control / Element Shows all items in list (scrollable) Can support multiple selection with SelectMode property (single is default) Has SelectedItem, SelectedItems properties for user pick(s) Xmlns:sysincludes System namespace for just this ListBox XAML namespace (x:) Double data type Sys: now makes specific calls Note Button invisible when focus moves 49 Data Controls (Data controls are a type of container) 25
ListBox Control Displays a list of selectable text items Populate by Adding to the control s Items collection 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 52 26
Populating a ListView sitems Collection (when you have a few items that are static) Writing inline code (in XAML or C#) 53 Populating a ListView sitems Collection (from a db or Internet source) We will start covering this later. 54 27
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 55 GridView Control / Element Offers for display Default grid view Large tile view Grouped grid view Variable-sized gird view (complicated!) Highly customizable 56 28
Use Third-Party Controls or Add-Ins With Caution Costs to you Costs to client Costs to user Reliability, strength of supplier 57 ITDS Logo / Mood Slide 58 29