Articles in this section
Category / Section

How to add custom image editor in Xamarin.Forms DataForm

1 min read

DataForm allows you to add the custom editor. This article explains adding custom image editor in Xamarin Forms DataForm.


Here, the Image data field is loaded as custom image editor.


    public class ContactForm
        [DisplayOptions(ShowLabel =false)]
        public string Image { get; set; }
        [Display(ShortName = "Name")]
        public string Name { get; set; } = "John";
        [Display(Name ="Contact Number")]
        public string Number { get; set; }
        public string Email { get; set; }
        public string Address { get; set; }
        [Display(Name = "Birth Date")]
        public DateTime? BirthDate { get; set; }

By passing custom view in DataFormEditor class, you can add custom editor in data form. Refer to this DataForm user guide documentation for creating a new custom editor.


Here, the Image is loaded as custom view.


    public class DataFormCustomImageEditor : DataFormEditor<Image>
        public DataFormCustomImageEditor(SfDataForm dataForm):base(dataForm)
        protected override Image OnCreateEditorView(DataFormItem dataFormItem)
            return new Image();
        protected override void OnInitializeView(DataFormItem dataFormItem, Image view)
            base.OnInitializeView(dataFormItem, view);
            view.Source = "Person.png";


Refer to the following code example for binding DataObject and adding custom editor(Image) as CustomEditor using the RegisterEditor method in DataForm.


            dataForm.DataObject = new ContactForm();
            dataForm.RegisterEditor("ImageEditor", new DataFormCustomImageEditor(dataForm));
            dataForm.RegisterEditor("Image", "ImageEditor");


You can customize the padding of the rendered image using GetLeftPaddingForEditor override method of DataFormLayoutManager.


    public class DataFormLayoutManagerExt : DataFormLayoutManager
        public DataFormLayoutManagerExt(SfDataForm dataForm) : base(dataForm)
        protected override int GetLeftPaddingForEditor(DataFormItem dataFormItem)
            var item = base.GetLeftPaddingForEditor(dataFormItem);
            if (dataFormItem.Name == "Image")
                return -350;
            return item;


Example: DataFormCustomImageEditor



Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied