We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Xamarin.Forms |
Control: SfNumericTextBox |
Published Date: July 24, 2020 |
Last Revised Date: July 24, 2020

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

 

 

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Ruel Dognidon
Sep 08, 2020

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

```

Reply
Ruel Dognidon
Sep 08, 2020

Ruel Dognidon
Sep 08, 2020

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

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile