Skip to main content

How to Create a CrossPlatform Mobile App Using Xamarin Forms -Part 1

What is Xamarin?

Xamarin is a Microsoft technology based platform.Three types of projects can be created through Xamarin.

1. Xamarin.Forms

2. Xamrin.iOS

3. Xamrin.Android

A simple illustration diagram is shown below.

Image removed.

System Requirements for Xamarin Developments

If you are familiar with Visual Studio 2017(Windows) or Visual Studio for Mac (Mac OS) and you are almost ready for the Xamarin App developments this article will describe the additional requirements.

Create your first Xamarin.Forms App

For Mac Users, you can follow the exact steps below. Windows Users also can do the same, but steps are slightly different.

Open Visual Studio For Mac

1. Click ÔÇ£FileÔÇØ Menu from Top navigation bar

2. Click on ÔÇ£New SolutionÔÇØ

3. In the Left pane click on ÔÇ£AppÔÇØ under ÔÇ£MultiplatformÔÇØ menu. You will end up with ÔÇ£Choose a template for your new projectÔÇØ window

Image removed.

4. Select ÔÇ£Forms AppÔÇØ under ÔÇ£Xamarin.FormsÔÇØ category and click ÔÇ£NextÔÇØ

5. Then navigate to ÔÇ£Configure your Forms AppÔÇØ window

Image removed.

6. Enter name for your App (News) and organization identifier (unique value). Under ÔÇ£Shared CodeÔÇØ section check ÔÇ£use .NET StandardÔÇØ radio button. Then click ÔÇ£NextÔÇØ

7. The Preview Screen will popup and Add Location for Save your project. If you are willing to use it, check ÔÇ£Use git for version controlÔÇØ or other wise uncheck it. Then Click on ÔÇ£CreateÔÇØ

Image removed.

8. Now your first Xamarin.Forms project is ready for coding. Your project structure should be as follows. Four projects will be created including UITest layer.

Image removed.

Note: MVVM based architecture will be created using the above procedure. Few files will be auto generated and will keep those as it is for now.

What We Are Going To Do Now:

In this tutorial (Part 1) we are going to create a simple ÔÇ£User LoginÔÇØ Form with validations through basic Xamarin.Forms concepts.

Below Xamarin.Forms concepts will be used in Part 1

1. Create a simple UI using StackLayout

2. Use Behaviours

3. Use Bindable Properties

4. Use content page resources

5. Use value converters(Object Converters)

OK, Lets Start

If you are familiar with above concepts and havenÔÇÖt more time to go through a detailed explanation, this is the final output.

Otherwise go through the below, step by step.

First add a ÔÇ£LoginPageÔÇØ for our app

1. Right click on Views folder under News project and click on Add > New File

2. ÔÇ£New FileÔÇØ window will open and click on ÔÇ£Forms Content View XAMLÔÇØ file

3. Name it as ÔÇ£LoginPageÔÇØ and click on ÔÇ£NewÔÇØ button. It will create a empty XAML page under ÔÇ£ViewsÔÇØ folder like below

Image removed.

When we design a page from Xamarin.Forms we have to create a layout (in Native developments this is called "View"). Simply start using ÔÇ£StackLayoutÔÇØ

Then we need a way to enter username, password and submit Button. In Xamarin.Forms for entering text values we can use ÔÇ£ EntryÔÇØ and for Submit values we can use ÔÇ£ButtonÔÇØ.

ÔÇ£UserNameÔÇØ entry will look like below. Several predefined properties are there such as ÔÇ£WidthrequestÔÇØ ,ÔÇ£HeightRequestÔÇØ,etc. For special purposes we can create our own ÔÇ£Bindable PropertiesÔÇØ  which will be discussed in a later part of this article.

<Entry x:Name="UsernameEntry" Placeholder="Username" HeightRequest="44" HorizontalOptions="Center" WidthRequest="300"> </Entry>

Replace ÔÇ£LoginPage.xamlÔÇØ code with below.

https://gist.github.com/roshanchaminda/f843367b2bf64fe68d5e9254b5596652

Then open ÔÇ£App.xaml.csÔÇØ file under ÔÇ£NewsÔÇØ project. And Set Main page as LoginPage like below.

MainPage = new LoginPage();

Now RightClick on ÔÇ£News.iOSÔÇØ project in Solution pane and click ÔÇ£Set As Startup ProjectÔÇØ. Then Run your App on Simulator(Run > Start Debugging on top menu).

Note: For Windows users you can set ÔÇ£News.AndroidÔÇØ project as Startup project if you havenÔÇÖt Mac on your network.

Image removed.

Basic view is ready, now we need to implement simple validation for this form. For that kind of functionality implementations we can use ÔÇ£BehaviorsÔÇØ

Right Click on ÔÇ£NewsÔÇØ project and Add a folder called, ÔÇ£BehaviorsÔÇØ. Then click on that folder and create an empty class as ÔÇ£ EmailValidatorÔÇØ. To use this class through common reference we'll change the namespace of ÔÇ£EmailValidatorÔÇØ class from ÔÇ£ News.BehaviorsÔÇØ to ÔÇ£ NewsÔÇØ. Replace your EmailValidator class code using below code.

