Based on your valuable feedbacks, we’ve compiled a list of Crosslight essential walkthroughs that will help you get started with Crosslight in no time. These topics cover a wide range of development scenarios, such as creating your first Crosslight app from a Xamarin template, performing navigation from the ViewModel, executing commands, and much more. This blog post aims to give you a rough overview on each walkthrough has to offer.

You can find these walkthroughs under Getting Started with Crosslight section in the Developer Center. Without further ado, let’s get started.

Introduction to Crosslight NuGet Packages

Starting from Crosslight 5, all Crosslight dependencies are now streamlined to NuGet package manager for a more streamlined dependency management and allows for more timely Crosslight updates and hotfixes.

Now you no longer have to deal with tedious references when working with Crosslight. This guide provides a comprehensive overview on how to work with the NuGet packages on both Xamarin Studio Mac as well as Visual Studio Windows, such as installing, updating and restoring NuGet packages.

Working with Crosslight NuGet Packages

Similar to the previous guide, this walkthrough provides a more hands-on approach to working with NuGet packages with step-by-step guidances and rich visual walkthrough.

Creating Your First Crosslight App

This guide will walk you through the process of converting a simple Xamarin template that uses shared PCL project and transform it into a working Crosslight project.

It is highly recommended to follow this walkthrough if you’re coming from a Xamarin background. After you’ve finished this project, you’ll get a rough idea of how Crosslight works and its excellent design pattern.

Creating New Project with Crosslight Project Wizard

If you’re using Visual Studio for mobile development, then this guide will help you create your first Crosslight app in no time with the Crosslight Project Wizard.

With Crosslight Project Wizard, you can easily create various quick-start projects easily such as the Blank template, Master-Detail template, Navigation Drawer template, Business template, Localizable Business template as well as the Multi-Page template.

Creating a Simple Tip Calculator

Once you’ve finished creating a starter Crosslight app, it’s best to start working with simplest data binding capabilities available in Crosslight, and there’s no better app to learn it from other than building a simple tip calculator.

This simple app will help you understanding how to perform a centralized data binding in the PCL project, and process your app’s business processes from the ViewModel, making it more centralized than ever.

Performing Navigation

In this guide, you’ll learn how to perform various screen navigation by utilizing Crosslight’s built-in navigation service, which will be invoked directly from the ViewModel. This is one of the essential knowledge needed to build a mobile app with Crosslight.

You’ll also learn how to perform various types of navigation, such as push navigation, modal navigation, push navigation and modal navigation with parameters, modal navigation with callback, and navigating to a new ViewModel with Identifier.

Executing Commands

This walkthrough will help you learn how to execute commands with parameters on buttons and bar items.

With Crosslight’s solid MVVM data binding, you’ll learn how to update a button’s state with a flick of a switch, which will update the invalidate the CanExecute state of all commands.

Getting Started with MVVM Data Binding

In this tutorial, you’re going to learn how to perform simple data binding, in MVVM-fashion with Crosslight, such as:

• Binding text to labels and text boxes
• Binding numeric values to slider, text boxes and stepper
• Binding boolean values to switch
• Binding DateTime values to DateTime picker
• Binding image to image view
• Binding simple list of data to a list

Showing Presenters

In this tutorial, you’re going to learn how to use Crosslight Presenters that are built-in to the Crosslight ViewModels, which consists of Action Presenter, Message Presenter, Toast Presenter, Dialog Presenter and Action Toast Presenter. 

These presenters will surely help you display actions and messages to your users without any further hassles.

Accessing Crosslight Mobile Services

Crosslight ViewModels comes with built-in mobile services that are very handy to achieve various native functions of the devices.

In this walkthrough, you’ll learn how to use the following mobile services:

• Browser Service
• Camera Service
• Contact Service
• Local Notification Service
• Location Service
• Mail Service
• Map Service
• Media Library Service
• Media Service
• Messaging Service
• Reachability Service
• Social Service
• Telephony Service

Getting Started with Crosslight Form Builder

When building enterprise mobile apps, you’ll inevitably come across mobile forms. Although it may look simple, building forms that works and render beautifully across platforms often requires tremendous efforts, especially ones that also includes client-side validation support.

Crosslight Form Builder makes this process very easily and seamless, thanks to the intuitive Form Metadata that allows you to build forms in minutes, not days.

Getting Started with Crosslight Charting

Starting with Crosslght 4, Crosslight comes with a handy UI component that is very much sought after by mobile developers, which is mobile charting capabilities.

With Crosslight Charting, you can now easily build cross-platform mobile charts quickly and easily, with full MVVM capabilities. Just bind your data right within the ViewModela, and voila, your mobile chart is done.

Create CRM App with Crosslight AppFramework and WebApi

Now that you’ve managed to build basic mobile apps, now it’s time to take it up a notch. In this tutorial, you’ll learn how to create a simple mobile CRM app that works with Microsoft WebAPI.

Thanks to Crosslight’s built-in tooling support, the process of creating shared models between client and server is made seamless. Simply save your EDMX file from Visual Studio and let the code generator works its wonders.

Create a To-Do App with SQLite Storage

Now that you’ve managed to create a simple CRM app, in this tutorial you’ll learn how to create a simple, working to-do app that you can use on a daily basis.

This To-Do app will allow you add and complete tasks and saves right into SQLite mobile database. With Crosslight, you’ll learn how to achieve this scenario effortlessly.

Create a To-Do app with Data Synchronization

Next, you’ll upgrade this project to include cross-platform data synchronization with WebAPI. With this tutorial, you’ll learn how to create a cross-platform to-do app that syncs data to each other.

This app also comes with pull-to-refresh support to directly refresh and syncs the data.

Wrapping Up

Not stopping here, these list of walkthroughs will continue to grow and hopefully will become a very valuable resources for Crosslight developers who are just starting with the framework.

Till next post,
Nicholas Lie

Starting from Premier Studio 2016, WebUI took a completely new look and feel with the new Unified Theming made for ASP.NET. As the name implies, Unified Theming allows you to impose a unified design language that applies to the entire suite of WebUI components with a modern CSS theming language that combines mixins and overridable variables.

This blog post is simply made to show you how to create a new Unified Theming project using the new project template that comes with Premier Studio 2016 or higher.

What You Need

To follow this tutorial, simply install Premier Studio 2016 or newer. You’ll also need to have Visual Studio 2012 or higher installed on Windows 7 or newer. If you haven’t installed it yet, please download it from our site. Or, simply login to your account.

Let’s Do This

Simply open up your Visual Studio instance, then hit New, Project. From the dialog that appears, choose Visual C#, Intersoft Solutions, ASP.NET, then choose Intersoft Unified Empty Web Application.

Enter the necessary details such as the project name, location and solution name. Hit OK when you’re done. To run this project, simply right-click on the Default.aspx file, then choose View in Browser.

You’ll get the following screen.

