Xamarin.Forms Notes for Professionals

GoalKicker.com (CC BY-SA)
Page 1 sur 181Lecteur de document UniversityLib

Xamarin.Forms Notes for Professionals

Programming, Mobile Development · notes

Voir tous les documents en programmation

Xamarin.Forms

Notes for Professionals

Xamarin

.Forms

Notes for Professionals

100+ pages

of professional hints and tricks

GoalKicker.com

Free Programming Books

Disclaimer

This is an unocial free book created for educational purposes and is

not aliated with ocial Xamarin.Forms group(s) or company(s).

All trademarks and registered trademarks are

the property of their respective owners

Contents

About

...................................................................................................................................................................................

1

Chapter 1: Getting started with Xamarin.Forms

...........................................................................................

2

Section 1.1: Installation (Visual Studio)

Section 1.2: Hello World Xamarin Forms: Visual Studio

.........................................................................................................................

2

.............................................................................................

4

Chapter 2: Why Xamarin Forms and When to use Xamarin Forms

....................................................

7

Section 2.1: Why Xamarin Forms and When to use Xamarin Forms

.......................................................................

7

Chapter 3: Xamarin Forms Layouts

....................................................................................................................

8

Section 3.1: AbsoluteLayout

Section 3.2: Grid

Section 3.3: ContentPresenter

Section 3.4: ContentView

Section 3.5: ScrollView

Section 3.6: Frame

Section 3.7: TemplatedView

Section 3.8: RelativeLayout

Section 3.9: StackLayout

..........................................................................................................................................

8

...........................................................................................................................................................

10

....................................................................................................................................

11

............................................................................................................................................

................................................................................................................................................

.......................................................................................................................................................

.......................................................................................................................................

........................................................................................................................................

............................................................................................................................................

Chapter 4: Xamarin Relative Layout

...............................................................................................................

19

Section 4.1: Box after box

Section 4.2: Page with an simple label on the middle

...........................................................................................................................................

19

.............................................................................................

21

Chapter 5: Navigation in Xamarin.Forms

Section 5.1: NavigationPage flow with XAML

Section 5.2: NavigationPage flow

Section 5.3: Master Detail Navigation

Section 5.4: Using INavigation from view model

Section 5.5: Master Detail Root Page

Section 5.6: Hierarchical navigation with XAML

Section 5.7: Modal navigation with XAML

.......................................................................................................

............................................................................................................

..............................................................................................................................

.......................................................................................................................

.....................................................................................................

26

........................................................................................................................

.......................................................................................................

.................................................................................................................

Chapter 6: Xamarin.Forms Page

........................................................................................................................

32

Section 6.1: TabbedPage

Section 6.2: ContentPage

Section 6.3: MasterDetailPage

Chapter 7: Xamarin.Forms Cells

............................................................................................................................................

...........................................................................................................................................

...................................................................................................................................

.........................................................................................................................

36

Section 7.1: EntryCell

Section 7.2: SwitchCell

Section 7.3: TextCell

Section 7.4: ImageCell

Section 7.5: ViewCell

...................................................................................................................................................

36

.................................................................................................................................................

36

....................................................................................................................................................

37

.................................................................................................................................................

38

....................................................................................................................................................

39

Chapter 8: Xamarin.Forms Views

.......................................................................................................................

41

Section 8.1: Button

Section 8.2: DatePicker

Section 8.3: Entry

Section 8.4: Editor

Section 8.5: Image

Section 8.6: Label

.......................................................................................................................................................

41

...............................................................................................................................................

42

.........................................................................................................................................................

........................................................................................................................................................

.......................................................................................................................................................

........................................................................................................................................................

Chapter 9: Using ListViews

.....................................................................................................................................

47

Section 9.1: Pull to Refresh in XAML and Code behind

............................................................................................

47

12

13

14

14

15

16

23

23

24

25

28

29

31

Publicité

32

33

34

43

43

44

45

48

48

56

56

57

59

61

65

70

70

78

79

79

96

99

Chapter 10: Display Alert

Section 10.1: DisplayAlert

Section 10.2: Alert Example with only one button and action

........................................................................................................................................

............................................................................................................................................

.................................................................................

49

Chapter 11: Accessing native features with DependencyService

.......................................................

50

Section 11.1: Implementing text-to-speech

Section 11.2: Getting Application and Device OS Version Numbers - Android & iOS - PCL

................................................................................................................

.................................

53

50

Chapter 12: DependencyService

Section 12.1: Android implementation

