How to raise dataform editor Touch event in Xamarin.Forms SfDataForm?

1 min read

You can raise the dataform editor touch event by adding custom editor when dataform has read/write access.

This article explains to raise the touch event of dataform custom editor and showing a pop up on touch recognized when dataform is read only.

Here, the ContactNumber data field is used as custom editor.

 
ContactInfo.cs
 
    public class ContactInfo
    {
        public string Name { get; set; }
        public string Address { get; set; }
 
        [Display(Name="Contact Number")]
        public int ContactNumber { get; set; }
 
        public string Email { get; set; }
    }

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

Here, the View is loaded for custom entry editor.

   public class CustomView : View
    {
        public CustomView()
        {
        }
    }

Refer to the following code example for binding the DataObject, setting dataform as read only and adding custom editor as Entry editor using the RegisterEditor method in dataform.

 
            dataForm.DataObject = new ContactInfo();
            dataForm.RegisterEditor("Entry", new CustomViewEditor(dataForm));
            dataForm.RegisterEditor("ContactNumber", "Entry");
            dataForm.IsReadOnly = true;

This article explains custom renderer in DataForm for Xamarin.Forms.Android and Xamarin.Forms.iOS platform alone.

In Android Renderer:

Here LinearLayout is loaded as native control in which EditText and SfPopupLayout is added to render the custom editor in dataform.

And touch gesture for custom dataform editor is recognized by raising the Touch event of the EditText.

 
    [assembly: ExportRenderer(typeof(CustomView), typeof(CustomViewRenderer))]
 
    public class CustomViewRenderer : ViewRenderer
    {
        EditText editText;
        SfPopupLayout popupLayout;
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.View> e)
        {
            base.OnElementChanged(e);
            editText = new EditText(this.Context);
            editText.Touch += OnEditTextTouch;
 
            popupLayout = new SfPopupLayout(this.Context);
            EditText popupContentView = new EditText(this.Context) { Hint = "Please enter the contact number" };
            popupContentView.SetTextColor(Android.Graphics.Color.Black);
            popupLayout.PopupView.ContentView = popupContentView;
            popupLayout.PopupView.ShowHeader = false;
            popupLayout.PopupView.AcceptButtonText = "Ok";
 
            LinearLayout linearLayout = new LinearLayout(this.Context);           
            linearLayout.Orientation = Orientation.Vertical;
            linearLayout.Enabled = false;
            linearLayout.AddView(popupLayout);
            linearLayout.AddView(editText);
            this.SetNativeControl(linearLayout);
        }
 
        private void OnEditTextTouch(object sender, TouchEventArgs e)
        {
            popupLayout.Show();
        }
    }

In iOS Renderer:

Here UIView is loaded as native control in which UIButton and SfPopupLayout is added as sub views to render the custom editor.

And touch gesture for custom dataform editor is recognized by raising the TouchDown event of the UIButton.

 
    [assembly: ExportRenderer(typeof(CustomView), typeof(CustomViewRenderer))]
 
    public class CustomViewRenderer : ViewRenderer
    {
        SfPopupLayout popupLayout;
        CustomView customView;
        UIButton showPopupButton;
 
        protected override void OnElementChanged(ElementChangedEventArgs<View> e)
        {
            base.OnElementChanged(e);
            popupLayout = new SfPopupLayout();
            UITextField popupContentView = new UITextField() { Placeholder = "Please enter the contact number" };
            popupContentView.TextColor = UIColor.Black;
            popupContentView.BackgroundColor = UIColor.White;
            popupLayout.PopupView.ContentView = popupContentView;
            popupLayout.BackgroundColor = UIColor.White;
            popupLayout.PopupView.ShowHeader = false;
            popupLayout.PopupView.AcceptButtonText = "Ok";
            popupLayout.Content = GetContentOfPopup();
            this.SetNativeControl(popupLayout);
        }
        private UIView GetContentOfPopup()
        {
            customView = new CustomView();
            customView.BackgroundColor = UIColor.White;
 
            showPopupButton = new UIButton();
            showPopupButton.TouchDown += OnShowPopupButtonTouchDown;
 
            customView.AddSubview(showPopupButton);
            return customView;
        }
        void OnShowPopupButtonTouchDown(object sender, EventArgs e)
        {
            popupLayout.Show();
        }
        public override void LayoutSubviews()
        {
            base.LayoutSubviews();
            popupLayout.Frame = new CGRect(0, 20, 500, 200);
        }
    }
 
public class CustomView : UIView
    {
        public CustomView() : base()
        {
        }
        public override void LayoutSubviews()
        {
            base.LayoutSubviews();
            this.Subviews[0].Frame = new CGRect(0, 0, this.Frame.Right, 50);
        }
    }

Sample Demo: EditorTouchEvent

Did you find this information helpful?

Yes

Comments (0)

How to raise dataform editor Touch event in Xamarin.Forms SfDataForm?

Access denied