My Profile
Sign Out
Tickets
Knowledge Base
Login
Articles in this section
Category / Section
  2. Xamarin.Forms
  3. SfNumericTextBox

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

   …    
 
<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:

 

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?
Yes
No
Help us improve this page
Please provide feedback or comments
Did not find the solution Contact Support
Comments (1)
Please  to leave a comment
RD
Ruel Dognidon

Hi!

I'm trying to use the visualstate on xamarin.forms in uwp platform and the "Focused" state seems to be not working, here is my sample code:```

```
RD
Ruel Dognidon

RD
Ruel Dognidon

<xForms:SfNumericTextBox xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:xForms="clr-namespace:Syncfusion.SfNumericTextBox.XForms;assembly=Syncfusion.SfNumericTextBox.XForms" xmlns:effects="clr-namespace:Viacar.Vea.Client.Forms.Effects;assembly=Viacar.Vea.Client.Forms" xmlns:ac="clr-namespace:Viacar.Vea.Client.Forms.AppConstants;assembly=Viacar.Vea.Client.Forms" xmlns:models="clr-namespace:Viacar.Vea.Client.Forms.Models;assembly=Viacar.Vea.Client.Forms" x:Class="Viacar.Vea.Client.Forms.CustomControls.TextBox.IntegerTextBox" x:DataType="models:IntProperty" AllowNull="True" MaximumNumberDecimalDigits="0" BackgroundColor="{DynamicResource EntryBackgroundColor}" FontFamily="{x:Static ac:Fonts.RobotoMedium}" FontSize="14" EnableGroupSeparator="False" TextColor="{DynamicResource TextPrimaryColor}" effects:Border.BorderThickness="0.5,0.5,0.5,2" effects:Border.BorderColor="{DynamicResource LineThickColor}" Value="{Binding Value}" Maximum="{Binding Max}" Minimum="{Binding Min}"> <VisualStateManager.VisualStateGroups> <VisualStateGroupList> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="{DynamicResource EntryBackgroundColor}" /> </VisualState.Setters> </VisualState> <VisualState x:Name="Disabled"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="{DynamicResource EntryBackgroundColor}" /> </VisualState.Setters> </VisualState> <VisualState x:Name="Focused"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="Red" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </VisualStateManager.VisualStateGroups> </xForms:SfNumericTextBox>
Access denied
Access denied