Section 12.2: Interface

Section 12.3: iOS implementation

Section 12.4: Shared code

.........................................................................................................................

55

........................................................................................................................

55

.................................................................................................................................................

...............................................................................................................................

...........................................................................................................................................

Chapter 13: Custom Renderers

............................................................................................................................

58

Section 13.1: Accessing renderer from a native project

Section 13.2: Rounded label with a custom renderer for Frame (PCL & iOS parts)

Section 13.3: Custom renderer for ListView

Section 13.4: Custom Renderer for BoxView

Section 13.5: Rounded BoxView with selectable background color

..............................................................................................................

.............................................................................................................

.......................................................................

...........................................................................................

58

.............................................

58

Chapter 14: Caching

..................................................................................................................................................

68

Section 14.1: Caching using Akavache

.......................................................................................................................

68

Chapter 15: Gestures

.................................................................................................................................................

70

.........................................................................................................................................

Section 15.1: Make an Image tappable by adding a TapGestureRecognizer

Section 15.2: Gesture Event

Section 15.3: Zoom an Image with the Pinch gesture

Section 15.4: Show all of the zoomed Image content with the PanGestureRecognizer

Section 15.5: Tap Gesture

Section 15.6: Place a pin where the user touched the screen with MR.Gestures

..............................................................................................

.......................................

78

...........................................................................................................................................

.......................................................

..................................................

Chapter 16: Data Binding

........................................................................................................................................

81

Section 16.1: Basic Binding to ViewModel

..................................................................................................................

81

Chapter 17: Working with Maps

...........................................................................................................................

83

Section 17.1: Adding a map in Xamarin.Forms (Xamarin Studio)

...........................................................................

83

Chapter 18: Custom Fonts in Styles

...................................................................................................................

92

Section 18.1: Accessing custom Fonts in Syles

..........................................................................................................

92

Chapter 19: Push Notifications

.............................................................................................................................

94

Section 19.1: Push notifications for Android with Azure

Section 19.2: Push notifications for iOS with Azure

Section 19.3: iOS Example

...........................................................................................

94

..................................................................................................

...........................................................................................................................................

Chapter 20: Eects

..................................................................................................................................................

101

Section 20.1: Adding platform specific Eect for an Entry control

......................................................................

101

Chapter 21: Triggers & Behaviours

..................................................................................................................

105

Section 21.1: Xamarin Forms Trigger Example

Section 21.2: Multi Triggers

.......................................................................................................

105

.......................................................................................................................................

106

Chapter 22: AppSettings Reader in Xamarin.Forms

..............................................................................

107

Section 22.1: Reading app.config file in a Xamarin.Forms Xaml project

.............................................................

107

Chapter 23: Creating custom controls

...........................................................................................................

108

Section 23.1: Label with bindable collection of Spans

Section 23.2: Implementing a CheckBox Control

Section 23.3: Create an Xamarin Forms custom input control (no native required)

Section 23.4: Creating a custom Entry control with a MaxLength property

...........................................................................................

...................................................................................................

.........................................

Publicité

116

.......................................................

118

108

110

Section 23.5: Creating custom Button

.....................................................................................................................

119

Chapter 24: Working with local databases

Section 24.1: Using SQLite.NET in a Shared Project

Section 24.2: Working with local databases using xamarin.forms in visual studio 2015

................................................................................................

...............................................................................................

...................................

123

121

121

Chapter 25: CarouselView - Pre-release version

.....................................................................................

133

Section 25.1: Import CarouselView

Section 25.2: Import CarouselView into a XAML Page

..........................................................................................................................

133

..........................................................................................

133

Chapter 26: Exception handling

........................................................................................................................

135

Section 26.1: One way to report about exceptions on iOS

Chapter 27: SQL Database and API in Xamarin Forms.

....................................................................................

135

........................................................................

137

Section 27.1: Create API using SQL database and implement in Xamarin forms,

..............................................

137

Chapter 28: Contact Picker - Xamarin Forms (Android and iOS)

....................................................

138

Section 28.1: contact_picker.cs

Section 28.2: MyPage.cs

Section 28.3: ChooseContactPicker.cs

Section 28.4: ChooseContactActivity.cs

Section 28.5: MainActivity.cs

Section 28.6: ChooseContactRenderer.cs

................................................................................................................................

...........................................................................................................................................

....................................................................................................................

..................................................................................................................

....................................................................................................................................

...............................................................................................................

141

Chapter 29: Xamarin Plugin

