How to change the Xamarin.Forms numeric textbox style using its visual states (SfNumericTextBox)
This article explains how to customize the Syncfusion® Xamarin.Forms numeric text box control using its visual states.
Let us consider a use case of changing the background color based on the visual states. The Xamarin.Forms numeric text box control allows for this customization with the help of global styles in Xamarin.Forms as shown in the following code sample.
[XAML] App.xaml
… <Application.Resources> <ResourceDictionary> <Style x:Key="NumericTextBoxStyle" TargetType="numeric:SfNumericTextBox"> <Setter Property="VisualStateManager.VisualStateGroups"> <VisualStateGroupList> <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> </VisualStateGroupList> </Setter> </Style> </ResourceDictionary> </Application.Resources> …
[XAML] MainPage.xaml
…
<numeric:SfNumericTextBox x:Name="numericTextBox" Margin="0,20,0,0" Style="{StaticResource NumericTextBoxStyle}" Value="50"/>
…
Screenshot
Normal State:
Focused State:
Disabled State:
Download the complete sample from GitHub.
See also
To customize the font style of NumericTextBox
To set maximum number of demical digits in NumerTextBox
Number of decimal digits display
Conclusion
I hope you enjoyed learning about how to change the Xamarin.Forms numeric textbox style using its visual states in Xamarin.Forms SfNumericTextBox.
You can refer to our Xamarin.Forms Numeric TextBox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarification, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