This new Unified Theming template is intuitively design so as to provide basic ideas on how to get started quickly with a new WebUI Unified Theming application, complete with working data bindings for WebCombo, WebInput, WebGrid, and more. At the bottom part of this page we’ve also provided several business-inspiring samples to help inspire your next big web applications.

Wrapping Up

To learn more what you need to do to use the new Unified Theming in your existing applications, check out the documentation. Or, if you prefer to try migrating an existing WebUI sample, for example the WebGrid’s Enterprise sample, I highly recommend you to check out my previous blog post, where I’ve covered a step-by-step walkthrough on how to migrate the sample to use Unified Theming.

To get a better grasp on the Unified Theming feature and what customizable areas available for each control, feel free to check out these great documentations:

• WebGrid Modern Theme Style Reference
• WebCombo Modern Theme Style Reference
• WebInput Modern Theme Style Reference
• WebDesktop Modern Theme Style Reference
• WebScheduler Modern Theme Style Reference
• WebEssentials Modern Theme Style Reference
• WebTextEditor Modern Theme Style Reference
• WebTreeView Modern Theme Style Reference

We can’t wait to see what you’ve built with this new Unified Theming feature. Let us know in the comments section below!

Till next post,
Nicholas Lie

In my last post, I wrote an in-depth, step-by-step tutorial on how to create you can migrate a Xamarin.Forms sample and turn it into a Crosslight solution. The process might seem intricate at first, but once you understood the basics of Crosslight and its design pattern, you’ll be able to do things very quickly. That’s made possible as Crosslight enforces clear separation-of-concerns and strong and extensible design patterns.

In this post, I’m going to modify the login screen from the finished sample in the previous blog post to use the native UI views instead of Crosslight Form Builder. Hopefully at the end of tutorial you’ll have rough ideas how to bind data to native UI views with Crosslight, and gain insights how to take advantage of many different Crosslight features to achieve a goal in the most efficient way.

Starting Off

To follow this tutorial perfectly, you’ll need clone this repository. This is the finished sample from the previous blog post. To run this sample, you’ll need to restore the necessary NuGet packages. After you’ve managed to clone and run this sample, you’re ready to begin. If you have any trouble in restoring the NuGet packages, consult the documentation.

Modifying the Android Login View

First, open up the LoginFragment.cs located inside the XamarinFormsSample.Android/Fragments folder. Replace the contents with this code.

using System;
using Android.Runtime;
using XamarinFormsSample.Core.BindingProviders;
using XamarinFormsSample.Core.ViewModels;
using Intersoft.Crosslight;
using Intersoft.Crosslight.Android.v7;

namespace XamarinFormsSample.Android.Fragments
{
    /// <summary>
    ///     The main Fragment contained inside LoginActivity.
    ///     This class is decorated with the ImportBindingAttribute that indicates
    ///     the binding provider to be used with this Activity.
    /// </summary>
    [ImportBinding(typeof(LoginBindingProvider))]
    public class LoginFragment : Fragment<LoginViewModel>
    {
        #region Constructors

        /// <summary>
        ///     Initializes a new instance of the <see cref=“LoginFragment“ /> class.
        /// </summary>
        public LoginFragment()
        {
        }

        /// <summary>
        ///     Initializes a new instance of the <see cref=“LoginFragment“ /> class.
        /// </summary>
        /// <param name=“javaReference“>The java reference.</param>
        /// <param name=“transfer“>The transfer.</param>
        public LoginFragment(IntPtr javaReference, JniHandleOwnership transfer)
            : base(javaReference, transfer)
        {
        }

        #endregion

        #region Properties

        /// <summary>
        ///     Gets the content layout identifier.
        /// </summary>
        /// <value>The content layout identifier.</value>
        protected override int ContentLayoutId
        {
            get { return Resource.Layout.main; }
        }

        #endregion

        #region Methods

        /// <summary>
        ///     Initializes this instance.
        /// </summary>
        protected override void Initialize()
        {
            base.Initialize();

            this.IconId = Resource.Drawable.ic_toolbar;
        }

        #endregion
    }
}

The FormFragment requires 2 default constructors, which is becoming the new standard for Fragment initialization when using the new Material library. The ContentLayoutId defines the layout file that will be used to render this screen. Then the IconId is provided for the Toolbar icon that will be used with this view. Then create the main.axml layout inside the XamarinFormsSample.Android/Resources/layout folder. Use the following layout.

<?xml version=“1.0“ encoding=“utf–8“?>
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android“
    android:orientation=“vertical“
    android:layout_width=“match_parent“
    android:layout_height=“match_parent“
    android:gravity=“center“>
    <LinearLayout
        android:orientation=“vertical“
        android:layout_width=“match_parent“
        android:layout_height=“match_parent“
        android:layout_gravity=“center“
        android:gravity=“center_vertical“
        android:layout_marginLeft=“30dp“
        android:layout_marginRight=“30dp“>
        <android.support.design.widget.TextInputLayout
            android:layout_width=“match_parent“
            android:layout_height=“wrap_content“>
            <EditText
                android:id=“@+id/TxtUserName“
                android:layout_height=“wrap_content“
                android:layout_width=“match_parent“
                android:layout_gravity=“center“
                android:singleLine=“true“
                android:hint=“@string/hint_username“ />
        </android.support.design.widget.TextInputLayout>
        <android.support.design.widget.TextInputLayout
            android:layout_width=“match_parent“
            android:layout_height=“wrap_content“>
            <EditText
                android:id=“@+id/TxtPassword“
                android:layout_height=“wrap_content“
                android:layout_width=“match_parent“
                android:layout_gravity=“center“
                android:singleLine=“true“
                android:hint=“@string/hint_password“ />
        </android.support.design.widget.TextInputLayout>
        <Button
            android:id=“@+id/BtnLogin“
            android:text=“@string/login“
            android:layout_gravity=“center“
            android:layout_width=“match_parent“
            android:layout_height=“wrap_content“ />
    </LinearLayout>
</LinearLayout>

Similar to previous login form, this screen contains two EditTexts, with the ID TxtUserName and TxtPassword respectively. These two EditTexts are wrapped in inside a TextInputLayout. This is a relatively new layout available in Material Design that provides intuitive hinting when used inside a EditText. Next, we’re going bind these textboxes to the ViewModel using the BindingProvider.

Create a new BindingProvider inside the XamarinFormsSample/BindingProviders folder and call it LoginBindingProvider. Use the following code.

using Intersoft.Crosslight;

namespace XamarinFormsSample.Core.BindingProviders
{
    public class LoginBindingProvider : BindingProvider
    {
        #region Constructors

        public LoginBindingProvider()
        {
            this.AddBinding(“TxtUserName“, BindableProperties.TextProperty, “LoginInfo.UserName“, BindingMode.TwoWay);
            this.AddBinding(“TxtPassword“, BindableProperties.TextProperty, “LoginInfo.Password“, BindingMode.TwoWay);
            this.AddBinding(“BtnLogin“, BindableProperties.CommandProperty, “LoginCommand“);
        }

        #endregion
    }
}

This is the BindingProvider that provides data binding definitions between the View and the ViewModel. We’re basically binding both of the views with ID TxtUserName and TxtPassword, bind their Text property to the LoginInfo.UserName in the ViewModel. Then we also bind the view with ID BtnLogin to the LoginCommand.

One question we often heard is, why the binding provider is not needed when using Crosslight Form Builder while it’s needed in native views binding? That’s because the form metadata automatically map the defined property to the underlying model, and a binding is created behind the scene as the Form Builder generates the views at runtime.

Since we’re no longer using Form Builder for the login screen, you can safely delete the LoginInfo.FormMetadata file found inside the XamarinFormsSample/Forms folder.

Next, we need to modify the LoginViewModel a bit. Open up the LoginViewModel.cs file inside the XamarinFormsSample/ViewModels folder and modify the ExecuteLogin method. Replace it with the following snippet.

private void ExecuteLogin(object parameter)
{
    if (!string.IsNullOrEmpty(this.LoginInfo.UserName) && !string.IsNullOrEmpty(this.LoginInfo.Password))
        this.NavigationService.Navigate<EmployeeListViewModel>();
    else
        this.ToastPresenter.Show(“Please enter any username and password.“);
}

Also, change the base class of this ViewModel to ViewModelBase instead of EditorViewModelBase. EditorViewModelBase is used when you’re taking advantage of Crosslight Form Builder’s capabilities. To learn more about suitable ViewModels to use when designing Crosslight applications, see Selecting a ViewModelBase Class to Get Started.

This is a similar, but a more manual validation that you can use to validate whether the user has entered any username or password before performing login. One more thing, you can now remove the Validate method inside the Login.cs located inside the XamarinFormsSample/Models folder, since we’re not using any built-in validation methods.

Now you’re ready to see this feature in action. When you run the project, you should get the following result.

Now that you’ve finished the Android sample, let’s move on to iOS.

Modifying the iOS Login View

To modify the iOS sample, let’s begin by modifying the LoginViewController located inside XamarinFormsSample.iOS/ViewControllers folder. Use the following code.

using XamarinFormsSample.Core.ViewModels;
using XamarinFormsSample.Core.BindingProviders;
using Intersoft.Crosslight;
using Intersoft.Crosslight.iOS;
using System;

namespace XamarinFormsSample.iOS
{
    [Storyboard(“MainStoryboard“)]
    [ImportBinding(typeof(LoginBindingProvider))]
    public partial class LoginViewController : UIViewController<LoginViewModel>
    {
        #region Constructors

        /// <summary>
        ///     Initializes a new instance of the <see cref=“LoginViewController“ /> class.
        /// </summary>
        /// <param name=“intPtr“>The int PTR.</param>
        public LoginViewController(IntPtr intPtr)
            : base(intPtr)
        {
        }

        #endregion

        #region Properties

        public override bool HideKeyboardOnTap
        {
            get
            {
                return true;
            }
        }

        #endregion
    }
}

As you can see, for the LoginViewController, all you need to do is provide a default constructor that takes in one IntPtr object, then decorate the ViewController with the StoryboardAttribute. The “MainStoryboard” string inside the StoryboardAttribute indicates the name of the storyboard file that this ViewController will use.

Also notice that we longer subclass from the UIFormViewController, but from a simpler UIViewController instead. Since we already have the ViewModel and BindingProviders ready, all you need to is create the Storyboard file for this view. Begin by creating a new folder called Views inside the iOS project. Then inside the newly created folder, create a new Storyboard file called MainStoryboard.storyboard. Follow this video to learn how to create a Storyboard file.

Basically, we’re creating two UITextFields with outlets set to TxtUserName and TxtPassword. Then we’re placing a UIButton underneath the textboxes, with outlet set to BtnLogin, all stacked inside a StackView. If you prefer to use the finished storyboard file, you can simply use the file here and replace it onto your project.

Before you can run this project, you have to make several adjustments, such as ensuring the Target Deployment for this project is set at least to iOS 9 or higher, this is the due to the usage of the StackView. To do this, simply open the Info.plist file inside the XamarinFormsSample.iOS project.

After you’ve made these adjustments, you should be ready to go. Also, if you try to run this project and it suddenly closes on its own, that means you haven’t set the compatibility mode to 64-bit for this project. To do this, simply double-click the iOS project and go to iOS Build and ensure that the build configuration for Debug | iPhone Simulator has been set to the following.

After running the sample, you should get the following result.

Samples

You can find the finished sample to this tutorial here. Simply restore the NuGet packages and you’re ready to go.

Wrapping Up

Hopefully this tutorial gives you a brief idea on how data binding works in Crosslight, especially when you’re binding to native views. By using the native views, you have greater flexibility on how to layout your screen while continue enjoying 100% UI logic sharing.

At this point, you’ve learned two approaches to build data-bound views in Crosslight. The first is through Form Builder, and the other is through native views. Thankfully, you don’t have to choose, as you can always mix both of them in your Crosslight project. However, you might be wondering which one does better than the other, and when to use them. The rule of thumb is, use Form Builder when you need to rapidly build complex data entry screen such as search screens and editing screens. As for native views, it’s best for non editable screens such as detail screen which typically require custom layout and design. Native views can also be considered for input screens with fairly few text input such as login screen which is usually highly customized to represent the app’s branding and styles.

If you’d like to explore further, I highly recommend you to go through each of these topics to quench your thirst:

• Building Rich Data Entry Form
  • If you’d like to get started with the Form Builder, I highly recommend you to look at the two-part blogpost series I wrote up: Getting Started with Crosslight Form Builder and Extending Crosslight Form Builder.
• Working with iOS Universal Storyboards
• Crosslight Android Material Development

Don’t hesitate to explore the child pages on the documentation as well, as it contains more detailed information on each particular subject. Hopefully this tutorial helps you on grasping the concepts used in Crosslight development and accelerate in building gorgeous cross-platform apps, without sacrificing any user experiences along the way.

Cheers,
Nicholas Lie

Many mobile developers who are just starting out with Crosslight often asked us with this question: I have an existing Xamarin.Forms app and would like to get started with Crosslight. How can I do that? This post aims to provide the answer to that question. However, I’d have to be straightforward to you. There’s no easy way, since Xamarin.Forms isn’t compatible with Crosslight at all.

Xamarin.Forms vs. Crosslight

When should you build with Xamarin.Forms? According to Xamarin’s site:

Well, in our opinion, the best time to use Xamarin.Forms is never to use it all. Why? There are two reasons: user experience and design pattern.

The User Experience

Sure, with Xamarin.Forms you can create an app that works. Even though you’re building a simple app that works, developers should at least pay attention to user experience. If the user experience is bad, prepare to receive 4-or-less-stars all over the App Store and Play Store. How bad is the user experience with Xamarin.Forms? Here’s two quick videos taken when running the XamarinFormsSample from Xamarin’s Introduction to Xamarin.Forms. One for Android:

And another for iOS:

What do you think? I’m not even sure where to begin. Xamarin.Forms tries to generalize the user experience for all platforms, which is not a good idea. When the app is first launched, a blank table view is shown. And then when the + button is tapped, a login form is shown. Why not display a login form at the beginning instead? On iOS, I’m not quite sure I’ve seen an app that places the Save button side-by-side with the Delete button.  Typically, they’re placed on the navigation controller as bar items. What’s worse, when I try to rotate the iOS sample, the bottom section below the image is practically unusable. In Android, when I rotate the device, I’m automatically kicked back out to the ListView screen and the list seems to be corrupted. Magic. Let’s compare them with the converted sample to Crosslight.

And here’s on the one on Android.

I’ll let you be the judge. Take a look with the forms created with Crosslight Form Builder.

With the Form Builder, you can easily create beautiful forms that complies with each platform’s user experience guidelines. And they’re all working correctly without any annoying user experience found in Xamarin.Forms. Buttons are correctly placed and rotation works perfectly. This is what a “minimal-working” app should look like.

The Design Pattern

Let’s take a brief look at the Xamarin.Forms code for the editor screen. Click on the image to see the large version.

As you can see, Crosslight Form Builder showcases a better pattern where you design a form focused more on the model, rather than the View, as the View approach will not produce native-looking forms when used in cross-platform fashion. With Crosslight, developers are focused on models, making the View loosely-coupled. This will also lead in better long-term extensibility and clearer separation of concerns. Also, you’ll notice that the code to build forms are much lighter and shorter.

It’s important to note that Form Builder is only one of many features available in Crosslight. In addition to Form Builder, developers can use Crosslight’s advanced data binding features to bind native views to a shared ViewModel and enjoy 100% UI logic reuse. However, this post specifically highlights the Form Builder feature to provide a comparable approach to Xamarin Forms.

In this tutorial, I’m going to convert the existing sample XamarinFormsSample to Crosslight. In high-level overview, here’s what we’re going to accomplish:

• Add bootstrapper files for Android.
• Remove Xamarin.Forms references.
• Begin creating the views and ViewModels
• Add bootstrapper files and views for Android.
• Add bootstrapper files and views for iOS.

Sounds good? Let’s begin.

What You’ll Need

To accomplish this tutorial perfectly, you’ll need to download the initial project from Xamarin’s website. Grab it here. Extract the files and use only the XamarinFormsSample project.

Open the .sln file and we’ll start from there. If you’re on Mac, you’ll need to have your Mobile Studio 2016 or higher installed on your Mac, since we’re going to be installing NuGet references via Xamarin Studio.

If you’re on Windows with Visual Studio, you should be able to follow this tutorial through without any hassles, since NuGet package management is built-in right into Visual Studio. You’ll also need to use at least Crosslight 5.0.5000.569 or higher. This package is available in the NuGet repository. We’ll add this package in the next step.

Install Crosslight Packages

Let’s begin by installing the necessary Crosslight references to these projects. If you’re on Mac, start by opening the Intersoft Package Console Extension from Xamarin Studio.

• Install Intersoft.Crosslight package to all of your projects.
  
• Install Intersoft.Crosslight.Android.v7 to the Android project.
  

If you’re unfamiliar with installing Crosslight NuGet packages, it is highly recommended to check out the docs: Introduction to Crosslight NuGet Packages.

Remove Xamarin.Forms References

As radical as it seems, Crosslight is not designed to work with Xamarin.Forms, and therefore all Xamarin.Forms references have to be removed. Remove these highlighted references from your project.

After you’ve removed these references, make sure to double check the References folder once more, because there might be additional references such as these, which you need to remove as well.

Also, remove the Views folder from the XamarinFormsSample (PCL) project entirely and including the Colours.cs and Fonts.cs.

Also, you might want to remove references to Xamarin.Forms inside the packages.config that exists in each project, so you can easily update Crosslight assemblies for this project without the Xamarin.Forms references re-appearing each time.

Bootstrapping the PCL Project

Add a new folder called Infrastructure inside the XamarinFormsSample (PCL) project and an empty class called AppService.cs.

Then replace the contents as follows.

using XamarinFormsSample.Core.ViewModels;
using Intersoft.Crosslight;

namespace XamarinFormsSample.Infrastructure
{
    /// <summary>
    ///     Crosslight’s shared application initializer.
    ///     This is the perfect place to register repositories, custom services, and other dependencies via IoC.
    /// </summary>
    /// <seealso cref=“Intersoft.Crosslight.ApplicationServiceBase“ />
    public sealed class CrosslightAppAppService : ApplicationServiceBase
    {
        #region Constructors

        /// <summary>
        ///     Initializes a new instance of the <see cref=“CrosslightAppAppService“ /> class.
        /// </summary>
        /// <param name=“context“>
        ///     The application context that implements <see cref=“T:Intersoft.Crosslight.IApplicationContext“ />
        /// </param>
        public CrosslightAppAppService(IApplicationContext context)
            : base(context)
        {
        }

        #endregion

        #region Methods

        /// <summary>
        ///     Called when the application is starting.
        /// </summary>
        /// <param name=“parameter“>The startup parameters.</param>
        protected override void OnStart(StartParameter parameter)
        {
            base.OnStart(parameter);
            //Specify the first ViewModel to use when launching the application.
            this.SetRootViewModel<LoginViewModel>();
        }

        #endregion
    }
}

This is the application service for the Core project, which is the perfect place to register custom services and additional dependencies via IoC. In this project, we won’t add anything except for just simple constructor that takes in one IApplicationContext parameter. This is the default constructor for this class. Also, in the overridden OnStart method, we’ve defined the root ViewModel as LoginViewModel, which we will create in just a moment.

Next, add another empty class inside the Models folder and give it a name of ModelBase.cs.

Replace the content as follows.

using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using Intersoft.Crosslight;

namespace XamarinFormsSample.Models
{
    /// <summary>
    ///     A handy model class that conforms to Crosslight lifecycle.
    ///     Most of the time you will only need to subclass this class when introducing a new domain model.
    ///     Includes validation features as well.
    /// </summary>
    /// <seealso cref=“System.ComponentModel.INotifyPropertyChanged“ />
    /// <seealso cref=“System.ComponentModel.INotifyDataErrorInfo“ />
    /// <seealso cref=“Intersoft.Crosslight.IDataValidation“ />
    public class ModelBase : INotifyPropertyChanged, INotifyDataErrorInfo, IDataValidation
    {
        #region Fields

        private readonly List<ValidationResult> _validationResultList = new List<ValidationResult>();

        #endregion

        #region Properties

