SlideShare a Scribd company logo
https://goo.gl/Pg7x9q
Xamarin.Forms a different
approach to cross-platform
native mobile development
https://goo.gl/Pg7x9q
1. Create asingle screen cross-
platform application
2. Arrange the UIusing Layouts
3. Useplatform-specific features in
shared code
Objectives
Create a single screen
cross-platform application
❖ Traditional vs. Xamarin.Forms
❖ Xamarin.Forms project structure
❖ Application Components
❖ "Hello, Forms!"
Tasks
❖ Traditional Xamarin approach allows for shared business logic and non-
sharable platform-specific code for the UI layer
Xamarin.iOS and Xamarin.Android
iOS
C# UI
Window
s C#
UI
Android
C# UI
Shared C# business logic
Xamarin.iOS and Xamarin.Android
❖ Xamarin.Forms allows you to describe the UIonce using ashared set of
elements which create a native UIat runtime
Xamarin.Forms
iOS
C# UI
Window
s C#
UI
Android
C# UI
Shared C# business logic
Shared C# UI
Shared C# business logic
Xamarin.iOS and Xamarin.Android Xamarin.Forms
❖ Xamarin.Forms isa cross-
platform UIframework to
create mobile apps for:
▪ Android 4.0+
▪ iOS 8.0+
▪ Windows 10
What is Xamarin.Forms?
Flexible
Layout
Standard
Controls
Custom
Controls
Data
Binding
Engine
XAML
Navigation
Styles +
Triggers
Maps
Xamarin.Forms platform support
Shared C# UI
Shared C# logic
❖ Xamarin.Forms supports abroad selection of mobile and desktop
platforms and UI frameworks
iOS mac
❖ Visual Studio for Windows includes built-in project templates for
Xamarin.Forms applications
Creating a Xamarin.Forms App [Windows]
Available under
Cross-Platform
❖ Visual Studio for Mac includes built-in project templates for
Xamarin.Forms applications
Creating a Xamarin.Forms App [Mac]
After selecting
your template,
a project wizard
walks through
the available
options
Project Structure
❖ The Xamarin CrossPlatform App project template creates several
related projects
Platform-specific
projects act as
"host" to create
native application
PCLor SAPused
to hold shared
code that defines
UIand logic
❖ Most of your code will go into the PCLused for shared logic + UI
Project Structure - PCL
Default template creates
anApp classwhich
decides the initial screen
for the application
❖ Platform-specific projects usethe
shared code (PCLor SAP),but not
the other way around
❖ Xamarin.Forms defines the UIand
behavior in the PCLor SAP(shared)
and then calls it from each
platform-specific project
Project Structure - Dependencies
Shared
Code
iOS
project
Android
project
Windows
project
❖ Should update Xamarin.Forms Nuget package when starting anew project
Xamarin.Forms updates [Windows]
❖ Should update Xamarin.Forms Nuget package when starting anew project
Xamarin.Forms updates [Mac]
Creating aXamarin.Forms application
Demonstration
❖ Xamarin.Forms applications have two required components which are
provided by the template
Xamarin.Forms app anatomy
Application Page(s)
Provides initialization for
the application
Represents a single
screen to display
Xamarin.Forms Application
❖ Applicationclassprovides a
singleton which manages:
▪ Lifecycle methods
▪ Modal navigation notifications
▪ Currently displayed page
▪ Application state persistence
❖ New projects will have a derived
implementation named App
Note: Windows apps also have an Application class,make sure not to confuse them!
❖ Application classprovides lifecycle methods which can be
used to manage persistence and refresh your data
Xamarin.Forms Application
public classApp :Application
{ ...
protected override void OnStart() {} protected
override void OnSleep() {} protected override void
OnResume() {}
}
UseOnStart to initialize
and/or reload your app's data
UseOnSleep tosavechanges
or persist information
UseOnResumeto refresh
your displayed data
❖ Application classalso includes astring object
property bag which ispersisted between app launches
Persisting information
// Save off username in globalpropertybag
Application.Current.Properties["username"] = username.Text;
// Restore the username before it is displayed
if (Application.Current.Properties.ContainsKey("username")) {
var uname =Application.Current.Properties["username"]as string
?? "";
username.Text= uname;
}
❖ Application UIisdefined in terms of pagesandviews
Creating the application UI
Pagerepresents a single
screen displayed in the app
OK
Name:Views are the UI
controls the user
interacts with
Pages
Content
❖ Page isan abstract classused to define a single screenof content
▪ derived types provide specific visualization / behavior
Displays a single
piece of content
(visual thing)
❖ Page isan abstract classused to define a single screenof content
▪ derived types provide specific visualization / behavior
Pages
Content Master Detail
Manages two
panes of
information
❖ Page isan abstract classused to define a single screenof content
▪ derived types provide specific visualization / behavior
Pages
Content Master Detail Navigation
Manages a stack
of pages with
navigation bar
❖ Page isan abstract classused to define a single screenof content
▪ derived types provide specific visualization / behavior
Pages
Content Master Detail Navigation Tabbed
Pagethat
navigates
between children
using tab bar
Adding a new ContentPage to aXamarin.Forms application
Demonstration
❖ View isthe base classfor all visual controls, most
standard controls are present
Views
Label Image SearchBar
Entry ProgressBar ActivityIndicator
Button Slider OpenGLView
Editor Stepper WebView
DatePicker Switch ListView
BoxView TimePicker
Frame Picker
❖ Button provides aclickable surface withtext
Views - Button
OK
var okButton = new Button() { Text =
"OK"
};
okButton.Clicked+= OnClick;
void OnClick(object sender, EventArgs e) {
...
}
Views - Label
❖ UseaLabel to display read-only textblocks
Hello, Forms!
var hello = new Label() { Text =
"Hello,Forms!",
HorizontalTextAlignment= TextAlignment.Center, TextColor =
Color.Blue,
FontFamily = "Arial"
};
❖ Usean Entry control if you want the user to provide input with an on-
screen or hardware keyboard
Views - Entry
Hello
var edit = new Entry() { Keyboard =
Keyboard.Text, PlaceholderText= "Enter
Text"
};
❖ Platform defines arenderer for each view that turns each view into the
appropriate platform-specific control
Rendering views
var button= new Button{
Text = "ClickMe!"
};
UIdefined using a Xamarin.Forms Button
Android.Widget.Button
UIKit.UIButton
Windows.UI.Xaml.Controls.Button
Visual adjustments
❖ Views utilize properties to adjust visual appearance and behavior
var numEntry = new Entry { Placeholder =
"Enter Number", Keyboard =
Keyboard.Numeric
};
var callButton = new Button { Text = "Call",
BackgroundColor = Color.Blue,
TextColor = Color.White
};
❖ Controls useevents to provide interaction behavior, should be very
familiar model for most .NET developers
Providing Behavior
var numEntry = new Entry { ... };
numEntry.TextChanged += OnTextChanged;
...
void OnTextChanged (object sender, string newValue)
{
...
}
Youcan usetraditional delegates, anonymous methods, or lambdas to handle events
Creating our first Xamarin.Forms application
Group Exercise
① Xamarin.Forms creates asingle binary that can be deployed to Android,
iOSorWindows
a) True
b) False
Flash Quiz
① Xamarin.Forms creates asingle binary that can be deployed to Android,
iOSorWindows
a) True
b) False
Flash Quiz
② You must call before using Xamarin.Forms
a) Forms.Initialize
b) Forms.Init
c) Forms.Setup
d) No setup call necessary
Flash Quiz
② You must call before using Xamarin.Forms
a) Forms.Initialize
b) Forms.Init
c) Forms.Setup
d) No setup call necessary
Flash Quiz
③ Tosupply the initial page for the application, you must set the
property.
a) Application.FirstPage
b) Application.PrimaryPage
c) Application.MainPage
d) Application.MainView
Flash Quiz
③ Tosupply the initial page for the application, you must set the
property.
a) Application.FirstPage
b) Application.PrimaryPage
c) Application.MainPage
d) Application.MainView
Flash Quiz
❖ Xamarin.Forms project structure
❖ Application Components
❖ "Hello, Forms!"
Summary
❖ Layout containers
❖ Adding views
❖ Fine-tuning layout
Tasks
Organizing content
❖ Rather than specifying positions
with coordinates (pixels, dips, etc.),
you uselayout containers to
control how views are positioned
relative to each other
❖ This provides for a more adaptive
layout which is not as sensitive to
dimensions and resolutions
For example, "stacking" views on top of each
other with some spacing between them
Layout containers
StackLayout
❖ Layout Containers organize child elements based on specific rules
StackLayoutplaces children
top-to-bottom (default) or left-to-
right based on Orientation
property setting
❖ Layout Containers organize child elements based on specific rules
Layout containers
StackLayout AbsoluteLayout
AbsoluteLayoutplaces children in
absolute requested positions
based on anchors and bounds
❖ Layout Containers organize child elements based on specific rules
Layout containers
StackLayout Absolute
Layout
Relative
Layout
RelativeLayout uses
constraints to
position the children
❖ Layout Containers organize child elements based on specific rules
Layout containers
StackLayout Absolute
Layout
Relative
Layout
Grid
Grid places
children in defined
rows and columns
Layout containers
StackLayout Absolute
Layout
Relative
Layout
Grid ScrollView
❖ Layout Containers organize child elements based on specific rules
ScrollViewscrolls a
single piece of content
(which isnormally a
layout container)
Adding views to layout containers
❖ Layout containers have aChildren collection property which isused to
hold the views that will be organized by the container
Label label = new Label { Text = "EnterYour 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
❖ StackLayout isused to create typical form stylelayout
Working with StackLayout
…. Entry …
Label
Button
Entry
"stacks"the child views top-to-bottom
(vertical) [default]
…or left-to-right (horizontal)
The Orientationproperty can be set to either Horizontalor Verticalto control which
direction the child views are stacked in
Working with StackLayout
❖ StackLayout isused to create typical form style layout,Orientation
property decides the direction that children are stacked
var layout = new StackLayout { Orientation =
StackOrientation.Vertical
};
layout.Children.Add(new Label { Text = "Enter your name:" });
layout.Children.Add(new Entry());
layout.Children.Add(new Button { Text = "OK" });
❖ Grid isalayout panel used to create rows and columns of views,
children identify specific column, row and span
Working with Grid
Column 0 Column 1
Column = 0, Row = 0,
Column = 1, Row= 0
Row Span= 2
Column = 1, Row= 1
Column = 0, Row= 2, Column Span = 2
Row 0
Row 1
Row 2
Adding items to a Grid
❖ Children in Grid must specify the layout properties, or they will default
to the first column/row
Label label = new Label { Text = "EnterYour Name" };
Grid layout = new Grid();
layout.Children.Add(label);
Grid.SetColumn(label,1);
Grid.SetRow(label, 1);
Grid.SetColumnSpan(label,2);
Grid.SetRowSpan(label, 1);
Usestatic methods
defined on Gridto set
layout properties
Adding items to a Grid
❖ Children in Grid must specify the layout properties, or they will default
to the first column/row
Grid layout = new Grid();
...
layout.Children.Add(label, 0, 1);
layout.Children.Add(button, 0, 2, 2,3);
// Left=0andTop=1
// L=0, R=2,T=2,B=3
Can also specify row/column asLeft/Right/Top/Bottom values to Addmethod
Controlling the shape of the grid
❖ Can influence the determined shape and size of the columns and rows
Grid layout = new Grid();
layout.RowDefinitions.Add(new RowDefinition {
Height = new GridLength(100, GridUnitType.Absolute)// 100px
});
layout.RowDefinitions.Add(new RowDefinition {
Height = new GridLength(1, GridUnitType.Auto)// "Auto" size
});
layout.ColumnDefinitions.Add(newColumnDefinition {
Width = new GridLength(1, GridUnitType.Star) // "Star"size
});
Working with RelativeLayout
❖ RelativeLayout allows you to position child views relative totwo
other views, or to the panel itself using constraint-based rules
var layout = new RelativeLayout();
...
layout.Children.Add(label,
Constraint.RelativeToParent(
parent => (0.5 * parent.Width) - 25), //X
Constraint.RelativeToView(button,
(parent, sibling)=> sibling.Y + 5), // Y
Constraint.Constant(50), // Width
Constraint.Constant(50)); // Height
Working with AbsoluteLayout
❖ AbsoluteLayout positions and sizeschildren by absolute values through
either a coordinate (where the view determines it's own size), or a
bounding box
var layout = newAbsoluteLayout();
...
// Can do absolute positions by coordinate point
layout.Children.Add(label1, new Point(100, 100));
// Or use a specific bounding box layout.Children.Add(label2, new Rectangle(20, 20,
100, 25));
❖ AbsoluteLayout can also position and size children proportional to its
own size using coordinates based on a 1x1unit square which represents
apercentage of the container's size
Working with AbsoluteLayout
(0,0)
(0.5,0.5)
(1,1)
(1,0)
(0,1)
Working with AbsoluteLayout
❖ AbsoluteLayout can also position and size children proportional to its
own size using coordinates based on a 1x1 unit square which represents
apercentage of the container's size
var layout = newAbsoluteLayout();
...
// Center at the bottom of the container, take up ½ the space
layout.Children.Add(bottomLabel,new Rectangle (.5, 1, .5, .1),
AbsoluteLayoutFlags.All);
Here we center the label (.5) at the bottom of the container (1)
and take up ½ the space (.5) width and 1/10the space height (.1)
Working with AbsoluteLayout
❖ AbsoluteLayout can also position and size children proportional to its
own size using coordinates based on a 1x1 unit square which represents
apercentage of the container's size
var layout = newAbsoluteLayout();
...
// Stretch image across entire container layout.Children.Add(fillImage,new
Rectangle (0, 0, 1, 1),
AbsoluteLayoutFlags.All);
Here we "fill" the container with an image
[0,0] – [1,1]
❖ Canuseeither Add method, or specific static methods to control the
bounding box and layout flags for children in AbsoluteLayout –this
allows for "runtime" adjustments
Fine-tuning AbsoluteLayout
Label bottomLabel;
void MoveLabelToTopRight(objectsender, EventArgs e)
{
AbsoluteLayout.SetLayoutBounds(bottomLabel,
new Rectangle (1, 0, .5, .1));
AbsoluteLayout.SetLayoutFlags (bottomLabel,
AbsoluteLayoutFlags.All);
}
❖ UseWidthRequest and HeightRequestto askthe layout panel for a
specific size for your views
Element size
Button
var button = new Button();
button.WidthRequest =300;
button.HeightRequest=150;
❖ Margin adds distance from an view to
adjacent views within a managed layout
View Margin
Label
Button
Overloaded constructors give you
several options, including the ability
to set a separate value on each side
Label label = ... Button
button =...
label.Margin = newThickness(10);
button.Margin= new Thickness(10,20);
❖ Padding adds distance between the
inside edges of a layout container and
its children (only available in layouts)
Layout Padding
View
View
View
Grid grid = ...;
grid.Padding = newThickness(10);
❖ The Spacingproperty of StackLayoutand
controls the distance between child elements
StackLayout Spacing
View
View
View
Stack Layout
StackLayout panel = ...;
panel.Spacing = 20;
Spacing
Creating Xamarin.Forms Phoneword
Individual Exercise
① The direction (left-to-right or top-to-bottom) a StackLayout
organizes content iscontrolled by which property?
a) Style
b) Direction
c) Orientation
d) LayoutDirection
Flash Quiz
① The direction (left-to-right or top-to-bottom) a StackLayout
organizes content iscontrolled by which property?
a) Style
b) Direction
c) Orientation
d) LayoutDirection
Flash Quiz
② Which of these controls isnot available in Xamarin.Forms?
a) Button
b) DatePicker
c) ListBox
d) ListView
Flash Quiz
② Which of these controls isnot available in Xamarin.Forms?
a) Button
b) DatePicker
c) ListBox
d) ListView
Flash Quiz
③ Toadjust spacing between children when using the StackLayout
container we can change the property on the stack layout.
a) Margin
b) Padding
c) Spacing
Flash Quiz
③ Toadjust spacing between children when using the StackLayout
container we can change the property on the stack layout.
a) Margin
b) Padding
c) Spacing
Flash Quiz
❖ Layout containers
❖ Adding views
❖ Fine-tuning layout
Summary
Useplatform-specificfeatures
in shared code
❖ Changing the UI per-platform
❖ Using Platform features
❖ Working with DependencyService
Tasks
❖ Xamarin.Forms applications have two projects that work together to
provide the logic + UIfor each executable
Recall: Xamarin.Forms architecture
Portable
Class Library
Platform-
SpecPifliactfporromje-ct
SpecPifliactfporromje-ct
Specific project
▪ shared acrossall platforms
▪ limited access to .NETAPIs
▪ want most of our code here
▪ 1-per platform
▪ code isnot shared
▪ full accessto .NETAPIs
▪ any platform-specific code must
be located in these projects
❖ Device.RuntimePlatformallows your
app to determine the executing
platform
Changing the UI per-platform
switch(Device.RuntimePlatform)
{
case Device.iOS:
...
break;
case Device.Android:
...
break;
case Device.UWP:
...
break;
case Device.macOS:
...
break;
}
❖ Canusethe static Device classto identify the device style
Detecting the platform
if (Device.Idiom==TargetIdiom.Tablet) {
// Code for tablets only
if (Device.RuntimePlatform== Device.iOS) {
// Code for iPad only
}
}
Note that this does not allow for platform-specific codeto be executed, it allows runtime
detection of the platform to execute a unique branch in your shared code
❖ Xamarin.Forms hassupport for dealing with afew, very common
platform-specific features
Using Platform Features
Page.DisplayAlert to
show simple alert
messages
Timer
management using
Device.StartTimer
Device.OpenUri
to launch external apps
based on a URL
scheme
❖ Xamarin.Forms hassupport for dealing with afew, very common
platform-specific features
Using Platform Features
UIThread
marshaling with
Device.BeginInvoke
OnMainThread
Mapping and Location
through
Xamarin.Forms.Maps
Other platform-specific features
❖ Platform features not exposed by
Xamarin.Forms can be used, but will
require some architectural design
▪ code goes into platform-specific
projects
▪ often must (somehow) use code
from your shared logic project
Dialing the phone
would require
platform-specific code
❖ Bestpractice to build an abstraction implemented by the target platform
which defines the platform-specific functionality
Creating abstractions
PhoneDialerIOS
PhoneDialerDroid
PhoneDialerWin
Platform projects implement the
shared dialer interface using the
platform-specific APIs
Shared code defines IDialerinterface to
represent required functionality
publicinterfaceIDialer
{
bool MakeCall(string number);
}
❖ Xamarin.Forms includes a servicelocator called DependencyService
which can be used to register platform-specific implementations and
then locate them through the abstraction in your shared code
Locating dependencies
1
Define an interface or abstract classin the
shared code project (PCL)
public interface IDialer
{
bool MakeCall(string number);
}
❖ Xamarin.Forms includes a servicelocator called DependencyService
which can be used to register platform-specific implementations and
then locate them through the abstraction in your shared code
Locating dependencies
2
Provide implementation of abstraction in
each platform-specific project
class PhoneDialerIOS : IDialer
{
public bool MakeCall(stringnumber) {
// Implementation goes here
}
}
❖ Xamarin.Forms includes a servicelocator called DependencyService
which can be used to register platform-specific implementations and
then locate them through the abstraction in your shared code
Locating dependencies
3
Exposeplatform-specific implementation using assembly-
level attribute in platform-specific project
[assembly: Dependency(typeof(PhoneDialerIOS))]
Implementation type issupplied to
attribute aspart of registration
❖ Xamarin.Forms includes a servicelocator called DependencyService
which can be used to register platform-specific implementations and
then locate them through the abstraction in your shared code
Locating dependencies
4
Retrieve and usethe dependency anywhere using
DependencyService.Get<T>(bothshared and platform
specific projects can usethis API)
IDialer dialer =DependencyService.Get<IDialer>();
if (dialer != null) {
...
}
Request the abstraction and the
implementation will be returned
Adding support for dialing the phone
Individual Exercise
❖ Changing the UI per-platform
❖ Using Platform features
❖ Working with DependencyService
Summary
Thank You!

