How to customise the text present in the SfNumericUpDown

1 min read

Syncfusion NumericUpDown provides the support to customize the text entered.

To change the Text Size:

Step 1: Set desired value to FontSize and the text size will be set based on the given value.

To change the Text color:

Step 1: Set desired color to TextColor and the text color will be set based on the given color.

To change the Font attribute:

Step 1: Set desired font style to Font and the text color will be set based on the given color.

The below code illustrates the way to achieve this

XAML code to set TextSize, Color and Attribute:

<?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:NumericUpDown"
xmlns:numeric="clr-namespace:Syncfusion.SfNumericUpDown.XForms;assembly=Syncfusion.SfNumericUpDown.XForms"
x:Class="NumericUpDown.MainPage">
<numeric:SfNumericUpDown HeightRequest="50" WidthRequest="60" VerticalOptions="Center" SpinButtonAlignment="Both" Value="10" TextAlignment="Center" FormatString="p" Minimum="0" Maximum="100" StepValue="1" Font="Italic" FontSize="8" TextColor="Red" MaximumDecimalDigits="0" PercentDisplayMode="Value"/>
</ContentPage>

C# code to set TextSize, Color and Attribute:

namespace NumericUpDown
{
public partial class MainPage : ContentPage
{
    SfNumericUpDown numeric = new SfNumericUpDown();
    public MainPage()
    {
        InitializeComponent();
        numeric.HeightRequest = 50;
        numeric.WidthRequest = 60;
        numeric.VerticalOptions = LayoutOptions.Center;
        numeric.SpinButtonAlignment = SpinButtonAlignment.Both;
        numeric.Value = 10;
        numeric.TextAlignment = TextAlignment.Center;
        numeric.FormatString = "p";
        numeric.Minimum = 0;
        numeric.Maximum = 100;
        numeric.StepValue = 1;
        numeric.Font = Font.SystemFontOfSize(10, FontAttributes.Italic);
        numeric.TextColor = Color.Red;
        numeric.MaximumDecimalDigits = 0;
        numeric.PercentDisplayMode = PercentDisplayMode.Value;
        this.Content = numeric;
    }
}
}

Image after setting TextSize, Color and Attribute:

Did you find this information helpful?

Yes

Comments (0)

How to customise the text present in the SfNumericUpDown

Access denied