Section 29.1: Media Plugin

Section 29.2: Share Plugin

Section 29.3: ExternalMaps

Section 29.4: Geolocator Plugin

Section 29.5: Messaging Plugin

Section 29.6: Permissions Plugin

................................................................................................................................

........................................................................................................................................

........................................................................................................................................

......................................................................................................................................

...............................................................................................................................

...............................................................................................................................

..............................................................................................................................

151

Chapter 30: OAuth2

.................................................................................................................................................

155

Section 30.1: Authentication by using Plugin

..........................................................................................................

155

Chapter 31: MessagingCenter

Section 31.1: Simple example

Section 31.2: Passing arguments

Section 31.3: Unsubscribing

.............................................................................................................................

157

....................................................................................................................................

.............................................................................................................................

......................................................................................................................................

Chapter 32: Generic Xamarin.Forms app lifecycle? Platform-dependant!

................................

159

Section 32.1: Xamarin.Forms lifecycle is not the actual app lifecycle but a cross-platform representation of

..........................................................................................................................................................................

it

159

Chapter 33: Platform-specific behaviour

.....................................................................................................

161

Section 33.1: Removing icon in navigation header in Anroid

Section 33.2: Make label's font size smaller in iOS

................................................................................

161

................................................................................................

161

Chapter 34: Platform specific visual adjustments

..................................................................................

163

Section 34.1: Idiom adjustments

Section 34.2: Platform adjustments

Section 34.3: Using styles

Section 34.4: Using custom views

Chapter 35: Dependency Services

...............................................................................................................................

........................................................................................................................

.........................................................................................................................................

............................................................................................................................

...................................................................................................................

165

Section 35.1: Access Camera and Gallery

...............................................................................................................

165

Chapter 36: Unit Testing

.......................................................................................................................................

166

Section 36.1: Testing the view models

.....................................................................................................................

166

Chapter 37: BDD Unit Testing in Xamarin.Forms

.....................................................................................

172

Section 37.1: Simple Specflow to test commands and navigation with NUnit Test Runner

..............................

172

138

138

139

139

140

144

144

146

147

148

150

157

157

158

163

163

164

Publicité

164

Section 37.2: Advanced Usage for MVVM

..............................................................................................................

174

Credits

............................................................................................................................................................................

175

You may also like

......................................................................................................................................................

176

About

Please feel free to share this PDF with anyone for free,

latest version of this book can be downloaded from:

https://goalkicker.com/XamarinFormsBook

This Xamarin.Forms Notes for Professionals book is compiled from Stack Overflow

Documentation, the content is written by the beautiful people at Stack Overflow.

Text content is released under Creative Commons BY-SA, see credits at the end

of this book whom contributed to the various chapters. Images may be copyright

of their respective owners unless otherwise specified

This is an unofficial free book created for educational purposes and is not

affiliated with official Xamarin.Forms group(s) or company(s) nor Stack Overflow.

All trademarks and registered trademarks are the property of their respective

company owners

The information presented in this book is not guaranteed to be correct nor

accurate, use at your own risk

Please send feedback and corrections to [email protected]

GoalKicker.com – Xamarin.Forms Notes for Professionals

1

Chapter 1: Getting started with

Xamarin.Forms

Version Release Date

3.0.0

2.5.0

2.4.0

2.3.1

2018-05-07

2017-11-15

2017-09-27

2016-08-03

2.3.0-hotfix1 2016-06-29

2.3.0

2016-06-16

2.2.0-hotfix1 2016-05-30

2.2.0

2.1.0

2.0.1

2.0.0

1.5.1

1.5.0

1.4.4

1.4.3

1.4.2

1.4.1

1.4.0

1.3.5

1.3.4

1.3.3

1.3.2

1.3.1

1.3.0

1.2.3

1.2.2

1.2.1

1.2.0

1.1.1

1.1.0

1.0.1

2016-04-27

2016-03-13

2016-01-20

2015-11-17

2016-10-20

2016-09-25

2015-07-27

2015-06-30

2015-04-21

2015-03-30

2015-03-09

2015-03-02

2015-02-17

2015-02-09

2015-02-03

2015-01-04

2014-12-24

2014-10-02

2014-07-30

2014-07-14

2014-07-11

2014-06-19

2014-06-12

2014-06-04

Section 1.1: Installation (Visual Studio)

Xamarin.Forms is a cross-platform natively backed UI toolkit abstraction that allows developers to easily create user

interfaces that can be shared across Android, iOS, Windows, and Windows Phone. The user interfaces are rendered

using the native controls of the target platform, allowing Xamarin.Forms applications to retain the appropriate look

and feel for each platform.

Xamarin Plugin for Visual Studio

To get started with Xamarin.Forms for Visual Studio you need to have the Xamarin plugin itself. The easiest way to

have it installed is to download and install the latest Visual Studio.

GoalKicker.com – Xamarin.Forms Notes for Professionals

2

If you already have the latest Visual Studio installed, go to Control Panel > Programs and Features, right click on

Visual Studio, and click Change. When the installer opens, click on Modify, and select the cross-platform mobile

development tools:

You can also select to install the Android SDK:

Uncheck it if you already have the SDK installed. You will be able to setup Xamarin to use existing Android SDK later.

Xamarin.Forms

Xamarin.Forms is a set of libraries for your Portable Class library and native assemblies. The Xamarin.Forms library

itself is available as a NuGet package. To add it to your project just use the regular Install-Package command of

the Package Manager Console:

Install-Package Xamarin.Forms

for all of your initial assemblies (for example MyProject, MyProject.Droid and MyProject.iOS).

The easiest way to get started with Xamarin.Forms is to create an empty project in Visual Studio:

GoalKicker.com – Xamarin.Forms Notes for Professionals

3

As you can see there are 2 available options to create the blank app -- Portable and Shared. I recommend you to get

started with Portable one because it's the most commonly used in the real world (differences and more explanation

to be added).

After creating the project make sure you're using the latest Xamarin.Forms version as your initial template may

contain the old one. Use your Package Manager Console or Manage NuGet Packages option to upgrade to the latest