More Related Content

What's hot (15)

PDF
Salesforce Developer Garage Seattle: Force.com Canvas
Salesforce Developers
 
PDF
18 Invaluable Lessons About ADF-JSF Interaction
Steven Davelaar
 
PDF
Intro to Force.com Canvas: Running External Apps within the Salesforce UI Web...
Salesforce Developers
 
PPTX
Windows Presentation Foundation
Deepika Chaudhary
 
PPSX
10 asp.net session14
Vivek Singh Chandel
 
PPTX
Force.com Canvas - a Quick Introduction
Steven Herod
 
PPTX
Xamarin Dev Days Madrid 2017 - Xamarin.Forms
Javier Suárez Ruiz
 
PDF
Customizing Xamarin.Forms UI
Xamarin
 
PDF
Dive Deep Into the Force.com Canvas Framework
Salesforce Developers
 
PPTX
SilverlightCh01
Bill Hatfield
 
PDF
Twelve ways to make your apps suck less
Fons Sonnemans
 
PPTX
Developing and Deploying Windows 10 Apps
Fons Sonnemans
 
PPTX
WPF For Beginners - Learn in 3 days
Udaya Kumar
 
PPTX
Bulk Profile Operations in Salesforce using BOFC App
Atocloud
 
PPTX
Customizing the Presentation Model and Physical Renderer in Siebel Open UI
Tech OneStop
 
Salesforce Developer Garage Seattle: Force.com Canvas
Salesforce Developers
 
18 Invaluable Lessons About ADF-JSF Interaction
Steven Davelaar
 
Intro to Force.com Canvas: Running External Apps within the Salesforce UI Web...
Salesforce Developers
 
Windows Presentation Foundation
Deepika Chaudhary
 
10 asp.net session14
Vivek Singh Chandel
 
Force.com Canvas - a Quick Introduction
Steven Herod
 
Xamarin Dev Days Madrid 2017 - Xamarin.Forms
Javier Suárez Ruiz
 
Customizing Xamarin.Forms UI
Xamarin
 
Dive Deep Into the Force.com Canvas Framework
Salesforce Developers
 
SilverlightCh01
Bill Hatfield
 
Twelve ways to make your apps suck less
Fons Sonnemans
 
Developing and Deploying Windows 10 Apps
Fons Sonnemans
 
WPF For Beginners - Learn in 3 days
Udaya Kumar
 
Bulk Profile Operations in Salesforce using BOFC App
Atocloud
 
Customizing the Presentation Model and Physical Renderer in Siebel Open UI
Tech OneStop
 

Similar to Xamarin.Forms a different approach to cross platform natove mobile development (20)

PDF
Your First Xamarin.Forms App
Craig Dunn
 