        /// <summary>
        ///     Gets a value that indicates whether the entity has validation errors.
        /// </summary>
        public virtual bool HasErrors
        {
            get { return _validationResultList.Count(o => !o.IsSuccess) > 0; }
        }

        #endregion

        #region Methods

        /// <summary>
        ///     Clears all errors.
        /// </summary>
        public void ClearAllErrors()
        {
            List<string> properties = new List<string>();

            foreach (var result in this._validationResultList)
            {
                foreach (var member in result.MemberNames)
                {
                    if (!properties.Contains(member))
                        properties.Add(member);
                }
            }

            _validationResultList.Clear();
            this.OnErrorsChanged(““);

            foreach (string property in properties)
            {
                this.OnPropertyChanged(property);
            }
        }

        /// <summary>
        ///     Clears the error.
        /// </summary>
        /// <param name=“propertyName“>Name of the property.</param>
        public void ClearError(string propertyName)
        {
            var emptyValidationResult = new List<ValidationResult>();

            foreach (var result in _validationResultList)
            {
                if (result.MemberNames.Contains(propertyName))
                {
                    ((IList) result.MemberNames).Remove(propertyName);

                    if (!result.MemberNames.Any())
                        emptyValidationResult.Add(result);
                }
            }

            foreach (var result in emptyValidationResult)
            {
                _validationResultList.Remove(result);
            }

            this.OnErrorsChanged(propertyName);
        }

        /// <summary>
        ///     Gets all errors.
        /// </summary>
        /// <returns></returns>
        public IEnumerable<ValidationResult> GetAllErrors()
        {
            return _validationResultList.Where(o => !o.IsSuccess).ToList();
        }

        /// <summary>
        ///     Gets the validation errors for a specified property or for the entire entity.
        /// </summary>
        /// <param name=“propertyName“>
        ///     The name of the property to retrieve validation errors for; or null or
        ///     <see cref=“F:System.String.Empty“ />, to retrieve entity-level errors.
        /// </param>
        /// <returns>
        ///     The validation errors for the property or entity.
        /// </returns>
        public IEnumerable GetErrors(string propertyName)
        {
            var validationResult = new List<ValidationResult>();

            foreach (var result in _validationResultList)
            {
                if ((string.IsNullOrEmpty(propertyName) || result.MemberNames.Contains(propertyName)) && !result.IsSuccess)
                    validationResult.Add(result);
            }

            return validationResult;
        }

        /// <summary>
        ///     Called when [errors changed].
        /// </summary>
        /// <param name=“propertyName“>Name of the property.</param>
        protected virtual void OnErrorsChanged(string propertyName)
        {
            this.OnErrorsChanged(new DataErrorsChangedEventArgs(propertyName));
        }

        /// <summary>
        ///     Raises the <see cref=“E:ErrorsChanged“ /> event.
        /// </summary>
        /// <param name=“e“>The <see cref=“DataErrorsChangedEventArgs“ /> instance containing the event data.</param>
        private void OnErrorsChanged(DataErrorsChangedEventArgs e)
        {
            var handler = this.ErrorsChanged;

            if (handler != null)
                handler(this, e);
        }

        /// <summary>
        ///     Called when [property changed].
        /// </summary>
        /// <param name=“propertyName“>Name of the property.</param>
        protected virtual void OnPropertyChanged(string propertyName)
        {
            this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
        }

        /// <summary>
        ///     Raises the <see cref=“E:PropertyChanged“ /> event.
        /// </summary>
        /// <param name=“e“>The <see cref=“PropertyChangedEventArgs“ /> instance containing the event data.</param>
        private void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            var propertyChanged = this.PropertyChanged;

            if (propertyChanged != null)
                propertyChanged(this, e);
        }

        /// <summary>
        ///     Raises the property changed.
        /// </summary>
        /// <param name=“propertyName“>Name of the property.</param>
        public void RaisePropertyChanged(string propertyName)
        {
            this.OnPropertyChanged(propertyName);
        }

        /// <summary>
        ///     Sets the error.
        /// </summary>
        /// <param name=“errorMessage“>The error message.</param>
        /// <param name=“propertyName“>Name of the property.</param>
        public void SetError(string errorMessage, string propertyName)
        {
            _validationResultList.Add(new ValidationResult(errorMessage, propertyName));

            this.OnErrorsChanged(propertyName);
            this.OnPropertyChanged(propertyName);
        }

        /// <summary>
        ///     Validate this instance.
        /// </summary>
        public virtual void Validate()
        {
        }

        #endregion

        #region INotifyDataErrorInfo Members

        /// <summary>
        ///     Occurs when the validation errors have changed for a property or for the entire entity.
        /// </summary>
        public event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged;

        #endregion

        #region INotifyPropertyChanged Members

        /// <summary>
        ///     Occurs when a property value changes.
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        #endregion
    }
}

This is the base class used for domain models used with Crosslight projects that supports INotifyPropertyChanged for data binding and also data validation. It is highly recommended that the models used in the project subclasses this ModelBase class. Let’s modify the existing models now and do that. Open up Employee.cs and replace the contents as follows.

using System;
using XamarinFormsSample.Models;

namespace XamarinFormsSample.Model
{
    /// <summary>
    ///     This is a domain object that holds information about a given employee.
    /// </summary>
    public partial class Employee : ModelBase
    {
        #region Constructors

        public Employee()
        {
            ImageUri = “VC“;
        }

        #endregion

        #region Fields

        string _firstName;
        string _imageUri;
        string _lastName;
        string _twitter;

        #endregion

        #region Properties

        public string DisplayName
        {
            get { return string.Format(“{0}, {1}“, _lastName, _firstName); }
        }

        public string FirstName
        {
            get { return _firstName; }
            set
            {
                if (value.Equals(_firstName, StringComparison.Ordinal))
                    return;
                _firstName = value;
                this.OnPropertyChanged(“DisplayName“);
            }
        }

        public string ImageUri
        {
            get { return _imageUri; }
            set
            {
                if (value.Equals(_imageUri, StringComparison.Ordinal))
                    return;
                _imageUri = value;
                this.OnPropertyChanged(“ImageUri“);
            }
        }

        public string LastName
        {
            get { return _lastName; }
            set
            {
                if (value.Equals(_lastName, StringComparison.Ordinal))
                    return;
                _lastName = value;
                this.OnPropertyChanged(“DisplayName“);
            }
        }

        public string Twitter
        {
            get { return _twitter; }
            set
            {
                if (value.Equals(_twitter, StringComparison.Ordinal))
                    return;
                _twitter = value;
                this.OnPropertyChanged(“Twitter“);
            }
        }

        #endregion
    }
}

In this code, note the partial modifier for this class. This is needed for the Crosslight Form Builder metadata, which we’ll create much later in the tutorial. Then modify LoginInfo.cs as well.

using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using XamarinFormsSample.Models;

