xamarin.forms mobile application development using c#

XAMARIN MOBILE APPLICATION DEVELOPMENT COURSECROSS PLATFORM DEVELOPMENTUSING XAMARIN.FORMS WITH C#

Written by

MR HERY

CEO OF HERYIT®

heryit.com

Xamarin.Forms Mobile Application Development Copyright© HeryIT® JM 0670283X (2017)

First Edition (March 2017)

NOT FOR SALE


Xamarin Mobile Application Development CourseXamarin.Forms with C# by Mr Hery

DESCLAIMER

Copyright® HeryIT® JM0670283X, 2017- First Edition -All rights reserved. Not to be reproduced any part of the articles, illustrations and contents of this book in any form and by any means, whether electronic, mechanical, photocopying, recording or otherwise without the prior permission of the HeryIT

This Book Is Not For SaleAny content of this book, illustration, articles and contents are not for sale. This books been officially released by the authority of HeryIT® for public freely.

Books Own To HeryIT®Be pleasure to contact us as below information on any queries:

Hery Intelligent Technology® JM 0670283-XNo 1, Tingkat 2, Jalan Fajar 1/1, Taman Fajar,86000 Kluang, Johor.

+60 19-709 [email protected]



1

INTRODUCTION

What is Xamarin?Xamarin is a framework used in Cross-Platform Mobile Application Development and it use implementation of .NET Framework family.

Xamarin provides native development platform for Xamarin.Android, Xamarin.iOS and Xamarin.Windows. These platform are develop and programmed in specific project.

In other way, Xamarin enables developer to develop code and design in a single project that work for Android, iOS and Windows application, called Xamarin.Forms. This document will be more approach on Xamarin.Forms.

Development ComparisonDevelopment Process and Architecture are quite differ to actual development and that’s make Xamarin.Forms has its flexibility to cross other platform.

Left diagram shows the actual development platform. As Android platform, it use Java as a base language (with ART – Android Runtime) and XML as it’s UI definition.

As for iOS, it use Objective-C or Swift as a base language and XiB or Storyboard as it’s UI Definition.

They are totally different in language and UI. Then how Xamarin.Forms enables developer to develop an application using C# codes and XAML as UI definition.

As said before, Xamarin is built on implementation of .NET Framework, it means, every platform developed are base on “common-use” controller.Here is some disadvantages because

Xamarin.Forms does not support higher graphical as native development like Xamarin.Android, Xamarin.iOS and Xamarin.Windows.



2

WHERE TO START

Choosing IDEAs a lucky year of 2017, Microsoft has released a great Visual Studio 2017 RC. Visual Studio 2017 is the best IDE for software development.

But, Visual Studio 2017 RC is not so good for Xamarin. I quoted words from Xamarin.com that said they are recommending Visual Studio 2015 for application production.

‘While the team is currently looking into ways to bypass this expected behaviour, we do advise users to choose their development environment based on their needs. Visual Studio 2015/2013 are recommended for production Xamarin development as Xamarin projects are provided as a preview technology in the Visual Studio 2017 Release Candidate.” – Xamarin.com

IDE InstallationIf you wish to install Visual Studio 2017 RC, you may, but it’s not recommended. So here some tips on how to install Visual Studio 2015 + Xamarin.

1. Downloading IDE + Xamarin1. Go to this link : https://www.xamarin.com/download2. Create an account, tick to agree.3. If you have installed Visual Studio, choose “Yes”, if not, choose “No”.4. Click on “Download” button and download will be automatically start.

2. Installing IDE + Xamarin1. Run the downloaded file, (please note that downloaded file is an online installer

which is recommended).2. Not to worry to accept, next, next and next. It will take some time.3. If you are not installed Visual Studio yet, Visual Studio Installer will prompted up.4. All will be automatically downloaded, and you need to accept and next for Android

SDK, Windows SDK, iOS SDK, Xamarin Tools etc.

After installation finish, you’re recommended to update Xamarin, get the “latest-stable” version of it. It really help in development process.

https://www.xamarin.com/download



3

CREATE MY FIRST APPCreate New ProjectFire up Visual Studio 2015, (it might take a while for first use). After Visual Studio has started, click on the File (on the top-left), choose New and click Project.

