1. Basic Controls and Plugins
Microsoft Virtual Academy
Header
Mastering Xamarin Forms Development, Part 2
Basic Controls and Plugins
Scott J. Peterson
Produced by

2. Xamarin Forms Controls and plugins
Unlike code “interpreters”, Xamarin Forms understands and renders native controls for each target platform. When apps use shared code, the Xamarin Forms engine creates platform specific applications that consume the shared code, and then maps controls to platform-specific native user interface elements at runtime, resulting in pure native experiences.

3. Agenda In this session Basic UI concepts Control groups View controls
Cell controls
Demo: Using View and Cell controls
ListView controls
TableView controls
Demo: Using ListView and TableView controls
Plugin concepts
Demo: Integrating Plugins
Next steps

4. Basic UI Concepts Cross platform magic
Xamarin Forms apps are not just interpreted code, but instead use native APIs, user interface controls, and native compliers, including platform-specific hardware acceleration.

5. Control Groups Everything is a control
There are four main control groups used to create the user interface of a Xamarin Forms application. Each “control” will be mapped and rendered to its native equivalent.
Pages, Layouts
Views: Visual objects such as buttons, labels or text entry boxes
Cells: Specialized element used for items in a table and describes how each item in a list should be drawn

6. View Controls What’s in a name?
Views are the building blocks of cross-platform mobile user interfaces. In Xamarin Forms, the term View refers to visual objects such as buttons, labels or text entry boxes. These are sometimes referred to as widgets on other platforms.

7. View Controls Everything is simplified
For cross-platform compatibility, some control concepts are unsupported, however most user experiences leverage the following:
View type
Windows Control type
Activity Indicator, Progress Bar
Progress Bar, Progress Ring
Label, Entry, Editor
Text Block, Text Box
Image
Picker, Date Picker, Time Picker
Combo Box, Date Picker, Time Picker
Slider
Stepper
No equivalent
Switch
Toggle Button/Toggle Switch
Box View
Border, Rectangle
List View, Table View
List View, List Box
Web View
Button

8. Cell Controls Not what it seems
Although a Cell derives from Element, (which derives from Visual Element) a Cell is not a visual element, it just describes a template for creating a visual element, and are designed to facilitate rich content inclusion in tables and lists.

9. Cell Controls Standardized rendering
In Xamarin Forms, Cells are elements designed to be added to List View or Table View controls.
Cell Control type
Description
Entry Cell
A Cell with a label and a single line text entry field
Switch Cell
A Cell with a label and an on/off switch
Text Cell
A Cell with primary and secondary text
Image Cell
A Text Cell that also includes an image
View Cell
A Cell with loose control requirements
(Often referred to as a “Custom” Cell)

10. WintellectNOW
6/11/2018 8:16 AM
Demo
Using View and Cell Controls

11. ListView Controls Controlled lists
In Xamarin Forms, a List View is a view for displaying lists of data, especially long lists that require scrolling. Since only one “type” of cell can be used in a List View, it’s designed to be used with homogeneous data, meaning all data should be of the same type, typically from an enumerable collection.

12. TableView Controls Freeform lists
In Xamarin Forms, a Table View is a type of view for displaying (optionally) scrollable lists of data or choices where there are rows that don't share the same template. A Table View does not have any concept of an Items Source. Table View items must be added as manually.

13. Demo Using ListView and TableView Controls WintellectNOW
6/11/2018 8:16 AM
Demo
Using ListView and TableView Controls

14. Plugin Concepts Shareable reusability
Xamarin Forms Plugins are simply libraries that expose a single set of APIs for accessing common mobile device functionality across supported platforms, increasing the amount of shared code, and simplifying implementation and integration.

15. Plugin Concepts It’s all about the packaging
Component Manager
NuGet Package Manager
Redistributable assemblies

16. WintellectNOW
6/11/2018 8:16 AM
Demo
Integrating Plugins

17. Next Steps Create your own controls Create a custom control library
6/11/2018 8:16 AM
Next Steps
Create your own controls
Identify a control you love to use on other platforms, that doesn’t exist in the Xamarin Forms control set, and create it for native rendering on all platforms.
Create a custom control library
Identify a set of business-specific controls that may be helpful in your school or organization and create a custom control library to share with other internal developers.
Create your own Plugin
Identify a helpful feature or some enhanced functionality and expose and package these features as a Xamarin Forms Plugin.

18. Mastering Xamarin Forms Development Basic Controls and Plugins
Scott J. Peterson, MCSD, MCPSB, MCT
Chief Solution Architect