namespace XamarinFormsSample.Model
{
    /// <summary>
    ///   This class is used to capture login credentials and to perform very simple authentication.
    /// </summary>
    public partial class LoginInfo : ModelBase
    {
        string _password = string.Empty;
        string _username = string.Empty;

        public string UserName
        {
            get { return _username; }
            set
            {
                if (_username.Equals(value, StringComparison.Ordinal))
                {
                    return;
                }
                _username = value ?? string.Empty;
                this.OnPropertyChanged(“UserName“);
            }
        }
        public string Password
        {
            get { return _password; }
            set
            {
                if (_password.Equals(value, StringComparison.Ordinal))
                {
                    return;
                }
                _password = value ?? string.Empty;
                this.OnPropertyChanged(“Password“);
            }
        }

        public override void Validate()
        {
            this.ClearAllErrors();

            if (string.IsNullOrEmpty(this.UserName))
                this.SetError(“Please enter any username.“, “UserName“);

            if (string.IsNullOrEmpty(this.Password))
                this.SetError(“Please enter any password“, “Password“);
        }
    }
}

The Validate method shown in the above snippet code is one of the examples how you can perform validation in Crosslight Form Builder. Here, we set the error message when user did not enter any username or password in the form upon login. Although, there is a more advanced version of form validation with the Crosslight Form Builder, that is to use the EntityMetadataAttribute. However, it will be covered in a separate blog post.

Creating the Login Screen

If you notice from the original sample, user can’t perform any operation unless they’ve performed login. Let’s modify the sample a bit to show the login screen at the initial state. So we’ll prepare the login screen first, then try to create the login screen on the Android platform. We’ll also bootstrap the Android project along the way.

Create a new folder in the XamarinFormsSample (PCL) project and give it a name of ViewModels. Then create a new Crosslight View Model in the folder, called LoginViewModel.

Replace the entire contents as follows.

using Intersoft.Crosslight;
using Intersoft.Crosslight.Input;
using Intersoft.Crosslight.ViewModels;
using XamarinFormsSample.Core.ViewModels;
using XamarinFormsSample.Model;

namespace XamarinFormsSample.Core.ViewModels
{
    public class LoginViewModel : EditorViewModelBase<LoginInfo>
    {
        #region Constructors

        public LoginViewModel()
        {
            this.Item = new LoginInfo();
            this.LoginCommand = new DelegateCommand(ExecuteLogin);
        }

        #endregion

        #region Fields

        private LoginInfo _loginInfo;

        #endregion

        #region Properties

        public DelegateCommand LoginCommand { get; set; }

        public LoginInfo LoginInfo
        {
            get { return _loginInfo; }
            set
            {
                if (_loginInfo != value)
                {
                    _loginInfo = value;
                    OnPropertyChanged(“LoginInfo“);
                }
            }
        }

        #endregion

        #region Methods

        private void ExecuteLogin(object parameter)
        {
        }

        #endregion
    }
}

In the constructor of this ViewModel, we’ve just simply instantiated a new LoginInfo object model, a new DelegateCommand LoginCommand and the Title for the ViewModel. We’ll leave the ExecuteLogin method as empty for now, all we want to accomplish now is displaying the Login screen perfectly. We’ll modify this method later on. Save this file and rebuild try to rebuild the XamarinFormsSample (PCL) project.

You’ll get the error as shown in the shot above. This is because we’ve removed all references to Xamarin.Forms. We can completely remove this file, however, you might want to keep the Employees property in this file somewhere, perhaps in a separate notepad file for now. We’re going to need this for the list of employees later after we’ve successfully created the login module.

Delete App.cs when you’re done. Rebuild the XamarinFormsSample (PCL) project one more time and you should be able to build it now.

Great! Let’s create the Android login view for this ViewModel.

Bootstrapping the Android Project

Before we can use this project, we need to “upgrade” this project to use new project standards. Let’s go through each step carefully, one step at a time.

Download this mipmap.zip file and extract it. These files will be used as the launcher icons for our Android project. Import them into the Resources folder by using Add Existing Folder menu. What these mipmap icons do is provide a better high-res icons for the app launchers. For example, if your device is on the hdpi-display scale, then it will use the xhdpi icons for the icon launchers so that it will look crisp.

Select each mipmap folder so that your project looks as follows.

Start by opening the Android project Options. To do this, right-click on the Android project and choose Options.

In the dialog that appears, choose Main Settings and change the Default Namespace to XamarinFormsSample.Android.

Then choose General, ensure that the Target Framework has been set to Android 5.0 (Lollipop).

Next, in the Android Build menu, the Advanced tab, ensure that the all Supported ABIs are ticked for both Debug and Release configurations.

In the next menu, change the Application icon to @mipmap/Icon. This corresponds to the mipmap folders that we’ve just imported.

You can also ensure that the Target Android version is set to Android 5.0 or higher. Next, open up AndroidManifest.xml located inside Properties folder. Change the current theme to @style/Theme.Crosslight.Material.Light.

Next, create a new Activities folder inside the Android project and move the MainActivity.cs there.

Rename this file as LaunchActivity.cs and replace the contents as follows.

using Android.App;
using Intersoft.Crosslight.Android;

namespace XamarinFormsSample.Android
{
    /// <summary>
    ///     The splash screen Activity. To change the launcher icon for the Android app, simply change the Icon property.
    /// </summary>
    /// <seealso cref=“Intersoft.Crosslight.Android.StartActivity“ />
    [Activity(Label = “XamarinFormSample.Android“, MainLauncher = true, NoHistory = true, Icon = “@mipmap/icon“, Theme = “@style/Theme.Splash“)]
    public class LaunchActivity : StartActivity
    {
    }
}

This is just the splash screen that will be launched when the Android app is run. Since we’ve used a new Theme here, let’s add the styles to our Resources folder. Add a new styles.xml file inside the Resources/values folder.

Add the following entry to the styles.xml file.

<?xml version=“1.0“ encoding=“utf–8“ ?>
<resources>
  <style name=“Theme.Splash“ parent=“android:Theme“>
      <item name=“android:windowBackground“>@drawable/light_splash</item>
    <item name=“android:windowNoTitle“>true</item>
  </style>
</resources>

And also add the following light_splash.png drawable to your Resources/drawable folder.

Next, add a new folder in the root directory of the Android project, called Infrastructure. Then add a new empty class called AppInitializer.

Replace the contents of the AppInitializer.cs as follows.

using XamarinFormsSample.Infrastructure;
using Intersoft.Crosslight;

namespace XamarinFormsSample.Android.Infrastructure
{
    /// <summary>
    ///     Android Application Initializer class.
    /// </summary>
    /// <seealso cref=“Intersoft.Crosslight.IApplicationInitializer“ />
    public sealed class AppInitializer : IApplicationInitializer
    {
        #region Implementation of IApplicationInitializer

