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

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.

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

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.

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

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.

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

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.

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)

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

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.

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.

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

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.

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

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

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.

Mastering Xamarin Forms Development Basic Controls and Plugins Scott J. Peterson, MCSD, MCPSB, MCT Chief Solution Architect scott@liquiddaffodil.com