Choose Cross Platform and click to “Cross Platform App (Xamarin.Forms or Native)”. Name your application, in this case MyFirstApp. Click on OK.A popup window showed up, choose Blank App, UI Technology as Xamarin.Forms and code sharing strategy Portable Class Library.

It shows two (2) templates available. For this example we are going to use Blank App template as we are going to create our own App, not base on sample.

The other template, Master Detail is a complete template with pages, sliding, list view base on MVVC. You may choose that if you wanted to.

To develop an iOS app, you need Add Mac device to fire up the emulator.

For quick guide, just right-click on MyFirstApp.Android (on the right panel), and click Debug. The app will fire up!



4

XAMARIN.FORMS DEVELOPMENT

The ArchitectureXamarin.Forms application consists of page, layout and view. An application have one or more pages, think of page as an app screen.

The children of a page should contain at least one layout. Layout are responsible for positioning the view.

View is the item that show in the page, positioned by the layout. Some called view as control (i.e. text input, button etc.).

Page

ContentPage MasterDetailPage NavigationPage MultiPage

TabbedPage

CarouselPage

There are various type of pages. ContentPage is usually used to create a single content page.

MasterDetailPage is a page with complete sample feature of an application i.e. sliding, listview etc.

Navigation page is a page with navigation button on the top nav bar (back button). It transfer between two ContentPage.

There are Two of Multipage. MultiPage is a page contains multiple page in a single page. It is shown using certain page function; CarouselPage (sliding page) and TabbedPage (tab on top).

The default page created by every Xamarin.Forms is ContentPage, it is easy to use and it shows only a page.



5

Application LifecycleApplication lifecycle are the current state of an application. These methods are used to control or handling the app when the user are not active with current app (either home button pressed, back button or closed).

Below are full Xamarin Visual Element architecture which is will be discuss further in UI design.



6

Xamarin.Forms application lifecycle are quite differs to actual mobile application lifecycle. It is because Xamarin.Forms only grab the common lifecycle between Android, iOS and Windows.

Xamarin has write these method whenever project is created. As we can see, these methods are “protected override” modifier / specifier. These override method are commonly use in development especially mobile application development.

Protected specifier Is used for inheriting other class (which is contain methods / variables) to current class.

“The protected keyword is a member access modifier. A protected member is accessible within its class and by derived class instances.” - Microsoft

The override modifier is used to override or re-write the code block of existence method or code. This method are came from abstract classes.

“The override modifier is required to extend or modify the abstract or virtual implementation of an inherited method, property, indexer, or event.” - Microsoft



7

XAMARIN.FORMS XAML UI DEFINITION

How Application StartEvery time application Debug / Run, Android, iOS and Windows will render the code and UI definition from PCL project: App.xaml. You may find it on the left panel of your IDE.

App.Xaml is nothing related to UI. Because the main page has been transferred to MainPage.xaml.

Open up file MainPage.xaml, we can see some view’s code in there.

On line 2, ContentPage been declared, it define that the page is a ContentPage type. As we can see, this contain page has no layout (but I said it should have one at least) because there is only one view item; Label.

Every view item has it’s own name, Label is a text that shows text on the screen. In the view item’s tag, there are options called properties.

All these page, layout and view can be created programmatically in C# or in XAML and they has their own classes, method and variables which is we can “get” or “set” it’s value (here is the properties comes up).

On the left is an example on how to create a label programmatically in C#.

This method are commonly use to reaching data that are not passive (various variable values).

See the next section for example XAML file and how it looks like.



8

XAML And UI ExampleThese examples show basically how XAML works, re-arrangement and re-positioning.



9

The GridXAML has its own way to create grid using <Grid> tag. Grid make designing process easier to re-arrange and re-positioning View Item. The Grid can be anywhere; in a listview or the direct to the ContentPage etc and also Grid are used to create padding to it’s content. This is the example of 4x4 grid.

The children of the Grid is Grid.RowDefintions and Grid.ColumnDefinitons. These two used to define number of rows and columns. In this case, there are 4 rows x 4 columns which they had Width and Height as 1*.The star (*) sign tells the UI engine that the grid has the same value of Width (match its parent) and Height (wrap to its content).

