How to render DataForm using MVVMCross in Xamarin.Forms?
MvvmCross is a cross-platform MVVM framework that enables developers to create powerful cross-platform apps. This article explains how to render data form in MVVMCross framework in Xamarin.Forms.
The setup class is responsible for bootstrapping MvvmCross and registering platform services.
public class Setup : MvxFormsAndroidSetup
{
public Setup(Context applicationContext) : base(applicationContext)
{
}
protected override MvxFormsApplication CreateFormsApplication()
{
return new App();
}
protected override IMvxApplication CreateApp()
{
return new Core.CoreApp();
}
protected override IMvxTrace CreateDebugTrace()
{
return new DebugTrace();
}
}
An MvvmCross core project is supposed to include custom AppStart object that manages first navigation.
public class CoreApp : MvvmCross.Core.ViewModels.MvxApplication
{
public override void Initialize()
{
CreatableTypes()
.EndingWith("Service")
.AsInterfaces()
.RegisterAsLazySingleton();
RegisterNavigationServiceAppStart<ViewModels.MvxFormsViewModel>();
}
}
In this following code snippet, the first line does a bulk registration to the IoC container. It looks within the current Assembly (the “Core” Assembly) and uses reflection to register all the classes ending in service as lazily-constructed singletons.
ViewModels are key objects of the MVVM pattern. These should typically contain code for managing states and operations. When using MvvmCross, all your ViewModels should be inherited from MvxViewModel.
public class MvxFormsViewModel : MvxViewModel
{
public MvxFormsViewModel()
{
this.contactsInfo = new ContactsInfo();
}
private ContactsInfo contactsInfo;
public ContactsInfo ContactsInfo
{
get { return this.contactsInfo; }
set { this.contactsInfo = value; }
}
public override Task Initialize()
{
//TODO: Add starting logic here
return base.Initialize();
}
}
public class ContactsInfo
{
[Display(Name="First Name")]
public string FirstName { get; set; }
[Display(Name = "Middle Name")]
public string MiddleName { get; set; }
[Display(Name = "Last Name")]
public string LastName { get; set; }
[Display(Name = "Contact Number")]
public string ContactNumber { get; set; }
public int Age { get; set; }
public string Email { get; set; }
public string Address { get; set; }
[Display(Name = "Birth Date")]
public DateTime? BirthDate { get; set; }
}
Behavior lets you add functionality to data form. Xamarin.Forms behaviors are created by deriving from the Behavior or Behavior<T> class.
public class DataFormBehavior : Behavior<ContentPage>
{
protected override void OnAttachedTo(ContentPage bindable)
{
base.OnAttachedTo(bindable);
var dataForm = bindable.FindByName<SfDataForm>("dataForm");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;
}
private void DataForm_AutoGeneratingDataFormItem(object sender, Syncfusion.XForms.DataForm.AutoGeneratingDataFormItemEventArgs e)
{
if (e.DataFormItem != null && e.DataFormItem.Name == "Age")
{
e.DataFormItem.IsVisible = false;
}
}
}
To use native MvvmCross bindings within a Xamarin.Forms page, simply add a reference to MvvmCross.Forms.Bindings (e.g.: xmlns:mvx="clr-namespace:MvvmCross.Forms.Bindings;assembly=MvvmCross.Forms") in the XAML page. Then, you can bind DataObject to the data form control using mvx:Bi.nd=""
<d:MvxContentPage x:TypeArguments="viewModels:MvxFormsViewModel" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MvxForms.Core.Pages" x:Class="MvxForms.Core.Pages.MvxFormsPage" xmlns:viewModels="clr-namespace:MvxForms.Core.ViewModels;assembly=MvxForms.Core" xmlns:d="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms" xmlns:dataForm="clr-namespace:Syncfusion.XForms.DataForm;assembly=Syncfusion.SfDataForm.XForms" xmlns:dataFormBehavior="clr-namespace:MvxForms.Core.ViewModels" xmlns:mvx="clr-namespace:MvvmCross.Forms.Bindings;assembly=MvvmCross.Forms"> <ContentPage.Behaviors> <dataFormBehavior:DataFormBehavior/> </ContentPage.Behaviors> <ContentPage.Content> <dataForm:SfDataForm x:Name="dataForm" mvx:Bi.nd="DataObject ContactsInfo"/> </ContentPage.Content> </d:MvxContentPage>
public partial class MvxFormsPage : MvxContentPage<MvxFormsViewModel>
{
public MvxFormsPage()
{
InitializeComponent();
}
}
Sample Demo: DataFormMVVMCross
