)
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 custom the Border of NumericTextBox

Platform: Xamarin.Forms |
Control: SfNumericTextBox |
Published Date: March 23, 2017 |
Last Revised Date: July 4, 2019

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

 

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