|
1 | 1 | # How-to-change-the-Xamarin.Forms-numeric-textbox-style-using-its-visual-states |
2 | | -This article explains How to change the Xamarin.Forms numeric textbox style using its visual states |
| 2 | + |
| 3 | +This article explains how to customize the Syncfusion Xamarin.Forms numeric text box control using visual states. |
| 4 | + |
| 5 | +Let’s have a use case to keep default styles with having different background color which is varying based on its visual states if then Xamarin.Forms numeric text box control allows to do that with the help of global styles in Xamarin.Forms as per in below code snippet. |
| 6 | + |
| 7 | +[App.xaml] |
| 8 | + |
| 9 | +``` |
| 10 | + … |
| 11 | +
|
| 12 | +<Application.Resources> |
| 13 | + <ResourceDictionary> |
| 14 | + <Style x:Key="NumericTextBoxStyle" TargetType="numeric:SfNumericTextBox"> |
| 15 | + <Setter Property="VisualStateManager.VisualStateGroups"> |
| 16 | + <VisualStateGroupList> |
| 17 | + <VisualStateGroup x:Name="CommonStates"> |
| 18 | + <VisualState x:Name="Normal"> |
| 19 | + <VisualState.Setters> |
| 20 | + <Setter Property="BackgroundColor" Value="White" /> |
| 21 | + </VisualState.Setters> |
| 22 | + </VisualState> |
| 23 | + <VisualState x:Name="Disabled"> |
| 24 | + <VisualState.Setters> |
| 25 | + <Setter Property="BackgroundColor" Value="DarkGray" /> |
| 26 | + </VisualState.Setters> |
| 27 | + </VisualState> |
| 28 | + <VisualState x:Name="Focused"> |
| 29 | + <VisualState.Setters> |
| 30 | + <Setter Property="BackgroundColor" Value="Yellow" /> |
| 31 | + </VisualState.Setters> |
| 32 | + </VisualState> |
| 33 | + </VisualStateGroup> |
| 34 | + </VisualStateGroupList> |
| 35 | + </Setter> |
| 36 | + </Style> |
| 37 | + </ResourceDictionary> |
| 38 | + </Application.Resources> |
| 39 | +
|
| 40 | + … |
| 41 | +``` |
| 42 | + |
| 43 | +[XAML] |
| 44 | + |
| 45 | +``` |
| 46 | + … |
| 47 | +
|
| 48 | +<numeric:SfNumericTextBox x:Name="numericTextBox" Margin="0,20,0,0" Style="{StaticResource NumericTextBoxStyle}" Value="50"/> |
| 49 | +
|
| 50 | + … |
| 51 | +``` |
| 52 | + |
| 53 | +## Screenshot: |
| 54 | + |
| 55 | +Normal State: |
| 56 | + |
| 57 | + |
| 58 | + |
| 59 | +Focused State: |
| 60 | + |
| 61 | + |
| 62 | + |
| 63 | +Disabled State: |
| 64 | + |
| 65 | + |
| 66 | + |
| 67 | +## See also |
| 68 | + |
| 69 | +[To customize the font style of NumericTextBox](https://help.syncfusion.com/xamarin/numeric-entry/font-settings) |
| 70 | + |
| 71 | +[To set maximum number of demical digits in NumerTextBox](https://help.syncfusion.com/xamarin/numeric-entry/set-maximum-number-of-decimal-digits) |
| 72 | + |
| 73 | +[Custom numeric format strings](https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-numeric-format-strings#the--custom-specifier) |
| 74 | + |
| 75 | +[Number of decimal digits display](https://www.syncfusion.com/kb/7059/how-to-modify-number-of-decimal-digits-display) |
| 76 | + |
| 77 | +[Allowing null value](https://help.syncfusion.com/xamarin/numeric-entry/assign-nullable-value) |
| 78 | + |
| 79 | + |
| 80 | + |
| 81 | + |
0 commit comments