How to custom the Font in NumericTextBox

1 min read

We can customize the font style of NumericTextBox by using the following properties.

FontSize: set the font size for NumericTextBox’s text.

FontAttributes: set the style of NumericTextBox’s text. We can give three types of style on it

Bold- The font is bold
Italic – The font is Italic
None – The font is unmodified.

The following code illustrates that how-to custom the font style of NumericTextBox

Code in Xaml

<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="100" 
            ParserMode="Decimal" 
            HorizontalOptions="Center"  
            MaximumNumberDecimalDigits="2" 
            AllowNull="true" 
            BorderColor="Blue" 
            TextColor="Maroon" 
            x:Name="sfNumericTextBox"
            FormatString="c" 
            FontSize="27"
            FontAttributes="Bold"
            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 = 180,
            ParserMode = Parsers.Decimal,
            HorizontalOptions = LayoutOptions.Center,
            MaximumNumberDecimalDigits = 2,
            AllowNull = true,
            BorderColor = Color.Blue,
            TextColor = Color.Maroon,
            FormatString = "c",
            FontAttributes = FontAttributes.Bold,
            FontSize = 27,
            ValueChangeMode = ValueChangeMode.OnKeyFocus,
            PercentDisplayMode = PercentDisplayMode.Value
        };
 
        grid.Children.Add(firstNumeric, 0, 0);
        grid.Children.Add(sfNumericTextBox, 0, 1);
        this.Content = grid;
    }
}
}

Font Size 27 with Bold Attributes

SfNumericTextBox Font Attribute - Bold with Numeric Values