SfDataForm and X.F styling

Question

Hello,I'm implementing SfDataForm in my app, and I need some visual styling, to match my other controls.I would like to use the X.F Application.Resources dictionary styles like this (< and > replaced by _ to avoid forum's restrictions):  _Application.Resources_    _ResourceDictionary_                  _Style TargetType="Entry" ApplyToDerivedTypes="True"_        _Setter Property="TextColor" Value="Red"/_        _Setter Property="BackgroundColor" Value="Blue"/_      _/Style_    _/ResourceDictionary_  _/Application.Resources_Unfortunately it doesn't works for SfDataForm controls, but it works fine with my other Entry.I've verified : in OnEditorCreated(DataFormItem dataFormItem, View editor), editor is of Entry type...I would like to do the same for the labels and others components.The code need to be the same for Android and iOS (.NET standard project).How can I do that please ?Thank you, have a nice day.

Srinivasan Vasu · Answer

Hi Thomas, 
 
Thanks for contacting Syncfusion support. 
 
We have checked your query with “Styling support in SfDataForm” and we do not have direct support for styling. But your requirement can be achieved by overriding the GenerateViewForLabel and OnEditorCreated method in DataFormLayoutManager which are used to customize the label and editor.  
 
Please refer the code example 




 
this.dataForm.LayoutManager = new DataFormLayoutMaagerExt(this.dataForm); 
this.dataForm.DataObject = new ContactsInfo(); 
 
public class DataFormLayoutMaagerExt: DataFormLayoutManager 
    { 
        public DataFormLayoutMaagerExt(SfDataForm dataForm):base(dataForm) 
        { 
 
        } 
        protected override View GenerateViewForLabel(DataFormItem dataFormItem) 
        {             
            
            var label = base.GenerateViewForLabel(dataFormItem); 
            if (label is Label) 
            { 
                (label as Label).BackgroundColor = Color.Red; 
                (label as Label).TextColor = Color.Blue; 
            } 
            return label; 
 
        } 
        protected override void OnEditorCreated(DataFormItem dataFormItem, View editor) 
        { 
            if (editor is Entry) 
                (editor as Entry).TextColor = Color.Orange; 
            editor.BackgroundColor = Color.Blue; 
        } 
    } 
 
 
We have prepared a sample based on your requirement. Please find the same from below, 
 
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/StyleSample155102431.zip 
 
Please refer the below links, 
https://help.syncfusion.com/xamarin/sfdataform/layout#customizing-dataformlayoutmanager 
 
 
Regarding Styling support in SfDataForm, we have already logged a feature request in our database. We will implement this feature in any of our upcoming volume release. We will let you know once the implementation has done. 
Regards, 
Srinivasan

Thomas · Answer

