BCIS 4650 Visual Programming for Business Applications

1. BCIS 4650 Visual Programming for Business Applications More XAML Controls The University of North Texas, ITDS Dept., Dr. Vedder

2. 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

3. Use Third-Party Controls or Add-InsWith Caution • Costs to you • Costs to client • Costs to user • Reliability, strength of supplier The University of North Texas, ITDS Dept., Dr. Vedder

4. Some RemarksAbout URIs

5. Uniform Resource Identifier (URI)used to identify and load … • Startup UI • Images • Pages • Data files • Code assemblies • Many other types of files The University of North Texas, ITDS Dept., Dr. Vedder

6. Packaging 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 scheme used The University of North Texas, ITDS Dept., Dr. Vedder

7. The PackagingSchemes Used • 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 The University of North Texas, ITDS Dept., Dr. Vedder

8. Image Controls

9. Graphics Terminology • “Decoding” – translating image format to image data that can be used by the OS; codec used is automatic as default The University of North Texas, ITDS Dept., Dr. Vedder

10. Three Ways to Display an Image • Use the Image element / control • Paint an image on another object(s) using an ImageBrush • Draw an image using an ImageDrawing The University of North Texas, ITDS Dept., Dr. Vedder

11. Image Element / Control • Displays contents of a graphics file; supports a variety of bitmap formats • 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 The University of North Texas, ITDS Dept., Dr. Vedder

12. Image Formats Supported(NOTE: all bitmap formats) • BMP • GIF • ICO • JPEG • JPEG XR (‘eXtended Range’) .jxr • PNG • TIF/TIFF The University of North Texas, ITDS Dept., Dr. Vedder

13. What About Vector Graphics?Ex., SVG (Scalable Vector Graphics) files • Could use for AppBar icons, for example • Convert SVG to XAML? Can be done, but a lot of work • Convert SVG to a bitmap? Use Photoshop, freeware Inkscape, etc. The University of North Texas, ITDS Dept., Dr. Vedder

14. The Source Attribute • Must set to a URI either in XAML or in C# • Give full path (Windows OS requirement) • XAML: <Image Width=“200” Source= "C:\Documents and Settings\All Users\Documents\ My Pictures\Water Lilies.jpg"/> • XAML: <ImageSource="http://AnyWebsite .com/example.png" /> • Avoid using relative/partial URI <Image Source="Assets/image1.jpg"/> <ImageSource="ms-appx:///Assets/image1.jpg"/> The University of North Texas, ITDS Dept., Dr. Vedder

16. Image.Source Property • Use in C# • Includes ImageFailed event for EH • Is more memory efficient • Requires BitmapImage class set to an URI • aa The University of North Texas, ITDS Dept., Dr. Vedder

17. Sample Loaded Event C# Code voidFoodImage_Loaded(object sender, RoutedEventArgs e){ Image img = sender as Image; // sender = element firing this eventBitmapImage _myImage = newBitmapImage();img.Width = _myImage.DecodePixelWidth = 80; //natural px width of image source// don't need to set Height, system maintains aspect ratio, and calculates the other// dimension, so long as one dimension measurement is provided _myImage.UriSource = new Uri(img.BaseUri,"Images/myfoodimage.png");} • Note instantiation & initialization on 1 line • BaseUri property holds correct scheme The University of North Texas, ITDS Dept., Dr. Vedder

18. All Resource Files in Your App … • Must have their BuildAction property set to ‘Content’ • If not, they will not be included in your app package • Select in Solution Explorer, check Properties Window The University of North Texas, ITDS Dept., Dr. Vedder

19. Selection Controls

20. Recall from Last Week… • CheckBox • ListBox • Toggle The University of North Texas, ITDS Dept., Dr. Vedder

21. ListBox • Shows all items in list (scrollable) • Has Header property for a title • Supports multiple selection with SelectMode property (single is default) • Has SelectedItem, SelectedItems props. Note button invisible when focus moves The University of North Texas, ITDS Dept., Dr. Vedder

22. ComboBox • Shows only 1 item; space efficient • Uses SelectedItem property only The University of North Texas, ITDS Dept., Dr. Vedder

23. DatePicker • Allows user to select a full date, or just a day, month, or year • Is highly customizable and very powerful • <DatePickerHeader=“Choose a Date”/> The University of North Texas, ITDS Dept., Dr. Vedder

24. TimePicker • Allows user to select a time • Offers 12- or 24-hour clocks • Can set minute increments (ex., 20-min. appointments)

25. Slider • Allows user to select from a range of values by moving a ‘thumb’ (white sq.) • Has default range of 0 to 100 • Uses ToolTip to show current value The University of North Texas, ITDS Dept., Dr. Vedder

26. Data Controls(a type of container)

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

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

29. ListView • Shows user a list of items that user can scroll through vertically • Is best suited for short lists, since most desktops and tablets are used in landscape orientation The University of North Texas, ITDS Dept., Dr. Vedder

30. Single ListViewExamplealso note supplied scroll bar The University of North Texas, ITDS Dept., Dr. Vedder

31. GridView • Shows user a collection of items organized into rows and columns • Scrolling by user is horizontal • Positions contents automatically to consume screen space • Offers for display • Default grid view • Large tile view • Grouped grid view • Variable-sized gird view (complicated!) The University of North Texas, ITDS Dept., Dr. Vedder

32. Default GridView Example The University of North Texas, ITDS Dept., Dr. Vedder

33. Tall Tiles (1 row of rectangles) The University of North Texas, ITDS Dept., Dr. Vedder

34. Grouping in GridViewgood for promoting user scanning behavior The University of North Texas, ITDS Dept., Dr. Vedder

35. FlipView • Offers user a collection of items that user can swipe through horizontally • Shows only 1 item at a time The University of North Texas, ITDS Dept., Dr. Vedder

36. FlipView Example The University of North Texas, ITDS Dept., Dr. Vedder

37. Semantic Zoom • Allows user to switch between a grouped view and a specific view of a collection • Is not an optical zoom (Win key & + or -) • Zoom In: default; zoomed-out shows groupings • Zoom Out: Pinch-in; CTRL & -; mouse click (lower right corner, if visible) to zoom out (Win 8 Start Screen is good for practice) The University of North Texas, ITDS Dept., Dr. Vedder

38. Semantic Zoom Example The University of North Texas, ITDS Dept., Dr. Vedder

39. Other Controls

40. SearchBox(Win 8.1 only) • Replaces using the Search charm • Need to plan for how user moves focus • Offers FocusOnKeyboardEvent property (T/F); PrepareForFocusOnKeyboard event; QuerySubmitted event • Read Guidelines for Search: http://msdn.microsoft.com/en-us/library/ windows/apps/hh465233.aspx The University of North Texas, ITDS Dept., Dr. Vedder

41. ProgressBar and ProgressRing • Ring is indeterminate; set IsActive property to false when not visible • Bar can be indeterminate or determinate; default range is 0 - 100 The University of North Texas, ITDS Dept., Dr. Vedder

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