Category / Section
How to add custom image editor in Xamarin.Android DataForm
1 min read
DataForm allows you to add the custom editor. This article explains adding custom image editor in Xamarin Android 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 ImageView is loaded as custom view.
public class DataFormCustomImageEditor : DataFormEditor<ImageView>
{
Context context;
public DataFormCustomImageEditor(SfDataForm dataForm, Context mainContext) : base(dataForm)
{
context = mainContext;
}
protected override ImageView OnCreateEditorView()
{
return new ImageView(context);
}
protected override void OnInitializeView(DataFormItem dataFormItem, ImageView view)
{
base.OnInitializeView(dataFormItem, view);
view.SetImageResource(Resource.Drawable.Person);
}
}
Refer to the following code example for binding DataObject and adding custom editor(Image) as CustomEditor using the RegisterEditor method in DataForm.
dataForm = new SfDataForm(this);
dataForm.DataObject = new ContactForm();
dataForm.RegisterEditor("ImageEditor", new DataFormCustomImageEditor(dataForm,this));
dataForm.RegisterEditor("Image", "ImageEditor");
dataForm.LayoutManager = new DataFormLayoutManagerExt(dataForm);
dataForm.SetBackgroundColor(Color.White);
SetContentView(dataForm);
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
