How to create a borderless Xamarin.Forms Numeric control (SfNumericUpDown)?
This article explains how to create a Syncfusion Xamarin NumericUpDown without having their border as shown in the following image.
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);
}
}
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)
Conclusion
I hope you enjoyed learning how to create a borderless Xamarin.Forms numeric control (SfNumericUpDown).
You can refer to our Xamarin .Forms NumericUpDown feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
