PowerPoint Presentation

Pranav AinavoluRealPage | MUGH@a_pranav | http://pranavon.net/Xamarin.Forms Do More With LessCross Platform Mobile Development Road Show - Hyderabad

1

Build native UIs for iOS, Android, and Windows Phone from a single, shared C# codebase.Meet Xamarin.Forms

Xamarin Forms is a new set of APIs allowing you to quickly and easily write shared User Interface code that is still rendered natively on each platform, while still providing direct access to the underlying SDKs if you need it.

2

Xamarin + Xamarin.FormsTraditional Xamarin ApproachWith Xamarin.Forms:More code-sharing, all native iOS C# UI Windows C# UIAndroid C# UI

Shared C# Backend

Shared UI CodeShared C# Backend

We see here the Xamarin approach we talked about earlierThis enables you to be highly productive, share code, but build out UI on each platform and access platform APIsWith Xamarin.Forms you now have a nice Shared UI Code layer, but still access to platform APIsYou can start from native, pick a few screens, or start with forms, and replace with native later

3

Xamarin.Forms Native Interface

dotnetConf 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/25/2016 9:31 PM4

DatePicker Control using Xamarin.Forms

demoRenders natively in iOS and Android

GreenR:16 G:124 B:16OrangeR:216 G:59 B:1BlueR:0 G:120 B:215Light GrayR:210 G:210 B:210Light OrangeR:255 G:140 B:0YellowR:255 G:185 B:0Main colorsSecondary colors (use only when necessary)Dark RedR:168 G:0 B:0Light BlueR:16 G:124 B:16Dark BlueR0 G32 B80

dotnetConf 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/25/2016 9:31 PM5

Write once, render natively.

dotnetConf 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/25/2016 9:31 PM6

And its free and open source!

dotnetConf 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/25/2016 9:31 PM7

Xamarin.Forms Saves Time

dotnetConf 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/25/2016 9:31 PM8

How Forms Saves You TimeDont have to re-implement stuffEasier to maintainBuilds on prior knowledge (for .NET developers)

dotnetConf 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/25/2016 9:31 PM9

Whats included 40+ Pages, layouts, and controls (Build from code behind or XAML) Two-way data binding Navigation Animation API Dependency Service Messaging Center

Shared C# Backend

Shared UI Code

Xamarin.Forms is much more that just a framework and includes everything you need to get up and running to build out full native applications.

If you are used to MVVM type of development you will feel right at home.10

LayoutsPagesStackAbsoluteRelativeGridContentViewScrollViewFrame

ContentMasterDetailNavigationTabbedCarousel

First you have a set of pages for each screen of your applicationThere are things like Content, and MasterDetail which gives you a nice flyoutWith a tabbed view you get the correct look on each platformiOS on bottom, Android on top, and on WP you have a Pivot control

Inside of a page are layoutsA lot of options from something simple like a stack panel to complex and powerful grids

11

ActivityIndicatorBoxViewButtonDatePickerEditorEntryImageLabelListViewMapOpenGLViewPickerProgressBarSearchBarSliderStepperTableViewTimePickerWebViewEntryCellImageCellSwitchCellTextCellViewCellControls

You have more than 40 controls, layouts, and pages to mix and match from.These are all of the controls you have out of the box, you can of course create your own.What is unique is you get the native control and have access to it.Consider an Entry FieldOn iOS it is mapped to UITextFieldAndroid it is EditTextWindows Phone it is a TextBox12

ExtensibilityEmbed Custom Views Anywhere

Not only are Xamarin.Forms pages mixable with custom screens, you can embed custom views built directly against Xamarin.iOS and Xamarin.Android into Xamarin.Forms pages.

Call Platform APIs via Shared Services

Need platform-specific functionality within a Xamarin.Forms page, such as querying the accelerometer? Weve included services that quickly and easily abstract platform-specific API calls to keep you writing as much shared code as possible.

Easy migration to the Xamarin Platform

When your native platform integration requirements outgrow Xamarin.Forms, your shared code is easily migrated to Xamarin.iOS and Xamarin.Android using the full Xamarin platform.

With Xamarin.Forms you can easily extend and embed custom views, mix and match screens, called native apis, or even easily migrate to a traditional app and share your backend logic.13

Xamarin.Forms Ecosystem

Xamarin.Forms also has a great ecosystem of controls from vendors you might know!14

WindowsXamarin.FormsStackPanelStackLayoutTextBoxEntryListBoxListViewCheckBoxSwitchProgressBarActivityIndicatorGridGridLabelLabelButtonButtonImageImageDate/TimePickerDate/TimePicker

Control Comparison

15

WindowsXamarin.FormsDataContextBindingContext{Binding Property}{Binding Property}ItemsSourceItemsSourceItemTemplateItemTemplateDataTemplateDataTemplate

Binding Comparison

16

Platform Customization

17

Native UI from shared code

Here is a quick example of a login page:

Notice the data binding on the Entries Text fields. Additionally, there is a LoginCommand.

Each has a native user interface18

Lets Take a Look

Demo: Tabbed Views

19

Whats new?

XAML Previewer

DataPages

https://developer.xamarin.com/guides/xamarin-forms/datapages/

Themes

https://developer.xamarin.com/guides/xamarin-forms/themes/

Native Embedding

Easily embed any native control into a Xamarin.Forms layout.

Native Embedding

Just add it as child to a layout.Exposed as an Extension Method.

Plugins for Xamarin

A unique aspect of Xamarin.Forms is an abstraction over the user interface, but what about the platform specific functionality that makes these devices so special?

That is where plugins for Xamarin come in.26

Shared C# Backend

What is this stuff that we talk about up here?27

PlatformSpecific CodeWhat if we didnt have to write this code?

What if we could access it from shared code?

UI+APIsUI + APIsUI + APIsBatteryGPSLightsNotificationsSettingsText To SpeechBatteryGPSLightsNotificationsSettingsText To SpeechBatteryGPSLightsNotificationsSettingsText To Speech

This is the platform specific code no matter how you are developing traditional Xamarin or with Xamarin.Forms.

However, many platform APIs are the same bit of functionality, but with different APIs.

What if we had 1 API?28

TextToSpeechSpeak(Hello World);

AVSpeechSynthesizerSpeechSynthesizer

For instance text to speech, what if we could just say Speak and it would speak text with the underlying API.29

Plugins for Xamarin Common API

github.com/xamarin/plugins

This is what Plugins for Xamarin are for! 1 API for all common APIs:

CameraGPSSettingsNotificationsBatteryAnd so much more!30

GreenR:16 G:124 B:16OrangeR:216 G:59 B:1BlueR:0 G:120 B:215Light GrayR:210 G:210 B:210Light OrangeR:255 G:140 B:0YellowR:255 G:185 B:0Main colorsSecondary colors (use only when necessary)Dark RedR:168 G:0 B:0Light BlueR:16 G:124 B:16Dark BlueR0 G32 B80

dotnetConf 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/25/2016 9:31 PM31

GreenR:16 G:124 B:16OrangeR:216 G:59 B:1BlueR:0 G:120 B:215Light GrayR:210 G:210 B:210Light OrangeR:255 G:140 B:0YellowR:255 G:185 B:0Main colorsSecondary colors (use only when necessary)Dark RedR:168 G:0 B:0Light BlueR:16 G:124 B:16Dark BlueR0 G32 B80