        /// <summary>
        ///     Gets the application service based on the current context.
        /// </summary>
        /// <param name=“context“>The context of the application.</param>
        /// <returns>
        ///     The application service.
        /// </returns>
        public IApplicationService GetApplicationService(IApplicationContext context)
        {
            return new CrosslightAppAppService(context);
        }

        /// <summary>
        ///     Initializes and prepares the application for launch.
        /// </summary>
        /// <param name=“appHost“>The application host.</param>
        public void InitializeApplication(IApplicationHost appHost)
        {
        }

        /// <summary>
        ///     Initializes the components required for the application to run properly.
        /// </summary>
        /// <param name=“appHost“>The application host.</param>
        public void InitializeComponents(IApplicationHost appHost)
        {
        }

        /// <summary>
        ///     Initializes the services for the application to start properly.
        /// </summary>
        /// <param name=“appHost“>The application host.</param>
        public void InitializeServices(IApplicationHost appHost)
        {
        }

        #endregion
    }
}

This file is the application initializer for Android, useful for registering custom Android services, views, and Form Builder components. We’ll leave this class as it is for now.

To create the login view for Android, we’re going to take advantage of the Crosslight Form which will help us create the login screen very quickly. Begin by creating a new folder inside the XamarinFormsSample (PCL) project called Forms. Then create a new empty class called LoginInfo.FormMetadata.cs inside the newly created folder. Use the following code.

using Intersoft.Crosslight;
using Intersoft.Crosslight.Forms;

namespace XamarinFormsSample.Model
{
    [FormMetadataType(typeof(LoginInfo.FormMetadata))]
    public partial class LoginInfo
    {
        [Form(Title = “Login“)]
        public class FormMetadata
        {
            [Section]
            public static LoginSection LoginSection;
        }

        public class LoginSection
        {
            [Layout(Style = LayoutStyle.DetailOnly)]
            [StringInput(Placeholder = “Username“)]
            public static string UserName;

            [Layout(Style = LayoutStyle.DetailOnly)]
            [StringInput(Placeholder = “Password“)]
            [Display(Caption = “Password“)]
            public static string Password;

            [Editor(EditorType.Button)]
            [Display(Caption = “Login“)]
            [Binding(Path = “LoginCommand“, SourceType = BindingSourceType.ViewModel)]
            [Button(Title = “Login“, TextColor = “#FF285AFF“, Style = ButtonStyle.Simple)]
            public string LoginButton;
        }
    }
}

This is the FormMetadata that will be used for our login screen. This class is decorated with the FormMetadataTypeAttribute class which will indicate that this class will be used for the Form Builder definition. Also note that this class is a partial class from the LoginInfo model found inside the XamarinFormsSample/Models folder. Here, we only have a single LoginSection which consists of the following UI elements:

• Text box for the UserName
• Text box for the Password
• Button for the Login button.

It is recommended to match the property name with the model to ensure Form Builder automatic validation. The login button is also bound to the LoginCommand in the LoginViewModel.

Add a new Crosslight Android Material Activity inside the Activities folder.

Give it a name of LoginActivity.

Replace the contents of LoginActivity.cs as follows.

using Android.App;
using Intersoft.Crosslight.Android.v7;
using XamarinFormsSample.Core.ViewModels;
using System;
using Android.Runtime;

namespace XamarinFormsSample.Android.Activities
{
    /// <summary>
    ///     The main activity that acts as the host for LoginFragment.
    /// </summary>
    [Activity]
    public class LoginActivity : AppCompatActivity<LoginViewModel>
    {
        #region Constructors

        public LoginActivity()
        {
        }

        public LoginActivity(IntPtr javaReference, JniHandleOwnership transfer)
            : base(javaReference, transfer)
        {
        }

        #endregion
    }
}

This Activity will act as a container for the LoginFragment, which is the real view that’s being rendered for the login screen. Create a new folder called Fragments at the root of the Android project.

Create a new Crosslight Android Material Form Fragment in this folder, called LoginFragment.

Paste the following code into LoginFragment.

using System;
using Android.Runtime;
using XamarinFormsSample.Core.BindingProviders;
using XamarinFormsSample.Core.ViewModels;
using Intersoft.Crosslight;
using Intersoft.Crosslight.Android.v7;

namespace XamarinFormsSample.Android.Fragments
{
    /// <summary>
    ///     The main Fragment contained inside LoginActivity.
    /// </summary>
    public class LoginFragment : FormFragment<LoginViewModel>
    {
        #region Methods

        /// <summary>
        ///     Initializes this instance.
        /// </summary>
        protected override void Initialize()
        {
            base.Initialize();

            this.IconId = Resource.Drawable.ic_toolbar;
        }

        #endregion
    }
}

This project contains nothing except for the icon that will be used in the toolbar. When trying to run the project, you’ll get an error that ic_toolbar cannot be found. This can be easily resolved by copying the following image to the Resources/drawable folder.

The above is white and transparent, which makes it might be hard to see, but this icon will fit to almost Material Toolbar color you throw at it, except for white color, of course. You can replace this icon later with your own app branding, if you’d like.

If you build and run the project now, you should get the following screen.

When you click on the Login button, nothing will happen for now, since we’ve omitted the logic for ExecuteLogin in the LoginViewModel.

Preparing the Employee List Screen

Now that we’ve successfully displayed the login screen, we’re going to further modify this sample to navigate to the list of employees screen after we’ve clicked on the Login button. Start by modifying the LoginViewModel located inside the XamarinFormsSample (PCL) project. Use the following code.

private void ExecuteLogin(object parameter)
{
    this.Validate();

    if (!this.HasErrors)
        this.NavigationService.Navigate<EmployeeListViewModel>();
    else
        this.MessagePresenter.Show(this.ErrorMessage);
}

Here, we simply invoke the Validate method that is built-in to the EditorViewModelBase. If there’s any errors, then it will be displayed using the built-in message presenter that comes with the ViewModelBase. If the user has indeed entered any values, then the app will navigate to the employee list screen. Create a new Editable List View Model under the XamarinFormsSample/ViewModels folder. Give it a name of EmployeeListViewModel.

Use the following code:

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using Intersoft.Crosslight;
using Intersoft.Crosslight.ViewModels;
using XamarinFormsSample.Model;

namespace XamarinFormsSample.Core.ViewModels
{
    public class EmployeeListViewModel : EditableListViewModelBase<Employee>
    {
        #region Constructors

        public EmployeeListViewModel()
        {
            this.SourceItems = this.Employees;
            this.Title = “Employee List“;
        }

        #endregion

        #region Fields

        private ObservableCollection<Employee> _employees;

        #endregion

        #region Properties

