More Styling functions

I already understand SfDataForm does not do styling yet, but it has been shown elsewhere how much of same effect can be achieved.

I have 2 further issues I can't yet work out how to do.
1) change the border between fields in SfDataForm. Current default is heavier than rest of most modern UI's. Is there somewhere programatically we can set the thickness of this border line?
2) We generally do border left, and border bottom in this situation. Is there any way to access/set which borders around the edit controls are displayed?
3) There is a very subtle issue in that the font in the Editor(text) is slightly too large. It is set to same as elsewhere in App (=14), but on display it is slightly larger than every other control that is doing size = 14. Maybe SfDataForm is using slightly different font face?? Have set to 13, which is smaller than every other control's 14, and =14 is larger than other controls. Interestingly, in SfDataForm, the Editor seems slightly larger font that even the label for same field.

Please advise.
Phil

7 Replies

SV Srinivasan Vasu Syncfusion Team April 11, 2018 05:33 PM UTC

Hi Phil, 
 
Thanks for contacting Syncfusion support. 
 
Regarding Query - Change BorderThickness, Border around Edit Controls and Change TextSize of Editors. 
 
We have checked your query and we do not have direct support to achieve your requirement. But your requirement can be achieved by registering CustomEditor in SfDataForm with CustomEntry control and you can set the BorderThickess, Border around EditControls and Change TextSize of Editors for Entry control in all cross platforms OnElementChanged method.   
  
Based on your requirement we have prepared a sample and please find the sample from below link.  
 
 
 
Regards, 
Srinivasan 



PH Phil Holmes April 18, 2018 11:42 AM UTC

Thanks Srinivasan,

Yes, that definitely helped, but didn't quite get there. 
My point 2) doesn't seem to be solvable this way. Only all the total border arrangement is available for settings. There doesn't seem to be any way to set bottom & left, with top & right being "None"
My point 3) also doesn't seem to be solvable this way. I have not yet found a way to make the vertical height of each control in the SfDataForm less than fixed value. Even if you reduce the font size, its just smaller fonts in same-size layout. HeightRequest seems to be ignored.

Thanks again for preparing the very helpful example. If I'm still missing anything, please let me know.

Regards,
Phil


SV Srinivasan Vasu Syncfusion Team April 19, 2018 12:05 PM UTC

Hi Phil, 
 
Query 1: 
There doesn't seem to be any way to set bottom & left, with top & right being "None" 
We have prepared a sample as per your requirement. In this sample, we have changed the Border of Entry control only shown Left and Bottom side only. 
 
Please download the sample from the below location. 
 
 
Query 2: 
I have not yet found a way to make the vertical height of each control in the SfDataForm less than fixed value. Even if you reduce the font size, its just smaller fonts in same-size layout. HeightRequest seems to be ignored. 
 
 
We do not have direct support for Changing DataFormItem height(Row height) in SfDataForm. Instead of, you can change the row height by setting RowSpan property in DisplayOptions attribute. 
 
Please refer the below UG link. 
 
 
 
Regards, 
Srinivasan 



PH Phil Holmes April 20, 2018 11:11 PM UTC

Thanks,

Regarding Query 1: that Sample didn't seem to compile so couldn't see, but review of the code indicates that it only does this in the UWP part. The iOS part (which I am primarily using) custom renderer does not seem to implement only the left & bottom borders as described. Am I missing something here?

Regarding Query 2: Yes, I'm aware of the RowSpan functionality. Not really what I'm after, but relevant.

Thanks,
Phil


SV Srinivasan Vasu Syncfusion Team April 24, 2018 12:45 PM UTC

 
Hi Phil, 
 
Query 1: 
The iOS part (which I am primarily using) custom renderer does not seem to implement only the left & bottom borders as described 
 
 
We have prepared a sample as per your requirement. In the sample, we have shown Entry control with left and Bottom border in DataFormEditor. (All Cross Platforms). 
 
Please refer the below example 
 
Xamarin.Forms.iOS 
 
  protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) 
        { 
            base.OnElementChanged(e); 
            if (e.NewElement != null && this.Control != null) 
            { 
               
                this.Control.Font = UIFont.FromName(this.Control.Font.Name, 17); 
                CALayer border = new CALayer(); 
                float width = 1.0f; 
                border.BorderWidth = width; 
                var mainFrame = this.Control.Superview.Frame; 
                border.Frame = new CoreGraphics.CGRect(-1 , 0 , 1 ,mainFrame.Height); 
                this.Control.Layer.AddSublayer(border); 
              
                CALayer border1 = new CALayer();   
                border1.BorderWidth = width; 
                border1.Frame = new CoreGraphics.CGRect(0, mainFrame.Height - 1, mainFrame.Right / 2, 1); 
                this.Control.Layer.AddSublayer(border1); 
                this.Control.Layer.MasksToBounds = true; 
                this.Control.BorderStyle = UITextBorderStyle.None; 
              
            } 
        } 
 
 
 
Query 2: 
Yes, I'm aware of the RowSpan functionality. Not really what I'm after, but relevant. 
 
 
As of now we do not have support for Changing DataFormItem height(Row height) in SfDataForm. Also, we do not have any customization option for changing height in SfDataForm.  
 
So you can change the row height by setting RowSpan property in DisplayOptions attribute only  
 
 
Regards, 
Srinivasan 



PH Phil Holmes May 4, 2018 03:55 AM UTC

Thanks, that example shed a lot more light for me. Obviously, it still requires a fair bit of "behind the scenes" but at least I can see here how to go down this road.

For now am trying to minimise use of custom renderers.



SV Srinivasan Vasu Syncfusion Team May 7, 2018 08:39 AM UTC

Hi Phil, 
  
Thanks for your reply. 
  
We are glad that we were able to help you. 
  
Regards, 
Srinivasan 


Loader.
Up arrow icon