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.
ContactForm.cs
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; }
[DataType(DataType.Date)]
[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
