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.

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

Screenshot

See also

Access denied