PPTX
Cross platform mobile app development with Xamarin
Pranav Ainavolu
 
PPTX
App innovationcircles xamarin
Mohit Chhabra
 
PDF
Building Accessible Apps using NET MAUI.pdf
SivarajAmbat1
 
PDF
Xamarin.Forms Hands On Lab (Begineer)
Cheah Eng Soon
 
PPSX
11 asp.net session16
Vivek Singh Chandel
 
PPTX
pebble - Building apps on pebble
Aniruddha Chakrabarti
 
DOCX
unit 4.docx
Sadhana Sreekanth
 
PDF
Xamarin forms from zero to hero
Charlin Agramonte
 
KEY
Introduction to Palm's Mojo SDK
Brendan Lim
 
PDF
Introduction to Xamarin.Forms
Brad Pillow
 
PPTX
DEVICE CHANNELS
Assaf Biton
 
PPTX
Building xamarin.forms apps with prism and mvvm
Mike Melusky
 
PPTX
Intro to appcelerator
Mohab El-Shishtawy
 
PPT
Btb017 David
Rohit Ray
 
PPTX
Xamarin Development
Alper Ebicoglu
 
PDF
ASP.NET Interview Questions PDF By ScholarHat
Scholarhat
 
PPTX
First Steps in Android Development with Eclipse and Xamarin
Sasha Goldshtein
 
PDF
APAC Webinar: Say Hello To Xamarin.Forms
Nish Anil
 
PPTX
Introduction to Xamarin
Vinicius Quaiato
 