As a summery we have done below implementations inside:

1. According to Behavior introduction, ÔÇ£OnAttachedToÔÇØ and ÔÇ£OnDetachingFromÔÇØ methods implemented (override) for text changed event

2. ÔÇ£IsValidÔÇØ Bindable Property has declared. This will return us whether entered value is valid

3. Regular Expressions has used for validate input value

4. Inside TextChanged event, text color will be set based on ÔÇ£IsValidÔÇØ property

https://gist.github.com/roshanchaminda/0c9046712f3c44f3aede395413d50299

Add these two reference top of the page

using System.Text.RegularExpressions;

using Xamarin.Forms;

Use same procedure and add ÔÇ£ PasswordValidatorÔÇØ class file inside ÔÇ£BehaviorsÔÇØ folder sand replace using below code.

https://gist.github.com/roshanchaminda/2e0f296720ccf88dfb4bc72861fdfa33

Now we can use above Behaviors to validate our LoginPage inputs.

For access C# class from XAML file, we have to declare an XAML namespace with a prefix. Add below reference to ÔÇ£ContentPageÔÇØ like adding a property.

xmlns:local=ÔÇØclr-namespace:News;assembly=NewsÔÇØ

Then add Behavior for ÔÇ£UserNameÔÇØ entry as follows:

<Entry x:Name="UsernameEntry" Placeholder="Username" HeightRequest="44" HorizontalOptions="Center" WidthRequest="300"> <Entry.Behaviors> <local:EmailValidator x:Name="EmailValidator" /> </Entry.Behaviors> </Entry>

Add Behavior for ÔÇ£PasswordÔÇØ Entry using same way.

Once you are done, LoginPage.xaml looks like below:

 

Now compile and run your code through simulator. Enter some value for UserName text box, that should be displayed in RED. If you add correct email, text should be converted to BLACK.

Now will try to add ÔÇ£correctÔÇØ and ÔÇ£wrongÔÇØ indicators (images) in front of text box based on validation result. For that we can use ÔÇ£Value ConvertersÔÇØ.

For Xamarin.Forms we have ÔÇ£ImageÔÇØ control for display images. Display image using ÔÇ£ImageÔÇØ control, need an image file name (string) based on return boolean value from behavior.

Right Click on ÔÇ£NewsÔÇØ project and add a folder called ÔÇ£ConvertersÔÇØ. And then add a class file called ÔÇ£BooleanToStringConverterÔÇØ. Change namespace from ÔÇ£ News.ConvertersÔÇØ to "NewsÔÇØ. Replace existing code with below one.

https://gist.github.com/roshanchaminda/42e332c927ef9dd28a2e6db6adf9630c

Then create ÔÇ£success.pngÔÇØ and ÔÇ£error.pngÔÇØ images and place inside Resources folder in ÔÇ£News.iOSÔÇØ project. For ÔÇ£News.AndroidÔÇØ project, open ÔÇ£ResourcesÔÇØ folder and then open ÔÇ£drawableÔÇØ or ÔÇ£mipmap-hdpiÔÇØ folder and place two images.

To use converters, we have to use ÔÇ£ResourceDictionaryÔÇØ which is used for sharing resources in application. Add below code to just above the ÔÇ£ContentPage.ContentÔÇØ start tag.

<ContentPage.Resources> <ResourceDictionary> <local:BooleanToStringConverter x:Key="BooleanToStringConverter"/> </ResourceDictionary> </ContentPage.Resources>

Then we have to add our ÔÇ£successÔÇØ and ÔÇ£errorÔÇØ images. Add an image tag just below the ÔÇ£UserNameÔÇØ entry as below.

<Image Source="{Binding Source={x:Reference EmailValidator}, Path=IsValid,Converter={StaticResource BooleanToStringConverter}}" HeightRequest="30"/>

In above code, we have set image ÔÇ£SourceÔÇØ property through ÔÇ£BehaviorÔÇØ reference.

If you want more details regarding this image ÔÇ£SourceÔÇØ,

Source = {x:Reference EmailValidator}?ÔÇö?ÔÇ£EmailValidatorÔÇØ Behavior class as image source.

Path=IsValid?ÔÇö?Bindable Property in ÔÇ£EmailValidatorÔÇØ Behavior class. This value will be used for Converter.

Converter={StaticResource BooleanToStringConverter}?ÔÇö?Converter which is used for check property in ÔÇ£PathÔÇØ.

Once you are done, Your complete ÔÇ£LoginPage.xamlÔÇØ code should look like below.

https://gist.github.com/roshanchaminda/33b64de87087cc332d1aff1b46a42efc

Now you are ready to check what you have done so far.

Compile your project and Run. You end result should be as follows. Same result should be displayed in Android app as well.

Image removed.

 

n next article (Part 2) we will discuss,

1. Complete UI using ÔÇ£ScrollViewÔÇØ And ÔÇ£AbsoluteLayoutÔÇØ

2. Add Login Functionality through API Request

3. Use local database for store values

4. Use vertical ListView to display Items

 



12 / December / 2018 xamarine, Android, IOS by Roshan Chaminda

LEAVE A COMMENT







POST COMMENTS


© 2019 Creative Software. All Rights Reserved | Privacy | Terms of Use