1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to remove Border, CornerRadius of the SfNumericTextBox?

How to remove Border, CornerRadius of the SfNumericTextBox?

Hello Syncfusion Support,
I have a SfNumericTextBox with BackgroundColor is Red.
Control I received:

Control I want:

I think we remove border will OK.
Any solution for this?
Thanks..

11 Replies 1 reply marked as answer
RS Ramya Soundar Rajan Syncfusion Team September 24, 2020 02:27 PM UTC

Hi Nguyen Khoa Lu,  
  
Greetings from Syncfusion.  
  
Your requirement has been achieved by using the platform-specific custom renderer of SfNumericTextBox with customizing its border width and background as per in below code snippet  
  
Code snippet:   
   
iOS:   
  
Control.BorderStyle = UIKit.UITextBorderStyle.None;   
Control.Layer.CornerRadius = 0f;   
Control.Layer.BorderColor = Color.Transparent.ToCGColor();   
Control.Layer.BorderWidth = 0;   
   
UWP:   
  Control.BorderThickness = new Windows.UI.Xaml.Thickness(0);   
   
Android:  
 Control.Background = null;  
 
 
Regards, 
Ramya S 


NK Nguyen Khoa Lu September 28, 2020 01:11 AM UTC

Hi Ramya,
Thanks for your solution.
In my question, I want to remove padding left in your control. Example:

Current:




I want: 



Do you have solution for this?
Thanks you.

RS Ramya Soundar Rajan Syncfusion Team September 28, 2020 11:26 AM UTC

             
We have achieved your requirement to remove the default left padding of the SfNumericTextBox by using the platform-specific custom renderer of SfNumericTextBox to set the padding as per in below code snippet. 
 
Android: 
 
 protected override void OnElementChanged       (ElementChangedEventArgs<Syncfusion.SfNumericTextBox.XForms.SfNumericTextBox> e) 
 { 
          base.OnElementChanged(e); 
 
            if (Control != null) 
            { 
                Control.Background = null; 
                Control.SetPadding(0, Control.PaddingTop, Control.PaddingRight, Control.PaddingBottom);          
            } 
 } 
 
iOS: 
 
                             protected override void OnElementChanged(ElementChangedEventArgs<SfNumericTextBox> e) 
{ 
        base.OnElementChanged(e); 
        if (Control != null) 
                                           { 
                   … 
 
                var leftPadding = typeof(Syncfusion.SfNumericTextBox.iOS.SfNumericTextBox).GetProperty("EditTextLeftPadding", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance); 
                leftPadding.SetValue(Control, 0); 
            } 
        } 
 
UWP: 
 
        protected override void OnElementChanged(ElementChangedEventArgs<SfNumericTextBox> e) 
        { 
            base.OnElementChanged(e); 
 
            if (Control != null) 
            { 
                Control.BorderThickness = new Windows.UI.Xaml.Thickness(0); 
                Control.Padding = new Windows.UI.Xaml.Thickness(0,Control.Padding.Top, Control.Padding.Right, Control.Padding.Bottom); 
            } 
        } 
 
 
Regards, 
Ramya S 


Marked as answer
NK Nguyen Khoa Lu September 29, 2020 01:13 AM UTC

I have sloved my problem by your code. Thanks you very much.

SS Sridevi Sivakumar Syncfusion Team September 29, 2020 07:03 AM UTC

Hi Nguyen Khoa Lu,

Thanks for your update and we are glad to hear that given solution works at your end.

Regards,
Sridevi S. 


NK Nguyen Khoa Lu replied to Sridevi Sivakumar November 20, 2020 08:40 AM UTC

Hi Nguyen Khoa Lu,

Thanks for your update and we are glad to hear that given solution works at your end.

Regards,
Sridevi S. 


Hello, I want to remove padding right too. How to do that?

SS Sridevi Sivakumar Syncfusion Team November 23, 2020 11:04 AM UTC

Hi Nguyen Khoa Lu,

We have checked your query and we don’t have any padding on right side similar like left and we suspect you are asking about reducing width of SfNumericTextBox. If that is your requirement, you can change it through WidthRequest property.

Code snippet:  
       
 <borderless_textbox:CustomNumericTextBox Value="123"  BackgroundColor="Red"   VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="100" />  

Regards,
Sridevi S.   
   
 


NK Nguyen Khoa Lu November 24, 2020 01:43 AM UTC

Hi you,
Thanks for your answer. But it is not what I needed.

I have a SfNumericTextbox inside SfTextInputLayout. When I change SfNumericTextBox.TextAlignment to End it show same this photo:


I want remove padding Right or something else to become same here:

Do you have solution for this? Thanks you.

SS Sridevi Sivakumar Syncfusion Team November 24, 2020 05:09 PM UTC

Hi Nguyen Khoa Lu,

Thanks for sharing your proper use case.  It has been achieved by setting the InputViewPadding  value 0 to your required specific position. InputViewPadding is a type of Thickness property.

 
        <inputLayout:SfTextInputLayout InputViewPadding="0, -1,0, -1" Hint="Amount">  
            <borderless_textbox:CustomNumericTextBox Value="123" BackgroundColor="Red"  TextAlignment="End" />  
        </inputLayout:SfTextInputLayout>  

Note: If set the padding to -1, the control will take the expected padding value.

We faced some limitation in iOS, hence to achieve the same in iOS, please use the below custom renderer code
  
protected override void OnElementChanged(ElementChangedEventArgs<SfNumericTextBox> e)  
{  
base.OnElementChanged(e);  
  
       if (Control != null)  
       {  
                Control.BorderStyle = UIKit.UITextBorderStyle.None;  
                Control.Layer.CornerRadius = 0f;  
                Control.Layer.BorderColor = Color.Transparent.ToCGColor();  
                Control.Layer.BorderWidth = 0;  
                var leftPadding = typeof(Syncfusion.SfNumericTextBox.iOS.SfNumericTextBox).GetProperty("EditTextLeftPadding", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance);  
                leftPadding.SetValue(Control, 0);  
            }  
        }  
        public override void LayoutSubviews()  
        {  
            base.LayoutSubviews();  
            Control.Frame = new CGRect(Control.Frame.X, Control.Frame.Y, Control.Frame.Width + 10, Control.Frame.Height);  
        }  
  
 


NK Nguyen Khoa Lu November 25, 2020 01:48 AM UTC

I have solved the problem with this code. Thanks for your support.       

public override void LayoutSubviews()  
{  
     base.LayoutSubviews();  
     Control.Frame = new CGRect(Control.Frame.X, Control.Frame.Y, Control.Frame.Width + 10, Control.Frame.Height);  
}  

SS Sridevi Sivakumar Syncfusion Team November 25, 2020 05:56 AM UTC

Hi Nguyen Khoa Lu,

Thanks for your update and we are glad to hear that given solution works at your end.

Regards,
Sridevi S. 


Loader.
Up arrow icon