Articles in this section
Category / Section

How to change BorderWidth of NumericUpDown by using Custom Renderer

1 min read

Syncfusion SfNumericUpDown in Xamarin has the option to change border width by using custom renderer.

 

To change BorderWidth of NumericUpDown by using Custom Renderer please follow the below given procedure:

 

Step 1: Add the xaml content given below in the main xaml page.

 

Step 2: Create Renderer file and add the OnElementChange event on the required platform which you need. The code for OnElementChange event for each platform is given in the code illustrates.

 

The below code illustrates how to change border width of NumericUpDown by using custom renderer.

Add the below content in the Main xaml file.

XAML Code

xmlns:local="clr-namespace:NumericUpDown_CustomRenderer"
             xmlns:numeric="clr-namespace:Syncfusion.SfNumericUpDown.XForms;assembly=Syncfusion.SfNumericUpDown.XForms" 
 

 

C# Code

<ContentPage.Content>
<StackLayout Padding="30">
<local:NumericUpDown x:Name="sfNumericUpDown" HeightRequest="100"  Value="100" AllowNull="false" FormatString="n"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

 

Add the below content in the Android renderer file

namespace NumericUpDown_CustomRenderer.Droid
{
class Numeric_Renderer : SfNumericUpDownRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<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;
 
        GradientDrawable drawable = new GradientDrawable();
        drawable.SetShape(ShapeType.Rectangle);
        drawable.SetColor(Android.Graphics.Color.White);
        drawable.SetCornerRadius(20);
        drawable.SetStroke(1, Android.Graphics.Color.Black);
        Control. Background = drawable;
       }
     }
    }
}
}
}
 

 

 

Add the below content in the .ios renderer file

namespace NumericUpDown_CustomRenderer.iOS
{
public class Numeric_Renderer : SfNumericUpDownRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<SfNumericUpDown> e)
{
    base.OnElementChanged(e);
    if (Control != null)
    {
        Control.Layer.BorderWidth = 1;
    }
}
}
}
 

 

 

Add the below content in the .UWP renderer file

namespace NumericUpDown_CustomRenderer.UWP
{
public class Numeric_Renderer : SfNumericUpDownRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<SfNumericUpDown> e)
{
    base.OnElementChanged(e);
    if (Control != null)
    {
        Control.BorderThickness = new Windows.UI.Xaml.Thickness(10);
    }
}
}
}

 

 

Image for NumericUpDown:

SfNumericUpDown Border Width

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (2)
Please  to leave a comment
BA
Balakrishnan

I am trying to remove the border and customize the Button, Could you please suggest and share me the sample project, It will be helpful.



SK
Selva Kumar  Veerakrishnan

Hi Balakrishnan,

 

Query: To remove border of SfNumericUpDown.

 

For iOS:

Control.Layer.BorderWidth = 0;

 

For UWP:

 Control.BorderThickness = new Windows.UI.Xaml.Thickness(0);

 

For Android:

gd.SetStroke(0, Android.Graphics.Color.Transparent);

 

 

Query : To set the Customization button.

 

We have prepared a sample for your requirement, in which we have used the image and ttf to the UpDown button. Please download the sample from the link given below.

 

Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/NumericUpDownButton1932987359.zip

 

Regards,

Selva Kumar V.
Access denied
Access denied