How to custom the Border of NumericTextBox

2 mins read

We can customize the border of NumericTextBox by using “BorderColor” property in it. Not only this property, we can also customize the border style like thickness, shapeType of NumericTextBox by using custom renderer class.

Using NumericTextBox’s Property:

The following code example will helpful to have border color in NumericTextBox by using our “BorderColor “property.

Code in Xaml:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:KBSolution"
    xmlns:Synfusion="clr-namespace:Syncfusion.SfNumericTextBox.XForms;assembly=Syncfusion.SfNumericTextBox.XForms"
    x:Class="KBSolution.KBSolutionPage">
 
<ContentPage.Content>
    <Grid  BackgroundColor="#E4EAF0">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>
      <Label x:Name="firstNumeric"  Text="NumericTextBox" FontSize="20" HorizontalOptions="Center"  FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="Start"/>
      <Synfusion:SfNumericTextBox 
            Grid.Row="1"
            WidthRequest="280" 
            ParserMode="Decimal" 
            HorizontalOptions="Center"  
            MaximumNumberDecimalDigits="2" 
            AllowNull="true" 
            BorderColor="Green"
            Value="1000"    
            x:Name="sfNumericTextBox"
            FormatString="c" 
            ValueChangeMode="OnKeyFocus" 
            PercentDisplayMode="Value"
              />
        </Grid >
</ContentPage.Content>
</ContentPage>

Code in C#

namespace KBSolution
{
public partial class KBSolutionPage : ContentPage
{
    public KBSolutionPage()
    {
        InitializeComponent();
 
        Grid grid = new Grid() { BackgroundColor = Color.FromHex("E4EAF0") };
        grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(30) });
        grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(50) });
 
        Label firstNumeric = new Label()
        {
            Text = "NumericTextBox",
            FontSize = 20,
            HorizontalOptions = LayoutOptions.Center,
            FontAttributes = FontAttributes.Bold,
            HorizontalTextAlignment = TextAlignment.Start,
            VerticalTextAlignment = TextAlignment.Start
        };
        SfNumericTextBox sfNumericTextBox = new SfNumericTextBox()
        {
            WidthRequest = 280,
            ParserMode = Parsers.Decimal,
            HorizontalOptions = LayoutOptions.Center,
            MaximumNumberDecimalDigits = 2,
            AllowNull = true,
            FormatString = "c",
            Value = "1000",
            BorderColor = Color.Green,
            ValueChangeMode = ValueChangeMode.OnKeyFocus,
            PercentDisplayMode = PercentDisplayMode.Value
 
 
        };
        grid.Children.Add(firstNumeric, 0, 0);
        grid.Children.Add(sfNumericTextBox, 0, 1);
        this.Content = grid;
 
    }
}
}

SfNumericTextBox Custom Border

Using Custom Renderer:

The following code example will helpful to have border style in NumericTextBox by using custom renderer. The following steps are needed to do this with custom renderer

Step1: Create our custom NumericTextBox by inheriting the SfNumericTextBox class.

Step 2: likewise create a custom SfNumericTextBoxRenderer

class by inheriting SfNumericTextBoxRenderer

Code of Custom Renderer in Android:

[assembly: ExportRenderer(typeof(Numeric), typeof(SfNumericRenderer))]
 
namespace KBSolution.Droid
{
public class SfNumericRenderer : SfNumericTextBoxRenderer
{
    protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Syncfusion.SfNumericTextBox.XForms.SfNumericTextBox> e)
    {
        base.OnElementChanged(e);
 
        if (Control != null)
        {
            GradientDrawable gd = new GradientDrawable();
            //Shape of NumericTextBo and background color of NumericTextbox 
 
            gd.SetShape(ShapeType.Oval);
            gd.SetColor(Android.Graphics.Color.White);
            //By passing the color to stroke we can change the border color of NumericTextBox as well as stroke value we can increase the thickness of border
            gd.SetStroke(4, Android.Graphics.Color.DarkRed);
            Control.SetBackgroundDrawable(gd);
        }
    }
}
 
}

SfNumericTextBox Custom Border in Android

Code of CustomRenderer in iOS:

[assembly: ExportRenderer(typeof(Numeric), typeof(NumericRenderer))]
 
namespace KBSolution.iOS
{
public class NumericRenderer : SfNumericTextBoxRenderer
{
 
    protected override void OnElementChanged(Xamarin.Forms.Platform.iOS.ElementChangedEventArgs<SfNumericTextBox> e)
    {
        base.OnElementChanged(e);
 
        if (Control != null)
        {
            Control.BorderStyle = UIKit.UITextBorderStyle.RoundedRect;
            Control.Layer.CornerRadius = 10f;
            Control.Layer.BorderColor = Color.Green.ToCGColor();
            Control.Layer.BorderWidth = 4;
 
        }
    }
}
}

SfNumericTextBox Custom Border in iOS

Did you find this information helpful?

Yes

Comments (0)

How to custom the Border of NumericTextBox

Access denied