Your First Xamarin.Forms App
Craig Dunn
 
Cross platform mobile app development with Xamarin
Pranav Ainavolu
 
App innovationcircles xamarin
Mohit Chhabra
 
Building Accessible Apps using NET MAUI.pdf
SivarajAmbat1
 
Xamarin.Forms Hands On Lab (Begineer)
Cheah Eng Soon
 
11 asp.net session16
Vivek Singh Chandel
 
pebble - Building apps on pebble
Aniruddha Chakrabarti
 
unit 4.docx
Sadhana Sreekanth
 
Xamarin forms from zero to hero
Charlin Agramonte
 
Introduction to Palm's Mojo SDK
Brendan Lim
 
Introduction to Xamarin.Forms
Brad Pillow
 
DEVICE CHANNELS
Assaf Biton
 
Building xamarin.forms apps with prism and mvvm
Mike Melusky
 
Intro to appcelerator
Mohab El-Shishtawy
 
Btb017 David
Rohit Ray
 
Xamarin Development
Alper Ebicoglu
 
ASP.NET Interview Questions PDF By ScholarHat
Scholarhat
 
First Steps in Android Development with Eclipse and Xamarin
Sasha Goldshtein
 
APAC Webinar: Say Hello To Xamarin.Forms
Nish Anil
 
Introduction to Xamarin
Vinicius Quaiato
 
Ad

More from Dan Ardelean (20)

PPTX
CI/CD for mobile development using AppCenter
Dan Ardelean
 
PPTX
CI/CD for mobile development using Visual Studio App Center
Dan Ardelean
 
PPTX
Visual Studio App Center: CI/CD para mobile devs
Dan Ardelean
 
PPTX
Desarrollo multiplataforma con el framework .net
Dan Ardelean
 
PPTX
Xamarin.forms a different approach to native cross platform mobile development
Dan Ardelean
 
PPTX
Xamarin - Under the bridge
Dan Ardelean
 
PPTX
Sviluppo x platform con xamarin
Dan Ardelean
 
PDF
Xamarin - why not ?
Dan Ardelean
 
PDF
Share more code on iOS, Android and Windows with Portable Class Libraries
Dan Ardelean
 
PDF
iBeacons for everyone
Dan Ardelean
 
PPTX
Xamarin Dev Days 2016 introduction to xamarin
Dan Ardelean
 
PPTX
A new world of possibilities for contextual awareness with beacons
Dan Ardelean
 
PPTX
C sharp day 2015 c# patterns- cross-platform
Dan Ardelean
 
PPTX
Utilizzo dei beacon con windows 10
Dan Ardelean
 
PPTX
Develop for Windows 10 (Preview)
Dan Ardelean
 
PPTX
Community Days 2015 Introduzione a Xamarin
Dan Ardelean
 
PPTX
Sviluppo di app cross platform con xamarin e C#
Dan Ardelean
 
PPTX
WP04 -Sensori e hardware con Windows Phone 8.1
Dan Ardelean
 
PPTX
Bluetooth LE & Lumia Sensor Core
Dan Ardelean
 
PPTX
Introduction to Xamarin 3
Dan Ardelean
 
CI/CD for mobile development using AppCenter
Dan Ardelean
 
CI/CD for mobile development using Visual Studio App Center
Dan Ardelean
 
Visual Studio App Center: CI/CD para mobile devs
Dan Ardelean
 
Desarrollo multiplataforma con el framework .net
Dan Ardelean
 
Xamarin.forms a different approach to native cross platform mobile development
Dan Ardelean
 
Xamarin - Under the bridge
Dan Ardelean
 
Sviluppo x platform con xamarin
Dan Ardelean
 
Xamarin - why not ?
Dan Ardelean
 
Share more code on iOS, Android and Windows with Portable Class Libraries
Dan Ardelean
 
iBeacons for everyone
Dan Ardelean
 
Xamarin Dev Days 2016 introduction to xamarin
Dan Ardelean
 
A new world of possibilities for contextual awareness with beacons
Dan Ardelean
 
C sharp day 2015 c# patterns- cross-platform
Dan Ardelean
 
Utilizzo dei beacon con windows 10
Dan Ardelean
 
Develop for Windows 10 (Preview)
Dan Ardelean
 
Community Days 2015 Introduzione a Xamarin
Dan Ardelean
 
Sviluppo di app cross platform con xamarin e C#
Dan Ardelean
 
WP04 -Sensori e hardware con Windows Phone 8.1
Dan Ardelean
 
Bluetooth LE & Lumia Sensor Core
Dan Ardelean
 
Introduction to Xamarin 3
Dan Ardelean
 
Ad

