Colors in Xamarin Numeric Entry (SfNumericTextBox)

21 Aug 20238 minutes to read

You can customize SfNumericTextBox control’s background, text and border colors via the following bindable properties:

TextColor - Sets the color of the NumericTextBox’s value.
BackgroundColor - Sets the background color of NumericTextBox’s frame.
BorderColor - Sets the border color of NumericTextBox.
WatermarkColor - Sets the color of NumericTextBox’s watermark text.

Text color support in SfNumericTextBox

To set the TextColor color in XAML as well as in C#.

XAML
C#
<syncfusion:SfNumericTextBox Value="123" TextColor="Green" />
SfNumericTextBox numericTextBox=new SfNumericTextBox();
numericTextBox.TextColor = Color.Green;
numericTextBox.Value = 123;
this.Content = numericTextBox;

Display SfNumericTextBox with TextColor

Background color support in SfNumericTextBox

To set the BackgroundColor color in XAML as well as in C#:

XAML
C#
<syncfusion:SfNumericTextBox Value="123" BackgroundColor="Maroon" TextColor="White"/>
SfNumericTextBox numericTextBox=new SfNumericTextBox();
numericTextBox.BackgroundColor = Color.Maroon;
numericTextBox.TextColor = Color.White;
numericTextBox.Value = 123;
this.Content = numericTextBox;

Display SfNumericTextBox with BackgroundColor

Border color support in SfNumericTextBox

To set the BorderColor color in XAML as well as in C#:

XAML
C#
<syncfusion:SfNumericTextBox Value="123" BorderColor="Red" />
SfNumericTextBox numericTextBox=new SfNumericTextBox();
numericTextBox.BorderColor = Color.Red;
numericTextBox.Value = 123;
this.Content = numericTextBox;

Display SfNumericTextBox with BorderColor

Watermark color support in SfNumericTextBox

To set the WatermarkColor color in XAML as well as in C#:

XAML
C#
<syncfusion:SfNumericTextBox AllowNull="true" WatermarkColor="Blue" Watermark="Enter value"/>
SfNumericTextBox numericTextBox=new SfNumericTextBox();
numericTextBox.AllowNull=true;
numericTextBox.WatermarkColor = Color.Blue;
numericTextBox.Watermark = "Enter value"
this.Content = numericTextBox;

Display SfNumericTextBox with WatermarkColor

Restrict editing

You can restrict the dynamic editing of the numeric entry using the IsReadOnly property. But you can change the control text programmatically by using the bindable Value property of the numeric entry.

Visual states

The SfNumericTextBox has been customized based on the VisualStates.

The SfNumericTextBox control has the following three basic visual states:

Normal
Focused
Disabled

NOTE

The focused visual state is only available in Android and iOS platforms.

XAML
C#
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <numeric:SfNumericTextBox  WidthRequest="100" Value="50">

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="White" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="DarkGray" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Yellow" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
	</numeric:SfNumericTextBox>
  </StackLayout>
StackLayout stackLayout = new StackLayout
            {
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };
            SfNumericTextBox numericTextBox = new SfNumericTextBox
            {
                Value = 50,
                WidthRequest = 100
            };

            VisualStateGroupList visualStateGroupList = new VisualStateGroupList();

            VisualStateGroup commonStateGroup = new VisualStateGroup();
            VisualState normalState = new VisualState
            {
                Name = "Normal"
            };
            normalState.Setters.Add(new Setter { Property = SfNumericTextBox.BackgroundColorProperty, Value = Color.White });

            VisualState disabledState = new VisualState
            {
                Name = "Disabled"
            };
            disabledState.Setters.Add(new Setter { Property = SfNumericTextBox.BackgroundColorProperty, Value = Color.DarkGray });

            VisualState fousedState = new VisualState
            {
                Name = "Focused"
            };
            fousedState.Setters.Add(new Setter { Property = SfNumericTextBox.BackgroundColorProperty, Value = Color.Yellow });

            commonStateGroup.States.Add(normalState);
            commonStateGroup.States.Add(disabledState);
            commonStateGroup.States.Add(fousedState);
            visualStateGroupList.Add(commonStateGroup);
            VisualStateManager.SetVisualStateGroups(numericTextBox, visualStateGroupList);

            stackLayout.Children.Add(numericTextBox);
            this.Content = stackLayout;