The picture of the top right shown that the button is out of the Grid. The parent Grid tag has declared its padding value of 20 but the button has none. It makes the button automatically match to its parent width.

The ListViewListView create a view of listing items. By default ListView is showing a single line of string.

An example list of string, we may use List class and collect bunch of strings.

This ItemSource accept List, Array, Collection and other collection type.

The List collect a single data which is line of string and it is “Bindable”.

Bindable data is a set of data (collection of more than a variable) commonly base on classes and sometime base on array of classes.This Bindable data will be required for Custom ListView Design.

Customizing ListView enable ListView to show more than single data in a row, including images. Customizing ListView will be discuss in the next section.



10

XAML UI AND C# PROGRAMMING

Button Clicked EventThis example shows that how to interact Clicked Button Event to change attribute of the View Item in XAML.

Clicked button change the last line text.

Use the x:Name attribute to assign the name of a View Item. The assigned name can be easily access by C# code.

There are various of event for a button.

To call a method or function, use += sign.



11

Complete Binding To ListViewData binding is the way to delivering data from the C# code to UI effectively. This method are very useful. Data binding enable developer to show their data without mention the UI element in C# code (except the data).

On the left, News classes created (present as an object) which is structured with variables and stored List of Articles.

This class created followed by the News API provided by newsapi.org/

.NET Library has a namespace called System.Net. System.Net has classes that provides developer to access network protocol i.e. WebClient, WebRequest, HttpRequest etc.

This example are using WebClient class and downloading string from newsapi.org.

The newsapi.org response JSON string. In that case, we need to convert JSON string to News object created before.

Newtonsoft.Json has ability to Deserialize JSON to C# object easily. The sample are as shown above. Newtonsoft.Json can be downloaded via NuGet Package.

The most left picture shows how the custom ListView works and how to binding data from c# data source.

On the right, that how it looks like.

To bind data from C# to Xaml, we need to put {Binding Variable} sign to tell the binding engine to find any of variable exist in the C# code. It’s also need to declare whose the Context to be Binded using BindingContext.



12

Adding Clicked EventLast section we have discussed on how to bind data to a ListView. The data has been shown, now is the time to handle what happen if the list view is Selected / Tapped.

Xamarin.com

Xamarin.com says that there are two public event to handle when the item is Selected and Tapped (these two done by touching it).

In this example we are going to Navigate to the page to see it’s content. To make the page is “Navigatable”, it is required to declared the MainPage as a NavigationPage.

Declaring the NavigationPage in App.xaml.cs.This is where the application first read.

After declaring, now is the time to handle the Select or Tapped event. In this example, we use ItemSelected event.

Create a new method to read the SelectedItem. This can be done by type the ListViewName.ItemSelected += then press Tab key. IDE will automatically create a new method as shown below.

The method can be done without “asynch” modifier and removing “await” command. This modifier is useful in mobile application development because it tell the system that this page is “asynch” (not destroyed) and “await” for the Navigation finish.

Refer to Microsoft portal for further detail on Asynch and Await.



13

Create New Content PageLast section we have stopped to Navigation.PushAsynch() method. The Navigation method are sending the page to the other content with Navigation Controller in it (the back button). Now we need to create a new content page to make Navigation method works well.

Right click on the MyFirstAppp (on the right panel – Solution Explorer), choose Add New Item.

Click on Form Blank Xaml, and rename it ReadNews.Click OK, Xamarin will automatically create two files; ReadNews.xaml.cs and ReadNews.xaml.

Write these code in ReadNews.xaml.cs. The double (//) is a comment line. The program did not read that line (not important to be written in the code).

Fire the application, let’s see the result.The Xamarin.Forms is not 100% native on the development process, but it has it’s own Rendering Process that convert the XAML into native design.

Otherwise, as mentioned before, Xamarin.Forms is not suitable for higher graphical application, i.e. game.

It is because it’s shared library is base on .Net Library, so it cannot achieve native graphical.



14

REFERENCES

C# Programming - https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx

Xamarin.Forms - https://developer.xamarin.com/api/namespace/Xamarin.Forms/

News API – http://newsapi.org/

Visual Studio – http://visualstudio.com/

Xamarin Studio – https://www.xamarin.com/download

xamarin.forms mobile application development using c#

Software