Traditional Xamarin approach creates

non- sharable platform-specific

code for the UI layer
Android iOS Windows
UI UI UI

Shared App Logic

 Xamarin.Forms allows you to
Android iOS Windows
UIdescribeUI the UI UI
once

using a shared set of Shared UI Code

controls
Sharedwhile still rendering a native UI
App Logic
Shared App Logic
Xamarin.Forms is a cross-platform UI Standard
Controls
Flexible
Layout
Maps
framework to create mobiles app for :
• Android 4.0 +
Custom
• iOS 6.1+ Navigation
Controls
• Windows Phone 8.x (SL)
• Windows Phone 8.1 (RT) Data Styles +
XAML Binding
• Windows 10 (coming soon) Engine
Triggers
Xamarin.Form is not suitable for all
types of apps
• Great for data-driven (forms)
and utility application
• Not ideal if your UI will be
highly customized to platform

Can be used for quick prototyping

even if you do not utilize it for the
final app
Built-in project templates for
Xamarin.Forms applications
available under Cross.Platform
• Blank app to create a new
application
• Class Library to create a PCL
for use with Xamarin.Form
Xamarin Studio on the Mac
supports Android + iOS

Xamarin Studio on Windows

supports only Android

Project wizard lets you select code

sharing technique (PLC vs Shared
Project)
Blank App project template creates several related projects

Platform-specific
projects act as
"host" to create
native application
Portable Class Library used to hold
shared code that defines UI and logic
Most of your code will go into the PCL used for shared logic + UI

Default template creates a

single App.cs file which
decides the initial screen for
the application
Platform specific projects depend on
the shared code (PCL or SAP), but not depends on

the other way around

Shared
Xamarin.Forms defines the UI and Code
behavior in the PLC or SAP (shared)
and then calls it from each platform
specific project depends on
Xamarin.Forms applications have two required components which are
provided by the template

Application Page(s)

Provides initialization for Represents a single

the application screen to display
Application class provides a
singleton which manages :
• Lifecycle methods
• Modal navigations notifications
• Currently displayed page
• Application state persistence

New project will have a derived

implementation named App
Application class provides lifecycle methods which can be used to manage
persistence and refresh your data
Application class provides lifecycle methods which can be used to
manage persistence and refresh your data
Application class provides lifecycle methods which can be used to manage
persistence and refresh your data
Application class also includes a string >> object property bag which is
persisted between app launches
Application UI is defined in terms of pages and views

Page represents a single

screen displayed in the app
Views are the UI Name:

controls the user

interacts with OK
Page is an abstract class used to define a single screen of content derived
types provide specific visualization/behavior

Displays a single
piece of content
(visual thing)

Content
Page is an abstract class used to define a single screen of content. Derived
types provide specific visualization/ behavior

Manages two
panes of
information

Content Master Detail

Page is an abstract class used to define a single screen of content. Derived
types provide specific visualization/ behavior

Manages a stack
of pages with
navigation bar

Content Master Detail Navigation

Page is an abstract class used to define a single screen of content. Derived
types provide specific visualization/ behavior

Page that
navigates
between children
using tab bar

Content Master Detail Navigation Tabbed

Page is an abstract class used to define a single screen of content. Derived
types provide specific visualization/ behavior

Page allowing
swipe gestures to
switch between Page that
children navigates
between children
using tab bar
Content Master Detail Navigation Tabbed Carousel
View is the base class for all visual controls, most standard controls are
presents

Label Image SearchBar

Entry ProgressBar ActivityIndicator
Button Slider OpenGLView
Editor Stepper WebView
DatePicker Switch ListView
BoxView TimePicker
Frame Picker
Platform defines a renderer for each view that creates a native
representation of the UI

UI uses a Xamarin.Forms Button

Android.Widget.Button
Button button = new Button {
Text = "Click Me!"
};
UIButton

Platform Renderer takes view and

turns it into platform-specific control System.Windows.Button
Views utilize properties to adjust visual behavior
Entry numEntry = new Entry {
Placeholder = "Enter Number",
Keyboard = Keyboard.Numeric
};

Button callButton = new Button {

Text = "Call",
BackgroundColor = Color.Blue,
TextColor = Color.White
};
Controls use events to provide interaction behavior, should be very familiar
model for most .NET developers

Entry numEntry = new Entry { ... };

numEntry.TextChanged += OnTextChanged;
...

void OnTextChanged (object sender, string newValue)

{
...
}
Rather than specifying positions with
coordinates (pixels, dips, etc), you use
layout containers to control how view
are positioned relative to each other,
this provides for a more adaptive layout
which is not as sensitive dimensions and
resolutions

For example, "stacking" views on top of each

other with some spacing between them
Layout containers organize child elements based on specific rules

StackLayout places children

top-to-bottom (default) or left-to-
right based on Orientation
property setting

StackLayout
Layout containers organize child elements based on specific rules

StackLayout places children

(default) or left-to- places children
top-to-bottom AbsoluteLayout
right based oninOrientation
absolute requested positions
propertybased on anchors and bounds
setting

StackLayout AbsoluteLayout
Layout containers organize child elements based on specific rules

StackLayout places children RelativeLayout

top-to-bottom (default) or left-to- uses children
AbsoluteLayout places
constraints to
in absolute
right based on Orientation requested positions
position the children
based on
property setting anchors and bounds

StackLayout AbsoluteLayout Relative

Layout
Layout containers organize child elements based on specific rules

StackLayout places children RelativeLayout

places children in
top-to-bottom (default) or left-to- uses children
GridAbsoluteLayout places
defined rows and constraints to
in absolute
right based on Orientation requested positions
columns position the children
based on
property setting anchors and bounds

StackLayout AbsoluteLayout Relative Grid

Layout
Layout containers organize child elements based on specific rules

StackLayout places children ScrollView scrolls a

RelativeLayout
top-to-bottom (default) or left-to-
AbsoluteLayout places children
singleuses
piececonstraints
of content to
in absolute requested
right based on Orientation (which positions
position the children
is normally a
based on
property setting anchors and bounds
layout container)

StackLayout AbsoluteLayout Relative Grid ScrollView

Layout
Layout containers have a Children collection property which is used to hold
the views that will be organized by the container

Label label = new Label { Text = "Enter Your Name" };

Entry nameEntry = new Entry();

StackLayout layout = new StackLayout();

layout.Children.Add(label);
layout.Children.Add(nameEntry) ;

this.Content = layout;

Views are laid out and rendered in the order they appear in the collection
 Padding

Layout use the CSS Box Model Container / Content

Height
Content
Content may itself be a container

Use WidthRequest and Spacing

Content

HeightRequest to override the

Width

measured size Content