1. Home
  2. Forum
  3. Xamarin.Forms
  4. Customizing DataFormTextEditor and Password Editor

Customizing DataFormTextEditor and Password Editor

Is there a way to customize the way a DataFormTextEditor looks on UWP. Currently it takes on the look of a text box. I'd like to change the color for the border and text (both for when it has focus and when it doesn't. I'd also like to be able to change the color for the labels for the editors, but can't see a way to do this from the documentation. One last thing is it doesn't look like I get error messages when making the editor be a password editor, is this intended? Thanks in advance.

1 Reply
JM Jeyasri M Syncfusion Team June 20, 2018 12:53 PM UTC

Hi Teal, 
 
Thanks for contacting Syncfusion Support.  
 
We have checked your query with customizing DataFormItem in SfDataForm and your requirement can be achieved by following ways.  
 
Regarding query with Customizing label and Editor using DataFormLayoutManager class.  
 
You need to override the GenerateViewForLabel and OnEditorCreated method in DataFormLayoutManager class which is used to customize the label and Editor and set it to LayoutManager property of SfDataForm.  
 
Please find the code example. 
[C#] 
 
      dataForm.LayoutManager = new DataFormLayoutManagerExt(dataForm); 
public class DataFormLayoutManagerExt : DataFormLayoutManager 
    { 
        public DataFormLayoutManagerExt(SfDataForm dataForm) : base(dataForm) 
        { 
        } 
        protected override View GenerateViewForLabel(DataFormItem dataFormItem) 
        { 
            var view = base.GenerateViewForLabel(dataFormItem); 
            var textView = (view as Label); 
            textView.TextColor = Color.Blue; 
            return view; 
        } 
  protected override void OnEditorCreated(DataFormItem dataFormItem, View editor) 
        { 
            if (dataFormItem.Name == "Addresses") 
            { 
                (editor as Entry).TextColor = Color.YellowGreen; 
            } 
            else 
            { 
                base.OnEditorCreated(dataFormItem, editor); 
            } 
        }    } 
 
 
We have created the report to add user guide content for customization of SfDataForm support and we will let you know once its published in live. 
 
Regarding query with customizing border color. 
 
Your requirement of changing border color can be achieved adding custom editor with renderer. In renderer you can customize the TextBox control elements. 
 
Please find the code example in XForms.UWP renderer. 
 
[C#] 
 
[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomRenderer))] 
  public class CustomRenderer : EntryRenderer 
    { 
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) 
        { 
            base.OnElementChanged(e); 
 
            if (e.NewElement != null && this.Control != null) 
            { 
                ((CustomEntry)e.NewElement).PropertyChanging += MyEntryRenderer_PropertyChanging; 
                this.Control.BorderBrush = new SolidColorBrush(Colors.Red); 
                
            } 
        } 
        private void MyEntryRenderer_PropertyChanging(object sender, PropertyChangingEventArgs e) 
        { 
            if (e.PropertyName == VisualElement.IsFocusedProperty.PropertyName) 
            { 
                if (this.Control.FocusState == Windows.UI.Xaml.FocusState.Unfocused) 
                { 
                    this.Control.BorderBrush = new SolidColorBrush(Colors.White); 
                } 
            } 
        } 
    } 
 
 
 
Regarding query with customizing Text color using Custom Editor. 
 
Your requirement of customizing text and background color of editor view can be achieved by using DataFormEditor class which is used to register the custom editor in SfDataForm and by using its override methods Focused and UnFocused event of editor view you can customize editor view elements. 
 
Please find the code example: 
 
