We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create a borderless Xamarin.Forms numeric control (SfNumericUpDown)

Platform: Xamarin.Forms |
Control: SfNumericUpDown |
Published Date: August 12, 2020 |
Last Revised Date: August 13, 2020

This article explains how to create a Syncfusion SfNumericUpDown without having their border as shown in the following image.

 

NumericUpDown WithoutBorder

 

It has been achieved by using the custom renderer of Xamarin.Forms SfNumericUpDown with platform specific as shown in the following code changes.

 

[XAML]

 

Control initialization with custom numericUpDown class.

 

    
            <local:CustomNumericUpDown x:Name="sfNumericUpDown" HeightRequest="100"  Value="100" AllowNull="false" FormatString="n"/>
 

 

Create a CustomNumericUpDown class, which is inherited from SfNumericUpDown.

 

    public class CustomNumericUpDown : SfNumericUpDown
    {
    }
 

Android

It has been achieved by setting the null to the EditText background, which is a child of native numeric control as shown in the following code sample.

 

        protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.SfNumericUpDown.XForms.SfNumericUpDown> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                for (int i = 0; i < Control.ChildCount; i++)
                {
                    var child = Control.GetChildAt(i);
                    if (child is EditText)
                    {
                        var control = child as EditText;
                        control.Background = null;
                    }
                }
            }
        }

iOS

To achieve the same in iOS, set the 0 as border width of the native control.

 

        protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.SfNumericUpDown.XForms.SfNumericUpDown> e)
        {
            base.OnElementChanged(e);
            if (this.Control != null)
            {
                /// For Achieving Borderwidth customization.
                this.Control.Layer.BorderWidth = 0f;
            }
        }

UWP

By setting the 0 as border thickness as shown in the following code sample.

 

        protected override void OnElementChanged(ElementChangedEventArgs<SfNumericUpDown> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.BorderThickness = new Windows.UI.Xaml.Thickness(0);
            }
        }

 

View the sample in GitHub.

See also

How to change border thickness of numeric control

Spin Button Customization in Xamarin NumericUpDown (SfNumericUpDown)

How to customize the color appearance of numeric controls in Xamarin.Forms

How to customize the spin button of the NumericUpDown

Auto Reverse in Xamarin NumericUpDown (SfNumericUpDown)

 

 

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon