Skip to main content

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

In the previous article we discussed how to create a Xamarin.Forms application. In this article we are going to discuss,

  1. Complete UI using “ScrollView” and “AbsoluteLayout”
  2. Complete Login Functionality
  3. Add the Loading icon in a page
  4. Use vertical ListView to display Items

Let’s start.

In Part 1, we created a simple UI for the login page. Now we will try adding a background color and logo for that page for a better look and feel.

We will start by adding a Logo into the Login page. In the login page StackLayout is used to display the “UserName” and the “Password”. Then we have to wrap it using another StackLayout. After that we can place our Logo on top of the page.

In Xamarin Forms, StackLayout has a property called “ BackgroundColor”. Set that value as “Gray”. To display the image, we can use “Image” component available in the Xamarin.Forms. Place your logo image inside the “Resources” folder, which is available under “News.iOS” project. Then add that image to the project following the below mentioned steps;

Right click on “Resource” >> “Add” >> “Add Files From Folder” >> Click Open >> Add your image(news_logo.png”) >> OK

Then use image tag as below.

Once done, compile and run your project. You should get a screen like below.

                                                          

To fix above alignment issues and display progress icon (later), we have to use another useful complex layout called “AbsoluteLayout”.

Wrap your UI components using the “AbsoluteLayout” and set the layout positions and the size (AbsoluteLayout.LayoutBound) as follow:

To utilize the complete width and height of the device screen, use the outer StackLayout position and size as AbsoluteLayout.LayoutBounds=”0,0,1,1" and AbsoluteLayout.LayoutFlags=”All”.

Once the above properties are set, compile and run the code. Now rotate your device. Logo will be displayed, but other controls will not be, hence we have to use “ScrollView” control to enable scrolling.Once you add “ScrollView”, the complete code will look like below.

When you compile and run your code, you should receive the below screen:

                                                               

Now we can implement the login feature.Since we are using MVVM pattern, we have to create “UserInfo” model to represent user basic information. Right click on Model folder and add new class file called “UserInfo”. Then add “Username” and “Password” fields to it. 

Then we will execute ViewModel to implement the login feature. Right click on “ViewModel” folder and add new class file called “LoginViewModel”. Inherit it through autogenerated “BaseViewModel”. Then create a “UserInfo” Model object inside the view model. Then we need to handle Login button click event. There are several ways to do this, here we will use Command property. Once you complete, up to now your ViewModel should be like below.

Note: Just go through the “BaseViewModel” and “IDataStore” which are autogenerated. “BaseViewModel” has inherited “INotifyPropertyChanged” Interface which is used for maintaining property changed events. Further more “IDataStore” Generic Interface has declared basic CRUD operations. 

For capturing “UserInfo” object property changes, we have used “OnPropertyChanged()” event.

Inside ExecuteLoginCommand() method, we should implement Authentication part. In MVVM pattern we can use Service class for this which is going to manage all CRUD operations.

Add a class file inside “Service” folder and name it as “LoginDataStore”. Then inherit it from Autogenerated “IDataStore” Interface and Implement interface. Then complete the basic CRUD operations. Once you are done, the complete code should be as follow.

Note: Hardcoded user object value is used since there is no pre-generated API for access user details.

Now we can complete “ ExecuteLoginCommand” event inside the “LoginViewModel”. First get User object through our “LoginDataStore” service. Then we can compare it with user inputs through login page.

Note: If we having web server for manage backend data, we can use web service(Web API) for authenticate user . Base on that Authenticate response we can save “AuthenticateToken” in device memory. Then in next login attempt we can use that token value.

Once done, your “ ExecuteLoginCommand” event should be as follows;

Login feature development part also ends with a dummy record. Now compile and run your code. Once you enter successful credentials you will end up in Autogenerated “ ListView” page. Otherwise an error message will popup.

Note: we have implemented validations through “Behaviors”. But when we enter wrong credentials still it is executing login button code. If we are going to handle that , we have to validate our “UserInfo” Model through “DataAnnotations” and “INotifyDataErrorInfo”. We are not going to do discuss that in this article.

At last we are going to add Loading icon for login page. For this we can use Xamarin control called “ ActivityIndicator” .

Open your “LoginPage.xaml” and copy below code to just below the main “StackLayout”.

Compile and Run your code, you will see that Red Spinning wheel in the middle of the page. Now we have to show/hide that based on the page loading and button click events delay.

Create a boolean property called “PageIsBusy” inside the “LoginViewModel” class.

Then bind that property to outer AbsoluteLayout “IsVisible” property which is wrapped “ActivityIndicator” .

Then use that “PageIsBusy” property inside “LoginViewModel” constructor and “ ExecuteLoginCommand” event. You can find final working solution here.



29 / January / 2019 Xamarin Roshan Chaminda

LEAVE A COMMENT







POST COMMENTS


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