Xamarin.Forms (remember it's just a NuGet package).

While the Visual Studio Xamarin.Forms templates will create an iOS platform project for you, you will need to

connect Xamarin to a Mac build host to be able to run these projects on the iOS Simulator or physical devices.

Section 1.2: Hello World Xamarin Forms: Visual Studio

After successfully installing Xamarin as described in the first example, it's time to launch the first sample

application.

Step 1: Creating a new Project.

In Visual Studio, choose New -> Project -> Visual C# -> Cross-Platform -> Blank App (Xamarin.Forms Portable)

Name the app "Hello World" and select the location to create the project and click OK. This will create a solution for

you which contains three projects:

1.

2.

3.

HelloWorld (this is where your logic and views is placed, i.e. the portable project)

HelloWorld.Droid (the Android project)

HelloWorld.iOS (the iOS project)

GoalKicker.com – Xamarin.Forms Notes for Professionals

4

Step 2: Investigating the sample

Having created the solution, a sample application will be ready to be deployed. Open the App.cs located in the root

of the portable project and investigate the code. As seen below, the Contents of the sample is a StackLayout which

contains a Label:

using Xamarin.Forms;

namespace Hello_World

{

public class App : Application

Publicité

{

public App()

{

// The root page of your application

MainPage = new ContentPage

{

Content = new StackLayout

{

VerticalOptions = LayoutOptions.Center,

Children = {

new Label {

HorizontalTextAlignment = TextAlignment.Center,

Text = "Welcome to Xamarin Forms!"

}

}

}

};

}

protected override void OnStart()

GoalKicker.com – Xamarin.Forms Notes for Professionals

5

{

// Handle when your app starts

}

protected override void OnSleep()

{

// Handle when your app sleeps

}

protected override void OnResume()

{

// Handle when your app resumes

}

}

}

Step 3: Launching the application

Now simply right-click the project you want to start (HelloWorld.Droid or HelloWorld.iOS) and click Set as

StartUp Project. Then, in the Visual Studio toolbar, click the Start button (the green triangular button that

resembles a Play button) to launch the application on the targeted simulator/emulator.

GoalKicker.com – Xamarin.Forms Notes for Professionals

6

Chapter 2: Why Xamarin Forms and When

to use Xamarin Forms

Section 2.1: Why Xamarin Forms and When to use Xamarin

Forms

Xamarin is becoming more and more popular - it is hard to decide when to use Xamarin.Forms and when

Xamarin.Platform (so Xamarin.iOS and Xamarin.Android).

First of all you should know for what kind of applications you can use Xamarin.Forms:

1.

Prototypes - to visualize how your application will look on the different devices.

2.

Applications which not require platform specific functionality (like APIs) - but here please note that Xamarin is

working busily to provide as many cross-platform compatibility as possible.

3.

Applications where code sharing is crucial - more important than UI.

4.

Applications where data displayed is more important than advanced functionality

There are also many other factors:

1.

Who will be responsible for application development - if your team consists of experienced mobile

developers they will be able to handle Xamarin.Forms easily. But if you have one developer per platform

(native development) Forms can be bigger challenge.

2.

Please also note that with Xamarin.Forms you can still encounter some issues sometimes - Xamarin.Forms

platform is still being improved.

3.

Fast development is sometimes very important - to reduce costs and time you can decide to use Forms.

4.

When developing enterprise applications without any advanced functionality it is better to use

Xamarin.Forms - it enables you to share mode code not event in mobile area but in general. Some portions

of code can be shared across many platforms.

You should not use Xamarin.Forms when:

1.

You have to create custom functionality and and access platform specific APIs

2.

You have to create custom UI for the mobile application

3.

When some functionality is not ready for Xamarin.Forms (like some specific behaviour on the mobile device)

4.

Your team consists of platform specific mobile developers (mobile development in Java and/or

Swift/Objective C)

GoalKicker.com – Xamarin.Forms Notes for Professionals

7

Chapter 3: Xamarin Forms Layouts

Section 3.1: AbsoluteLayout

AbsoluteLayout positions and sizes child elements proportional to its own size and position or by absolute values.

Child views may be positioned and sized using proportional values or static values, and proportional and static

values can be mixed.

A definition of an AbsoluteLayout in XAML looks like this:

<AbsoluteLayout>

<Label Text="I'm centered on iPhone 4 but no other device"

AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap" />

<Label Text="I'm bottom center on every device."

AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"

LineBreakMode="WordWrap" />

<BoxView Color="Olive" AbsoluteLayout.LayoutBounds="1,.5, 25, 100"

AbsoluteLayout.LayoutFlags="PositionProportional" />

<BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"

AbsoluteLayout.LayoutFlags="PositionProportional" />

<BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"

AbsoluteLayout.LayoutFlags="PositionProportional" />

<BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,1,25"

AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" />

</AbsoluteLayout>

The same layout would look like this in code:

Title = "Absolute Layout Exploration - Code";

var layout = new AbsoluteLayout();

var centerLabel = new Label {

Text = "I'm centered on iPhone 4 but no other device.",

LineBreakMode = LineBreakMode.WordWrap};

AbsoluteLayout.SetLayoutBounds (centerLabel, new Rectangle (115, 159, 100, 100));

GoalKicker.com – Xamarin.Forms Notes for Professionals

8

// No need to set layout flags, absolute positioning is the default

var bottomLabel = new Label { Text = "I'm bottom center on every device.", LineBreakMode =

LineBreakMode.WordWrap };

AbsoluteLayout.SetLayoutBounds (bottomLabel, new Rectangle (.5, 1, .5, .1));

AbsoluteLayout.SetLayoutFlags (bottomLabel, AbsoluteLayoutFlags.All);

var rightBox = new BoxView{ Color = Color.Olive };

AbsoluteLayout.SetLayoutBounds (rightBox, new Rectangle (1, .5, 25, 100));

AbsoluteLayout.SetLayoutFlags (rightBox, AbsoluteLayoutFlags.PositionProportional);

var leftBox = new BoxView{ Color = Color.Red };

AbsoluteLayout.SetLayoutBounds (leftBox, new Rectangle (0, .5, 25, 100));

AbsoluteLayout.SetLayoutFlags (leftBox, AbsoluteLayoutFlags.PositionProportional);

var topBox = new BoxView{ Color = Color.Blue };

AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 100, 25));

AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional);

var twoFlagsBox = new BoxView{ Color = Color.Blue };

AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 1, 25));

AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional |

AbsoluteLayout.WidthProportional);

layout.Children.Add (bottomLabel);

layout.Children.Add (centerLabel);

layout.Children.Add (rightBox);

layout.Children.Add (leftBox);

layout.Children.Add (topBox);

The AbsoluteLayout control in Xamarin.Forms allows you to specify where exactly on the screen you want the child

elements to appear, as well as their size and shape (bounds).

There are a few different ways to set the bounds of the child elements based on the AbsoluteLayoutFlags

enumeration that are used during this process. The AbsoluteLayoutFlags enumeration contains the following

values:

All: All dimensions are proportional.

HeightProportional: Height is proportional to the layout.

None: No interpretation is done.

PositionProportional: Combines XProportional and YProportional.

SizeProportional: Combines Widt...