How to customize the .NET MAUI Numeric Entry style using its visual states?

In .NET MAUI Numeric Entry, you can customize the style by utilizing visual states. This article will guide you through the process of changing the style based on different visual states such as Normal, Disabled, and Focused.

Step 1: Define the Style in ResourceDictionary

First, define the style within the ResourceDictionary of your ContentPage. This is where you specify the visual states for the Numeric Entry control.

XAML

<ContentPage.Resources>
    <ResourceDictionary>
        <Style x:Key="numericEntry" TargetType="inputs:SfNumericEntry">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="Background" Value="Pink" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="Background" Value="DarkCyan" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Focused">
                            <VisualState.Setters>
                                <Setter Property="Background" Value="Yellow" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

Step 2: Apply the Style to Numeric Entry

After defining the style, apply it to the Numeric Entry control by setting the Style property to the key defined in the ResourceDictionary.

XAML

<inputs:SfNumericEntry WidthRequest="200"
                       HeightRequest="50"                         
                       Value="10"
                       Style="{StaticResource numericEntry}"/>

Output

Normal

Focused

Disabled

Conclusion
I hope you enjoyed learning how to customize the .NET MAUI Numeric Entry style using its visual states

Refer to our .NET MAUI Numeric Entry feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Numeric Entry documentation to understand its features and how to use it.

Check out our .NET MAUI components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Numeric Entry and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!