Xamarin.Forms a different approach to cross platform natove mobile development

  • 1. https://goo.gl/Pg7x9q Xamarin.Forms a different approach to cross-platform native mobile development https://goo.gl/Pg7x9q
  • 2. 1. Create asingle screen cross- platform application 2. Arrange the UIusing Layouts 3. Useplatform-specific features in shared code Objectives
  • 3. Create a single screen cross-platform application
  • 4. ❖ Traditional vs. Xamarin.Forms ❖ Xamarin.Forms project structure ❖ Application Components ❖ "Hello, Forms!" Tasks
  • 5. ❖ Traditional Xamarin approach allows for shared business logic and non- sharable platform-specific code for the UI layer Xamarin.iOS and Xamarin.Android iOS C# UI Window s C# UI Android C# UI Shared C# business logic Xamarin.iOS and Xamarin.Android
  • 6. ❖ Xamarin.Forms allows you to describe the UIonce using ashared set of elements which create a native UIat runtime Xamarin.Forms iOS C# UI Window s C# UI Android C# UI Shared C# business logic Shared C# UI Shared C# business logic Xamarin.iOS and Xamarin.Android Xamarin.Forms
  • 7. ❖ Xamarin.Forms isa cross- platform UIframework to create mobile apps for: ▪ Android 4.0+ ▪ iOS 8.0+ ▪ Windows 10 What is Xamarin.Forms? Flexible Layout Standard Controls Custom Controls Data Binding Engine XAML Navigation Styles + Triggers Maps
  • 8. Xamarin.Forms platform support Shared C# UI Shared C# logic ❖ Xamarin.Forms supports abroad selection of mobile and desktop platforms and UI frameworks iOS mac
  • 9. ❖ Visual Studio for Windows includes built-in project templates for Xamarin.Forms applications Creating a Xamarin.Forms App [Windows] Available under Cross-Platform
  • 10. ❖ Visual Studio for Mac includes built-in project templates for Xamarin.Forms applications Creating a Xamarin.Forms App [Mac] After selecting your template, a project wizard walks through the available options
  • 11. Project Structure ❖ The Xamarin CrossPlatform App project template creates several related projects Platform-specific projects act as "host" to create native application PCLor SAPused to hold shared code that defines UIand logic
  • 12. ❖ Most of your code will go into the PCLused for shared logic + UI Project Structure - PCL Default template creates anApp classwhich decides the initial screen for the application
  • 13. ❖ Platform-specific projects usethe shared code (PCLor SAP),but not the other way around ❖ Xamarin.Forms defines the UIand behavior in the PCLor SAP(shared) and then calls it from each platform-specific project Project Structure - Dependencies Shared Code iOS project Android project Windows project
  • 14. ❖ Should update Xamarin.Forms Nuget package when starting anew project Xamarin.Forms updates [Windows]
  • 15. ❖ Should update Xamarin.Forms Nuget package when starting anew project Xamarin.Forms updates [Mac]
  • 17. ❖ Xamarin.Forms applications have two required components which are provided by the template Xamarin.Forms app anatomy Application Page(s) Provides initialization for the application Represents a single screen to display
  • 18. Xamarin.Forms Application ❖ Applicationclassprovides a singleton which manages: ▪ Lifecycle methods ▪ Modal navigation notifications ▪ Currently displayed page ▪ Application state persistence ❖ New projects will have a derived implementation named App Note: Windows apps also have an Application class,make sure not to confuse them!
  • 19. ❖ Application classprovides lifecycle methods which can be used to manage persistence and refresh your data Xamarin.Forms Application public classApp :Application { ... protected override void OnStart() {} protected override void OnSleep() {} protected override void OnResume() {} } UseOnStart to initialize and/or reload your app's data UseOnSleep tosavechanges or persist information UseOnResumeto refresh your displayed data
  • 20. ❖ Application classalso includes astring object property bag which ispersisted between app launches Persisting information // Save off username in globalpropertybag Application.Current.Properties["username"] = username.Text; // Restore the username before it is displayed if (Application.Current.Properties.ContainsKey("username")) { var uname =Application.Current.Properties["username"]as string ?? ""; username.Text= uname; }
  • 21. ❖ Application UIisdefined in terms of pagesandviews Creating the application UI Pagerepresents a single screen displayed in the app OK Name:Views are the UI controls the user interacts with
  • 22. Pages Content ❖ Page isan abstract classused to define a single screenof content ▪ derived types provide specific visualization / behavior Displays a single piece of content (visual thing)
  • 23. ❖ Page isan abstract classused to define a single screenof content ▪ derived types provide specific visualization / behavior Pages Content Master Detail Manages two panes of information
  • 24. ❖ Page isan abstract classused to define a single screenof content ▪ derived types provide specific visualization / behavior Pages Content Master Detail Navigation Manages a stack of pages with navigation bar
  • 25. ❖ Page isan abstract classused to define a single screenof content ▪ derived types provide specific visualization / behavior Pages Content Master Detail Navigation Tabbed Pagethat navigates between children using tab bar
  • 26. Adding a new ContentPage to aXamarin.Forms application Demonstration
  • 27. ❖ View isthe base classfor all visual controls, most standard controls are present Views Label Image SearchBar Entry ProgressBar ActivityIndicator Button Slider OpenGLView Editor Stepper WebView DatePicker Switch ListView BoxView TimePicker Frame Picker
  • 28. ❖ Button provides aclickable surface withtext Views - Button OK var okButton = new Button() { Text = "OK" }; okButton.Clicked+= OnClick; void OnClick(object sender, EventArgs e) { ... }
  • 29. Views - Label ❖ UseaLabel to display read-only textblocks Hello, Forms! var hello = new Label() { Text = "Hello,Forms!", HorizontalTextAlignment= TextAlignment.Center, TextColor = Color.Blue, FontFamily = "Arial" };
  • 30. ❖ Usean Entry control if you want the user to provide input with an on- screen or hardware keyboard Views - Entry Hello var edit = new Entry() { Keyboard = Keyboard.Text, PlaceholderText= "Enter Text" };
  • 31. ❖ Platform defines arenderer for each view that turns each view into the appropriate platform-specific control Rendering views var button= new Button{ Text = "ClickMe!" }; UIdefined using a Xamarin.Forms Button Android.Widget.Button UIKit.UIButton Windows.UI.Xaml.Controls.Button
  • 32. Visual adjustments ❖ Views utilize properties to adjust visual appearance and behavior var numEntry = new Entry { Placeholder = "Enter Number", Keyboard = Keyboard.Numeric }; var callButton = new Button { Text = "Call", BackgroundColor = Color.Blue, TextColor = Color.White };
  • 33. ❖ Controls useevents to provide interaction behavior, should be very familiar model for most .NET developers Providing Behavior var numEntry = new Entry { ... }; numEntry.TextChanged += OnTextChanged; ... void OnTextChanged (object sender, string newValue) { ... } Youcan usetraditional delegates, anonymous methods, or lambdas to handle events
  • 34. Creating our first Xamarin.Forms application Group Exercise
  • 35. ① Xamarin.Forms creates asingle binary that can be deployed to Android, iOSorWindows a) True b) False Flash Quiz
  • 36. ① Xamarin.Forms creates asingle binary that can be deployed to Android, iOSorWindows a) True b) False Flash Quiz
  • 37. ② You must call before using Xamarin.Forms a) Forms.Initialize b) Forms.Init c) Forms.Setup d) No setup call necessary Flash Quiz
  • 38. ② You must call before using Xamarin.Forms a) Forms.Initialize b) Forms.Init c) Forms.Setup d) No setup call necessary Flash Quiz
  • 39. ③ Tosupply the initial page for the application, you must set the property. a) Application.FirstPage b) Application.PrimaryPage c) Application.MainPage d) Application.MainView Flash Quiz
  • 40. ③ Tosupply the initial page for the application, you must set the property. a) Application.FirstPage b) Application.PrimaryPage c) Application.MainPage d) Application.MainView Flash Quiz
  • 41. ❖ Xamarin.Forms project structure ❖ Application Components ❖ "Hello, Forms!" Summary
  • 42. ❖ Layout containers ❖ Adding views ❖ Fine-tuning layout Tasks
  • 43. Organizing content ❖ Rather than specifying positions with coordinates (pixels, dips, etc.), you uselayout containers to control how views are positioned relative to each other ❖ This provides for a more adaptive layout which is not as sensitive to dimensions and resolutions For example, "stacking" views on top of each other with some spacing between them
  • 44. Layout containers StackLayout ❖ Layout Containers organize child elements based on specific rules StackLayoutplaces children top-to-bottom (default) or left-to- right based on Orientation property setting
  • 45. ❖ Layout Containers organize child elements based on specific rules Layout containers StackLayout AbsoluteLayout AbsoluteLayoutplaces children in absolute requested positions based on anchors and bounds
  • 46. ❖ Layout Containers organize child elements based on specific rules Layout containers StackLayout Absolute Layout Relative Layout RelativeLayout uses constraints to position the children
  • 47. ❖ Layout Containers organize child elements based on specific rules Layout containers StackLayout Absolute Layout Relative Layout Grid Grid places children in defined rows and columns
  • 48. Layout containers StackLayout Absolute Layout Relative Layout Grid ScrollView ❖ Layout Containers organize child elements based on specific rules ScrollViewscrolls a single piece of content (which isnormally a layout container)
  • 49. Adding views to layout containers ❖ Layout containers have aChildren collection property which isused to hold the views that will be organized by the container Label label = new Label { Text = "EnterYour 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
  • 50. ❖ StackLayout isused to create typical form stylelayout Working with StackLayout …. Entry … Label Button Entry "stacks"the child views top-to-bottom (vertical) [default] …or left-to-right (horizontal) The Orientationproperty can be set to either Horizontalor Verticalto control which direction the child views are stacked in
  • 51. Working with StackLayout ❖ StackLayout isused to create typical form style layout,Orientation property decides the direction that children are stacked var layout = new StackLayout { Orientation = StackOrientation.Vertical }; layout.Children.Add(new Label { Text = "Enter your name:" }); layout.Children.Add(new Entry()); layout.Children.Add(new Button { Text = "OK" });
  • 52. ❖ Grid isalayout panel used to create rows and columns of views, children identify specific column, row and span Working with Grid Column 0 Column 1 Column = 0, Row = 0, Column = 1, Row= 0 Row Span= 2 Column = 1, Row= 1 Column = 0, Row= 2, Column Span = 2 Row 0 Row 1 Row 2
  • 53. Adding items to a Grid ❖ Children in Grid must specify the layout properties, or they will default to the first column/row Label label = new Label { Text = "EnterYour Name" }; Grid layout = new Grid(); layout.Children.Add(label); Grid.SetColumn(label,1); Grid.SetRow(label, 1); Grid.SetColumnSpan(label,2); Grid.SetRowSpan(label, 1); Usestatic methods defined on Gridto set layout properties
  • 54. Adding items to a Grid ❖ Children in Grid must specify the layout properties, or they will default to the first column/row Grid layout = new Grid(); ... layout.Children.Add(label, 0, 1); layout.Children.Add(button, 0, 2, 2,3); // Left=0andTop=1 // L=0, R=2,T=2,B=3 Can also specify row/column asLeft/Right/Top/Bottom values to Addmethod
  • 55. Controlling the shape of the grid ❖ Can influence the determined shape and size of the columns and rows Grid layout = new Grid(); layout.RowDefinitions.Add(new RowDefinition { Height = new GridLength(100, GridUnitType.Absolute)// 100px }); layout.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto)// "Auto" size }); layout.ColumnDefinitions.Add(newColumnDefinition { Width = new GridLength(1, GridUnitType.Star) // "Star"size });
  • 56. Working with RelativeLayout ❖ RelativeLayout allows you to position child views relative totwo other views, or to the panel itself using constraint-based rules var layout = new RelativeLayout(); ... layout.Children.Add(label, Constraint.RelativeToParent( parent => (0.5 * parent.Width) - 25), //X Constraint.RelativeToView(button, (parent, sibling)=> sibling.Y + 5), // Y Constraint.Constant(50), // Width Constraint.Constant(50)); // Height
  • 57. Working with AbsoluteLayout ❖ AbsoluteLayout positions and sizeschildren by absolute values through either a coordinate (where the view determines it's own size), or a bounding box var layout = newAbsoluteLayout(); ... // Can do absolute positions by coordinate point layout.Children.Add(label1, new Point(100, 100)); // Or use a specific bounding box layout.Children.Add(label2, new Rectangle(20, 20, 100, 25));
  • 58. ❖ AbsoluteLayout can also position and size children proportional to its own size using coordinates based on a 1x1unit square which represents apercentage of the container's size Working with AbsoluteLayout (0,0) (0.5,0.5) (1,1) (1,0) (0,1)
  • 59. Working with AbsoluteLayout ❖ AbsoluteLayout can also position and size children proportional to its own size using coordinates based on a 1x1 unit square which represents apercentage of the container's size var layout = newAbsoluteLayout(); ... // Center at the bottom of the container, take up ½ the space layout.Children.Add(bottomLabel,new Rectangle (.5, 1, .5, .1), AbsoluteLayoutFlags.All); Here we center the label (.5) at the bottom of the container (1) and take up ½ the space (.5) width and 1/10the space height (.1)
  • 60. Working with AbsoluteLayout ❖ AbsoluteLayout can also position and size children proportional to its own size using coordinates based on a 1x1 unit square which represents apercentage of the container's size var layout = newAbsoluteLayout(); ... // Stretch image across entire container layout.Children.Add(fillImage,new Rectangle (0, 0, 1, 1), AbsoluteLayoutFlags.All); Here we "fill" the container with an image [0,0] – [1,1]
  • 61. ❖ Canuseeither Add method, or specific static methods to control the bounding box and layout flags for children in AbsoluteLayout –this allows for "runtime" adjustments Fine-tuning AbsoluteLayout Label bottomLabel; void MoveLabelToTopRight(objectsender, EventArgs e) { AbsoluteLayout.SetLayoutBounds(bottomLabel, new Rectangle (1, 0, .5, .1)); AbsoluteLayout.SetLayoutFlags (bottomLabel, AbsoluteLayoutFlags.All); }
  • 62. ❖ UseWidthRequest and HeightRequestto askthe layout panel for a specific size for your views Element size Button var button = new Button(); button.WidthRequest =300; button.HeightRequest=150;
  • 63. ❖ Margin adds distance from an view to adjacent views within a managed layout View Margin Label Button Overloaded constructors give you several options, including the ability to set a separate value on each side Label label = ... Button button =... label.Margin = newThickness(10); button.Margin= new Thickness(10,20);
  • 64. ❖ Padding adds distance between the inside edges of a layout container and its children (only available in layouts) Layout Padding View View View Grid grid = ...; grid.Padding = newThickness(10);
  • 65. ❖ The Spacingproperty of StackLayoutand controls the distance between child elements StackLayout Spacing View View View Stack Layout StackLayout panel = ...; panel.Spacing = 20; Spacing
  • 67. ① The direction (left-to-right or top-to-bottom) a StackLayout organizes content iscontrolled by which property? a) Style b) Direction c) Orientation d) LayoutDirection Flash Quiz
  • 68. ① The direction (left-to-right or top-to-bottom) a StackLayout organizes content iscontrolled by which property? a) Style b) Direction c) Orientation d) LayoutDirection Flash Quiz
  • 69. ② Which of these controls isnot available in Xamarin.Forms? a) Button b) DatePicker c) ListBox d) ListView Flash Quiz
  • 70. ② Which of these controls isnot available in Xamarin.Forms? a) Button b) DatePicker c) ListBox d) ListView Flash Quiz
  • 71. ③ Toadjust spacing between children when using the StackLayout container we can change the property on the stack layout. a) Margin b) Padding c) Spacing Flash Quiz
  • 72. ③ Toadjust spacing between children when using the StackLayout container we can change the property on the stack layout. a) Margin b) Padding c) Spacing Flash Quiz
  • 73. ❖ Layout containers ❖ Adding views ❖ Fine-tuning layout Summary
  • 75. ❖ Changing the UI per-platform ❖ Using Platform features ❖ Working with DependencyService Tasks
  • 76. ❖ Xamarin.Forms applications have two projects that work together to provide the logic + UIfor each executable Recall: Xamarin.Forms architecture Portable Class Library Platform- SpecPifliactfporromje-ct SpecPifliactfporromje-ct Specific project ▪ shared acrossall platforms ▪ limited access to .NETAPIs ▪ want most of our code here ▪ 1-per platform ▪ code isnot shared ▪ full accessto .NETAPIs ▪ any platform-specific code must be located in these projects
  • 77. ❖ Device.RuntimePlatformallows your app to determine the executing platform Changing the UI per-platform switch(Device.RuntimePlatform) { case Device.iOS: ... break; case Device.Android: ... break; case Device.UWP: ... break; case Device.macOS: ... break; }
  • 78. ❖ Canusethe static Device classto identify the device style Detecting the platform if (Device.Idiom==TargetIdiom.Tablet) { // Code for tablets only if (Device.RuntimePlatform== Device.iOS) { // Code for iPad only } } Note that this does not allow for platform-specific codeto be executed, it allows runtime detection of the platform to execute a unique branch in your shared code
  • 79. ❖ Xamarin.Forms hassupport for dealing with afew, very common platform-specific features Using Platform Features Page.DisplayAlert to show simple alert messages Timer management using Device.StartTimer Device.OpenUri to launch external apps based on a URL scheme
  • 80. ❖ Xamarin.Forms hassupport for dealing with afew, very common platform-specific features Using Platform Features UIThread marshaling with Device.BeginInvoke OnMainThread Mapping and Location through Xamarin.Forms.Maps
  • 81. Other platform-specific features ❖ Platform features not exposed by Xamarin.Forms can be used, but will require some architectural design ▪ code goes into platform-specific projects ▪ often must (somehow) use code from your shared logic project Dialing the phone would require platform-specific code
  • 82. ❖ Bestpractice to build an abstraction implemented by the target platform which defines the platform-specific functionality Creating abstractions PhoneDialerIOS PhoneDialerDroid PhoneDialerWin Platform projects implement the shared dialer interface using the platform-specific APIs Shared code defines IDialerinterface to represent required functionality publicinterfaceIDialer { bool MakeCall(string number); }
  • 83. ❖ Xamarin.Forms includes a servicelocator called DependencyService which can be used to register platform-specific implementations and then locate them through the abstraction in your shared code Locating dependencies 1 Define an interface or abstract classin the shared code project (PCL) public interface IDialer { bool MakeCall(string number); }
  • 84. ❖ Xamarin.Forms includes a servicelocator called DependencyService which can be used to register platform-specific implementations and then locate them through the abstraction in your shared code Locating dependencies 2 Provide implementation of abstraction in each platform-specific project class PhoneDialerIOS : IDialer { public bool MakeCall(stringnumber) { // Implementation goes here } }
  • 85. ❖ Xamarin.Forms includes a servicelocator called DependencyService which can be used to register platform-specific implementations and then locate them through the abstraction in your shared code Locating dependencies 3 Exposeplatform-specific implementation using assembly- level attribute in platform-specific project [assembly: Dependency(typeof(PhoneDialerIOS))] Implementation type issupplied to attribute aspart of registration
  • 86. ❖ Xamarin.Forms includes a servicelocator called DependencyService which can be used to register platform-specific implementations and then locate them through the abstraction in your shared code Locating dependencies 4 Retrieve and usethe dependency anywhere using DependencyService.Get<T>(bothshared and platform specific projects can usethis API) IDialer dialer =DependencyService.Get<IDialer>(); if (dialer != null) { ... } Request the abstraction and the implementation will be returned
  • 87. Adding support for dialing the phone Individual Exercise
  • 88. ❖ Changing the UI per-platform ❖ Using Platform features ❖ Working with DependencyService Summary