        public ObservableCollection<Employee> Employees
        {
            get
            {
                if (_employees != null)
                    return _employees;
                List<Employee> list = new List<Employee>
                {
                    new Employee
                    {
                        FirstName = “Cecil“,
                        LastName = “Kinross“,
                        ImageUri = “CecilKinross“
                    },
                    new Employee
                    {
                        FirstName = “William“,
                        LastName = “Hall“,
                        ImageUri = “WilliamHall“
                    },
                    new Employee
                    {
                        FirstName = “Robert“,
                        LastName = “Spall“,
                        ImageUri = “RobertSpall“
                    },
                    new Employee
                    {
                        FirstName = “Ernest“,
                        LastName = “Smith“,
                        ImageUri = “ErnestSmith“
                    },
                    new Employee
                    {
                        FirstName = “Paul“,
                        LastName = “Triquet“,
                        ImageUri = “PaulTriquet“
                    }
                };

                int counter = 1;
                foreach (Employee employee in list)
                {
                    employee.Twitter = “@fake“ + counter++;
                }
                _employees = new ObservableCollection<Employee>(list.OrderBy(e => e.LastName));
                return _employees;
            }
        }

        #endregion
    }
}

Remember the Employees property code we’ve copied from the deleted App.cs? Now it’s the time to use the code. In this ViewModel, we simply populate the list of employees to the SourceItems property of the EmployeeListViewModel and set the initial Title for the EmployeeListViewModel. Next, let’s prepare the EmployeeListFragment. Create a new Crosslight Android Material List Fragment inside XamarinFormsSample.Android/Fragments folder and give it a name of EmployeeListFragment.

Use the following code.

using Android.Runtime;
using Intersoft.Crosslight;
using Intersoft.Crosslight.Android;
using Intersoft.Crosslight.Android.v7;
using Intersoft.Crosslight.Android.v7.ComponentModels;
using System;
using Android.Graphics;
using Android.Graphics.Drawables;
using XamarinFormsSample.Core.BindingProviders;
using XamarinFormsSample.Core.ViewModels;

namespace XamarinFormsSample.Android.Fragments
{
    [ImportBinding(typeof(EmployeeListBindingProvider))]
    public class EmployeeListFragment : RecyclerViewFragment<EmployeeListViewModel>
    {
        #region Constructors

        public EmployeeListFragment()
        {
        }

        public EmployeeListFragment(IntPtr javaReference, JniHandleOwnership transfer)
            : base(javaReference, transfer)
        {
        }

        #endregion

        #region Properties

        /// <summary>
        /// Gets the layout identifier of list item.
        /// </summary>
        /// <value>
        /// The list item layout identifier.
        /// </value>
        protected override int ItemLayoutId
        {
            get { return Resource.Layout.item_layout; }
        }

        #endregion

        #region Methods

        protected override void Initialize()
        {
            //To learn more how to configure this template, 
            //see http://developer.intersoftsolutions.com/display/crosslight/Using+Material+Recycler+View+Fragment
            base.Initialize();

            this.ImageLoaderSettings.AnimateOnLoad = true;
            this.Appearance.Background = new ColorDrawable(Color.WhiteSmoke);

            //Recycler View configuration
            this.InteractionMode = ListViewInteraction.Navigation;

            this.SourceSharedElementIds.Add(Resource.Id.Icon);
        }

        #endregion
    }
}

The list view is pretty simple, it only contains 2 default constructors needed for Fragment initialization, then we provide the item layout to be used by providing the item_layout as ID (which we’ll create in just a moment), then in the Initialize method, we initialized several settings, such as ImageLoaderSettings to animate when it loads, then set the Fragment background to the Color.WhiteSmoke color. Then we configure the InteractionMode of the Fragment to navigate upon item click. Lastly, we specified the shared element transition to transition from the ImageView with id of Icon to the FormFragment (which we’ll create after the Employee List screen).

Create a new Android layout file inside XamarinFormsSample.Android/Resources/layout folder and give it a name of item_layout.

Paste the following code inside the new layout file.

<?xml version=“1.0“ encoding=“utf–8“?>
<intersoft.crosslight.android.v7.CardView xmlns:app=“http://schemas.android.com/apk/res–auto“
    xmlns:android=“http://schemas.android.com/apk/res/android“
    android:layout_width=“match_parent“
    android:layout_height=“wrap_content“
    android:foreground=“?android:attr/selectableItemBackground“
    android:layout_marginLeft=“8dp“
    android:layout_marginRight=“8dp“
    android:layout_marginBottom=“8dp“
    app:cardElevation=“2dp“>
    <RelativeLayout
        android:layout_width=“match_parent“
        android:layout_height=“80dp“>
        <ImageView
            android:layout_width=“72dp“
            android:layout_height=“72dp“
            android:id=“@+id/Icon“
            android:layout_margin=“4dp“
            android:gravity=“center_vertical“
            android:layout_centerVertical=“true“ />
        <LinearLayout
            android:layout_width=“match_parent“
            android:layout_height=“wrap_content“
            android:layout_toRightOf=“@id/Icon“
            android:gravity=“center_vertical“
            android:layout_centerVertical=“true“
            android:orientation=“vertical“>
            <TextView
                android:textAppearance=“?android:attr/textAppearanceMedium“
                android:id=“@+id/TextLabel“
                android:layout_width=“match_parent“
                android:layout_height=“wrap_content“
                android:ellipsize=“end“
                android:singleLine=“true“ />
            <TextView
                android:textAppearance=“?android:attr/textAppearanceSmall“
                android:id=“@+id/Text2“
                android:layout_width=“match_parent“
                android:layout_height=“wrap_content“
                android:singleLine=“true“ />
        </LinearLayout>
    </RelativeLayout>
</intersoft.crosslight.android.v7.CardView>

Here, we’re going to use the new CardView to be the item layout for our employee list screen. To wrap up this view, we’re going to create the EmployeeListBindingProvider that will bind the data from the EmployeeListViewModel to the EmployeeListFragment. Create a new folder inside the XamarinFormsSample (PCL) project called BindingProviders and place it inside the newly created folder.

Use the following code.

using Intersoft.Crosslight;
using XamarinFormsSample.Core.ViewModels;

namespace XamarinFormsSample.Core.BindingProviders
{
    public class EmployeeListBindingProvider : BindingProvider
    {
        #region Constructors

        public EmployeeListBindingProvider()
        {
            ItemBindingDescription itemBinding = new ItemBindingDescription
            {
                DisplayMemberPath = “DisplayName“,
                DetailMemberPath = “Twitter“,
                ImageMemberPath = “ImageUri“
            };

            this.AddBinding(“TableView“, BindableProperties.ItemsSourceProperty, “Items“);
            this.AddBinding(“TableView“, BindableProperties.ItemTemplateBindingProperty, itemBinding, true);
            this.AddBinding(“TableView“, BindableProperties.SelectedItemProperty, “SelectedItem“, BindingMode.TwoWay);
//            this.AddBinding(“TableView“, BindableProperties.DetailNavigationTargetProperty, new NavigationTarget(typeof(EmployeeEditorViewModel), NavigationMode.Push), true);
            
        }