[C#] 
 
public class CustomEntryEditor : DataFormEditor<CustomEntry> 
    { 
        public CustomEntryEditor(SfDataForm dataForm) : base(dataForm) 
        { 
        } 
        protected override CustomEntry OnCreateEditorView() 
        { 
            return new CustomEntry(); 
        } 
        protected override void OnInitializeView(DataFormItem dataFormItem, CustomEntry view) 
        { 
            view.BackgroundColor = Color.Pink; 
        } 
 
        protected override void OnWireEvents(CustomEntry view) 
        { 
            view.TextChanged += View_TextChanged; 
            view.Focused += View_Focused; 
            view.Unfocused += View_Unfocused; 
        } 
 
        private void View_Focused(object sender, FocusEventArgs e) 
        { 
            var view = (sender as CustomEntry); 
            view.BackgroundColor = Color.Yellow; 
            view.TextColor = Color.White; 
        } 
 
        protected override bool OnValidateValue(CustomEntry view) 
        { 
            var dataFormItemView = view.Parent as DataFormItemView; 
            return (DependencyService.Get<IDataForm>().ValidateDataFormItem(DataForm)); 
        } 
        private void View_Unfocused(object sender, FocusEventArgs e) 
        { 
            var view = (sender as CustomEntry); 
            view.BackgroundColor = Color.Green; 
            view.TextColor = Color.Red; 
            OnValidateValue(sender as CustomEntry); 
        } 
 
        private void View_TextChanged(object sender, TextChangedEventArgs e) 
        { 
            OnCommitValue(sender as CustomEntry); 
        } 
 
        protected override void OnCommitValue(CustomEntry view) 
        { 
            var dataFormItemView = view.Parent as DataFormItemView; 
            var textValue = view.Text; 
            this.DataForm.ItemManager.SetValue(dataFormItemView.DataFormItem, view.Text); 
        } 
    } 
 
    public class CustomEntry : Entry 
    { 
        public CustomEntry() 
        { 
 
        } 
    } 
 
 
Regarding query with validation not working while customizing Password editor. 
 
While registering the custom editor in SfDataForm, you should manually validate the custom DataFormItem editor value by using the OnValidateValue override method of DataFormEditor class on respective editor view get Unfocused. 
 
Please find the code example. 
 
[C#] 
 
public class CustomPasswordEntry : DataFormEditor<Entry> 
    { 
        public CustomPasswordEntry(SfDataForm dataForm) : base(dataForm) 
        { 
        } 
        protected override Entry OnCreateEditorView() 
        { 
            return new Entry(); 
        } 
        protected override void OnInitializeView(DataFormItem dataFormItem, Entry view) 
        { 
            view.IsPassword = true; 
        } 
 
        protected override void OnWireEvents(Entry view) 
        { 
            view.TextChanged += View_TextChanged; 
            view.Unfocused += View_Unfocused; 
        } 
 
        protected override bool OnValidateValue(Entry view) 
        { 
            var dataFormItemView = view.Parent as DataFormItemView; 
            return (DependencyService.Get<IDataForm>().ValidateDataFormItem(DataForm)); 
        } 
        private void View_Unfocused(object sender, FocusEventArgs e) 
        { 
            OnValidateValue(sender as Entry); 
        } 
 
        private void View_TextChanged(object sender, TextChangedEventArgs e) 
        { 
            OnCommitValue(sender as Entry); 
        } 
 
        protected override void OnCommitValue(Entry view) 
        { 
            var dataFormItemView = view.Parent as DataFormItemView; 
            var textValue = view.Text; 
            this.DataForm.ItemManager.SetValue(dataFormItemView.DataFormItem, view.Text); 
        } 
    } 
 
 
Note:  
 In order to update the DataObject values when using custom editor, you should update the  DataForm Item editor value manually by using OnCommitValue method of DataFormEditor class which is used to commit the customized value in DataObject.  
 
We have prepared a sample based on your requirement SfDataForm customization and Password Editor added and please find the same from below link. 
 
 
Note: 
In the above sample we have manually did the validation in ValidateDataFormItem  
internal method of native renderer of DataForm ItemManager class by using Reflection.  
 
Code example: 
[C#] 
 
[assembly: Xamarin.Forms.Dependency(typeof(DataFormValidation))] 
 
    public class DataFormValidation : IDataForm 
    { 
        public bool ValidateDataFormItem(SfDataForm dataForm) 
        { 
           var nativeObject =  dataForm.GetType().GetProperty("NativeObject", BindingFlags.NonPublic | BindingFlags.Instance | BindingFlags.Public).GetValue(dataForm); 
 
            if (nativeObject != null) 
            { 
                var nativeDataForm = (nativeObject as Syncfusion.Android.DataForm.SfDataForm); 
                var method = nativeDataForm.ItemManager.GetType().GetMethod("ValidateDataFormItem", BindingFlags.NonPublic | BindingFlags.Instance | BindingFlags.Public); 
                var nativedataFormItem = nativeDataForm.ItemManager.DataFormItems["Password"]; 
                if (nativedataFormItem != null && method != null) 
                { 
                    var nativeValue = nativeDataForm.ItemManager.GetValue(nativedataFormItem); 
                    method.Invoke(nativeDataForm.ItemManager, new object[] { nativedataFormItem, nativeValue, true }); 
                    var isValid = nativedataFormItem.GetType().GetProperty("IsValid", BindingFlags.NonPublic | BindingFlags.Instance | BindingFlags.Public).GetValue(nativedataFormItem); 
                    return (bool)isValid; 
                } 
            } 
            return true; 
        } 
    } 
 
 
However, if your requirement is to use Password Editor with data validation support, we have included the in-built SfDataForm Password editor support in our upcoming Volume 2, 2018 main release which will be available in end of June 2018. We will let you know once volume 2, 2018 main release has been rollout. 
 
Regards, 
Jeyasri M 


Loader.
Up arrow icon