Hello,Thank you for your answer, it helped me.However I want to go further, and I noticed something strange.Please consider the following code :    protected override void OnEditorCreated(DataFormItem dataFormItem, View editor) {        if (editor is Entry entry) {                //1. Get global style            Style style = (Style)Application.Current.Resources[typeof(Entry).FullName];                        //B. Alternative            //foreach (var setter in style.Setters) {            //     entry.SetValue(setter.Property, setter.Value);            //}            //2. Apply style            entry.Style = style;                        //3. Apply property directly            //entry.TextColor = Color.Orange;            //entry.BackgroundColor = Color.Aquamarine;        }    }In debug/step by step mode, I can see that BEFORE the line "2", the properties TextColor and BackgroundColor are already defined by the globally defined style, as it should be.So applying the style at line "2" doesn't change a thing.And running app with line 1 & 2 only, style isn't displayed.But if I manually apply the 2 properties (line 3), the style is displayed.It looks like style or properties are getting override after this function...Before having the new proper feature, do you have a better idea that re-manually apply the properties ?UPDATE : Even with part "B", it doesn't work... Very strange...Thanks, have a nice day.

Jeyasri M · Answer

Hi Thomas, 
 
As mentioned in previous update, you can re-manually set the property’s value for Editor and Label using GenerateViewForLabel and OnEditorCreated override methods. As per the implementation of SfDataForm Style property not considered while customize the view of SfDataForm. We will let you know once the implementation of “Style customize support “has done. We appreciate your patience until then. 
 
Regards, 
Jeyasri M.

Unknown · Answer

Hello,the DateFormLayoutManagerExt is working for me, but only for LayoutOptions="Default".When I'm using LayoutOptions="TextInputLayout" for SfDataForm in XAML, the overridden methods in DateFormLayoutManagerExt are not getting called.I want to use the nice looking ContainerType="Filled" and I want to be able to change styling Properties like TextColor (and a different TextColor when the Entry is ReadOnly).Can you please provide me a solution for that?

Karthikraja Arumugam · Answer

Hi Thomas, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your requirement of “Customizing DataFormLayoutManager class for floating label layout”. As per DataForm implementation, DataFormLayoutManager customization is applicable only for default layout, your requirement of changing editor text color can be achieved by customizing existing DataFormEditors, in custom editor class override OnInitializeView method and change editor TextColor property. 
 
Please refer the following code example for the same, 
 




[C#] 
dataForm.RegisterEditor("Text", new CustomDataFormTextEditor(dataForm)); 
 
public class CustomDataFormTextEditor : DataFormTextEditor 
{ 
        public CustomDataFormTextEditor(SfDataForm dataForm) : base(dataForm) 
        { 
 
        } 
 
        protected override void OnInitializeView(DataFormItem dataFormItem, Entry view) 
        { 
            base.OnInitializeView(dataFormItem, view); 
            if(dataFormItem.Name == "Email") 
            { 
                view.IsReadOnly = true; 
                view.TextColor = Color.Red; 
            } 
            else 
            { 
                view.TextColor = Color.Green; 
            } 
         } 
  } 
 
We have prepared a sample based on your requirement, 
Link: DataForm 
 
You can also refer our UG documentation to know about customizing existing editor in DataForm, 
Link: https://help.syncfusion.com/xamarin/dataform/editing#customizing-existing-editor 
 
We hope this helps. Please let us know if you would require any further assistance. 
 
Regards, 
Karthik Raja A

Unknown · Answer

Hi Karthik Raja,thank you for your fast response, your solution fits my requirements and helped me!Kind regards,Thomas B.

Karthikraja Arumugam · Answer

Hi Thomas, 
 
We are glad that the provided information helped you to achieve your requirements. Please get in touch with us if you need any further assistance. We are always happy to assist you. 
 
Regards, 
Karthik Raja A

Unknown · Answer

Now I've tested my App with your suggested code in more detail.

On iOS it's working like expected.

On Android, my TextColor changes in CustomDataFormTextEditor are getting ignored (TextColor is Gray again) when I set IsReadOnly="True" in the XAML.

As a workaround I set view.IsReadOnly = true; as you suggested and set IsReadOnly="False" or remove it in the XAML.

Will this be fixed?

Karthikraja Arumugam · Answer

Hi Thomas, 
 
Thank you for the update. 
 
We have checked your requirement and we are facing a framework issue with Xamarin.Forms.Entry, so while TextColor changed PropertyChanged event doesn’t hit when DataFormItem is in ReadOnly state hence disabled TextColor doesn’t work properly.  
 
So as we suggested in our previous update you can achieve your requirement by directly mapping IsReadOnly property of editor view in custom editor class or if you want to set DataFormItem IsReadOnly property then in custom editor’s OnUpdateReadOnly override method, directly map DataFormItem ReadOnly property to view IsReadonly property. 
 
Code Snippet: 





public class DataFormTextEditorExt : DataFormTextEditor 
{ 
        public DataFormTextEditorExt(SfDataForm dataForm) : base(dataForm) 
        { 
        } 
 
        protected override void OnUpdateReadOnly(DataFormItem dataFormItem, Entry view) 
        { 
            view.IsReadOnly = dataFormItem.IsReadOnly; 
        } 
} 
 
dataForm.RegisterEditor("Text", new DataFormTextEditorExt(dataForm));  
 
Kindly refer our UG documentation to know more about customizing existing editors in DataForm, 
UG link: https://help.syncfusion.com/xamarin/sfdataform/editing#customizing-existing-editor 
 
We hope this helps. Kindly revert us if you have any concerns. 
 
Regards, 
Karthik Raja A