Articles in this section
Category / Section

How to change the Xamarin.Forms numeric textbox style using its visual states (SfNumericTextBox)

1 min read

This article explains how to customize the Syncfusion Xamarin.Forms numeric text box control using the visual states.


Let us have a use case of changing the background color based on the visual states. If then, the Xamarin.Forms numeric text box control allows to do that with the help of global styles in Xamarin.Forms as shown in the following code sample.



[XAML]  App.xaml

            <Style x:Key="NumericTextBoxStyle" TargetType="numeric:SfNumericTextBox">
                <Setter Property="VisualStateManager.VisualStateGroups">
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                    <Setter Property="BackgroundColor" Value="White" />
                            <VisualState x:Name="Disabled">
                                    <Setter Property="BackgroundColor" Value="DarkGray" />
                            <VisualState x:Name="Focused">
                                    <Setter Property="BackgroundColor" Value="Yellow" />


[XAML] MainPage.xaml

<numeric:SfNumericTextBox x:Name="numericTextBox" Margin="0,20,0,0" Style="{StaticResource NumericTextBoxStyle}" Value="50"/>



Normal State:


Applied background color for SfNumericTextBox in normal state.


Focused State:


Applied background color for SfNumericTextBox in focused state


Disabled State:


Applied background color for SfNumericTextBox in disabled state


View the sample in GitHub.


See also


To customize the font style of NumericTextBox


To set maximum number of demical digits in NumerTextBox


Custom numeric format strings


Number of decimal digits display


Allowing null value




Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Please sign in to leave a comment