We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render DataForm using MVVMCross in Xamarin.Forms?

Platform: Xamarin.Forms |
Control: SfDataForm |
Published Date: April 1, 2019 |
Last Revised Date: April 1, 2019

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

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon