How to customize label and editor layout in Xamarin.iOS DataForm?
You can customize the DataForm editor and label layout by adding own DataFormItemView which is used to layout the data form fields in Xamarin.iOS DataForm.
This article explains the layout customization of DataForm label and custom image editor.
Here, the Image data field is loaded as custom image editor.
ContactInfo.cs
[DisplayOptions(RowSpan = 5, ShowLabel = false)]
public string Image
{
get { return this.image; }
set { this.image = value; }
}
[DisplayOptions(RowSpan = 2)]
public string Name
{
get { return name; }
set { this.name = value; }
}
public string Address
{
get { return this.address; }
set { this.address = value; }
}
[Display(Name = "Contact Number")]
public int? ContactNumber
{
get { return this.contactNumber; }
set { this.contactNumber = value; }
}
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 UIImageView is loaded as custom view.
public class CustomEditor : DataFormEditor<UIImageView>
{
public CustomEditor(SfDataForm dataForm) : base(dataForm)
{
}
protected override UIImageView OnCreateEditorView()
{
var imageView = new UIImageView(UIImage.FromBundle("Person.png"));
return imageView;
}
protected override void OnInitializeView(DataFormItem dataFormItem, UIImageView view)
{
base.OnInitializeView(dataFormItem, view);
}
protected override void OnCommitValue(UIImageView view)
{
base.OnCommitValue(view);
}
}
Refer to the following code example for binding DataObject and adding custom editor(UIImageView) as CustomEditor using the RegisterEditor method in DataForm.
dataForm = new SfDataForm();
dataForm.RegisterEditor("ImageEditor", new CustomEditor(this.dataForm));
dataForm.RegisterEditor("Image", "ImageEditor");
dataForm.DataObject = new ContactInfo();
dataForm.BackgroundColor = UIColor.White;
this.View = dataForm;
To create own DataFormItemView, you need to use the CreateDataFormItemView override method of DataFormlayoutManager.
To add a label as a sub view in DataFormItemView, use the GenerateViewForLabel override method of DataFormLayoutManager to get the default label or load any custom label.
To add the editor view as sub view in DataFormItemView, use the GenerateViewForEditor override method of DataFormLayoutManager to get the DataForm editor view or load any custom view.
In addition, you need to set the following internal property value of DataFormItemView and DataFormItem by using Reflection for internal implementation handled in DataForm.
- Get the created editor for the Image data field from the DefaultEditors internal collection of DataFormEditorBase and assign the respective editor to the Editor property of newly created DataFormItemView.
- Assign the DataFormItem value of the Image data field to DataFormItem property value of newly created DataFormItemView.
- Set the DataFormItemView of Image data field DataFormItem to the newly created DataFormItemView.
- Use the GenerateViewForEditor override method of DataFormLayoutManager to generate the editor view by invoking with newly created DataFormItemView and assign the respective editor view to the EditorView property of newly created DataFormItemView.
dataForm.LayoutManager = new DataFormLayoutManagerExt(dataForm);
public class DataFormLayoutManagerExt : DataFormLayoutManager
{
public DataFormLayoutManagerExt(SfDataForm dataForm) : base(dataForm)
{
}
protected override DataFormItemView CreateDataFormItemView(int rowIndex, int columnIndex)
{
var dataFormItemBase = this.DataForm.ItemManager.DataFormItems[rowIndex, columnIndex];
if (dataFormItemBase == null)
return null;
var dataFormItem = dataFormItemBase as DataFormItem;
if (dataFormItem == null)
return null;
if (dataFormItem.Name == "Image")
{
DataFormEditorBase editor = null;
var defaultEditors = this.DataForm.ItemManager.GetType().GetProperty("DefaultEditors", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance).GetValue(this.DataForm.ItemManager);
var defaultDataFormEditors = (defaultEditors as Dictionary<string, DataFormEditorBase>);
var value = defaultDataFormEditors.TryGetValue(dataFormItem.Editor, out editor);
if (!value)
{
editor = defaultDataFormEditors["Text"];
}
var dataFormItemView = new DataFormItemViewExt();
ReflectionHelper.SetValue(dataFormItemView, "DataFormItem", dataFormItem);
ReflectionHelper.SetValue(dataFormItem, "View", dataFormItemView);
ReflectionHelper.SetValue(dataFormItemView, "Editor", editor);
var label = this.GenerateViewForLabel(dataFormItem);
var editorMethod = ReflectionHelper.GetMethod(this.GetType(), "GenerateViewForEditor");
var editorview = ReflectionHelper.InVoke(editorMethod, this, new object[] { dataFormItemView.Editor, dataFormItem });
ReflectionHelper.SetValue(dataFormItemView, "EditorView", editorview);
if ((editorview as UIView).Superview == null)
dataFormItemView.AddSubview(editorview as UIView);
dataFormItemView.Hidden = !dataFormItem.IsVisible;
return dataFormItemView;
}
else
return base.CreateDataFormItemView(rowIndex, columnIndex);
}
}
The newly created DataFormItemView has been layout by using the LayoutSubviews override methods. Here, the y position is customized for image editor layout.
public class DataFormItemViewExt : DataFormItemView
{
public DataFormItemViewExt()
{
}
public override void LayoutSubviews()
{
var dataform = ReflectionHelper.GetValue(this.Editor, "DataForm");
var sfdataform = dataform as SfDataForm;
if (this.Superview != null)
{
var scrollPanel = ReflectionHelper.GetScrollPanel(sfdataform) as ScrollPanel;
nfloat yposition = 0;
CGRect frame = new CGRect(0, yposition, 250, sfdataform.LabelPosition == LabelPosition.Top ? Convert.ToDouble(ReflectionHelper.GetValue(scrollPanel, "LabelHeight")) : Convert.ToDouble(ReflectionHelper.GetValue(scrollPanel, "RowHeight")));
var layoutlabel = ReflectionHelper.GetMethod(sfdataform.LayoutManager.GetType(), "LayoutLabel");
ReflectionHelper.InVoke(layoutlabel, sfdataform.LayoutManager, new object[] { this, frame });
if (sfdataform.LabelPosition == LabelPosition.Top && DataFormItem.ShowLabel)
yposition += (nfloat)ReflectionHelper.GetValue(scrollPanel, "LabelHeight");
// Set yposition - it will give some space in Top of Image
var rowspan= this.DataFormItem.GetType().GetProperty("RowSpan", BindingFlags.Instance | BindingFlags.NonPublic | BindingFlags.Static);
var rowspanvalue = rowspan.GetValue(this.DataFormItem);
frame = new CGRect(0, yposition + 50, 250, Convert.ToDouble(ReflectionHelper.GetValue(scrollPanel, "RowHeight")) * Convert.ToDouble(rowspanvalue));
var layouteditor = ReflectionHelper.GetMethod(sfdataform.LayoutManager.GetType(), "LayoutEditor");
ReflectionHelper.InVoke(layouteditor, sfdataform.LayoutManager, new object[] { this, frame });
yposition += (nfloat)Convert.ToDouble(ReflectionHelper.GetValue(scrollPanel, "RowHeight")) * (nfloat)Convert.ToDouble(rowspanvalue);
}
}
}
Example: CustomizeLabelAndEditorLayout
Conclusion
I hope you enjoyed learning about how to customize label and editor layout in Xamarin.iOS DataForm.
You can refer to our Xamarin.iOS DataForm feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
