<!-- STEP 1 - Add the following XML namespace -->
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"



<!-- STEP 2 - USe what you need from the RadNumericInput ResourceDictionary -->

<telerik:CornerRadiusToThicknessConverter x:Key="CornerRadiusToThicknessConverter" />

<Style x:Key="NumericInputTextInputStyle" TargetType="telerik:NumericInputTextInput">
    <Setter Property="FontSize" Value="{OnPlatform Android=16, iOS=17, MacCatalyst=15, WinUI=14}" />
    <Setter Property="TextColor" Value="{DynamicResource RadEntryTextColor}" />
    <Setter Property="Padding" Value="{OnPlatform Android='8, 10, 8, 13', iOS=8, MacCatalyst='6, 5.75', WinUI='10, 6, 10, 7'}" />
    <Setter Property="Keyboard" Value="Numeric" />
    <Setter Property="IsReadOnly" Value="{TemplateBinding IsReadOnly}" />
    <Setter Property="VerticalTextAlignment" Value="Center" />
    <Setter Property="AutomationId" Value="NumericTextInput" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="ReadOnly" />
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="{DynamicResource RadEntryDisabledTextColor}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

<Style x:Key="NumericButtonBaseStyle" TargetType="telerik:RadTemplatedButton">
    <Setter Property="FontSize" Value="{OnPlatform Default=21, MacCatalyst=7, WinUI=11}" />
    <Setter Property="TextColor" Value="{OnPlatform Default={DynamicResource RadOnAppSurfaceColor}, WinUI={DynamicResource RadSubtleColor}}" />
    <Setter Property="Background" Value="{DynamicResource RadNumericInputButtonBackground}" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
    <Setter Property="VerticalTextAlignment" Value="Center" />
    <Setter Property="Shadow" Value="{x:Null}" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadTemplatedButton.TextColor" Value="{DynamicResource RadEntryActionButtonPressedTextColor}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadTemplatedButton.TextColor" Value="{DynamicResource RadEntryDisabledTextColor}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

<Style x:Key="NumericButtonBaseStyle_WinUI" TargetType="telerik:RadTemplatedButton" BasedOn="{StaticResource NumericButtonBaseStyle}">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadTemplatedButton.Background" Value="{DynamicResource RadOnAppSurfaceColorAlpha4}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadTemplatedButton.TextColor" Value="{DynamicResource RadEntryActionButtonPressedTextColor}" />
                        <Setter Property="telerik:RadTemplatedButton.Background" Value="{DynamicResource RadOnAppSurfaceColorAlpha2}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadTemplatedButton.TextColor" Value="{DynamicResource RadEntryDisabledTextColor}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

<Style x:Key="IncreaseButtonBaseStyle" TargetType="telerik:RadTemplatedButton" BasedOn="{OnPlatform Default={StaticResource NumericButtonBaseStyle}, WinUI={StaticResource NumericButtonBaseStyle_WinUI}}">
    <Setter Property="CornerRadius" Value="{OnPlatform Default='0, 4, 0, 4', iOS='0, 10, 0, 10', MacCatalyst='6, 6, 0, 0', WinUI=4}" />
    <Setter Property="Content" Value="{TemplateBinding IncreaseButtonText}" />
    <Setter Property="Command" Value="{TemplateBinding IncreaseCommand}" />
    <Setter Property="AutomationId" Value="NumericIncreaseButton" />
</Style>

<Style x:Key="DecreaseButtonBaseStyle" TargetType="telerik:RadTemplatedButton" BasedOn="{OnPlatform Default={StaticResource NumericButtonBaseStyle}, WinUI={StaticResource NumericButtonBaseStyle_WinUI}}">
    <Setter Property="CornerRadius" Value="{OnPlatform Default='4, 0, 4, 0', iOS='10, 0, 10, 0', MacCatalyst='0, 0, 6, 6', WinUI=4}" />
    <Setter Property="Content" Value="{TemplateBinding DecreaseButtonText}" />
    <Setter Property="Command" Value="{TemplateBinding DecreaseCommand}" />
    <Setter Property="AutomationId" Value="NumericDecreaseButton" />
</Style>

<Style x:Key="IncreaseButtonStyle_Android_iOS" TargetType="telerik:RadTemplatedButton" BasedOn="{StaticResource IncreaseButtonBaseStyle}">
    <Setter Property="MinimumWidthRequest" Value="{OnPlatform Default=44, iOS=45}" />
    <Setter Property="Padding" Value="{OnPlatform Default='0, 0, 0, 4', iOS='1, 0, 0, 4'}" />
    <Setter Property="Margin" Value="{OnPlatform Default=0, iOS='-1, 0, 0, 0'}" />
</Style>

<Style x:Key="DecreaseButtonStyle_Android_iOS" TargetType="telerik:RadTemplatedButton" BasedOn="{StaticResource DecreaseButtonBaseStyle}">
    <Setter Property="MinimumWidthRequest" Value="{OnPlatform Default=44, iOS=45}" />
    <Setter Property="Padding" Value="{OnPlatform Default='0, 0, 0, 4', iOS='0, 0, 1, 4'}" />
    <Setter Property="Margin" Value="{OnPlatform Default=0, iOS='0, 0, -1, 0'}" />
</Style>

<Style x:Key="IncreaseButtonStyle_MacCatalyst" TargetType="telerik:RadTemplatedButton" BasedOn="{StaticResource IncreaseButtonBaseStyle}">
    <Setter Property="FontFamily" Value="TelerikFont" />
    <Setter Property="BorderBrush" Value="{DynamicResource RadEntryBorderBrush}" />
    <Setter Property="BorderThickness" Value="1, 1, 1, 0" />
    <Setter Property="WidthRequest" Value="15" />
    <Setter Property="VerticalTextAlignment" Value="End" />
    <Setter Property="Padding" Value="0.5, 0, 0, 2.5" />
</Style>

<Style x:Key="DecreaseButtonStyle_MacCatalyst" TargetType="telerik:RadTemplatedButton" BasedOn="{StaticResource DecreaseButtonBaseStyle}">
    <Setter Property="FontFamily" Value="TelerikFont" />
    <Setter Property="BorderBrush" Value="{DynamicResource RadEntryBorderBrush}" />
    <Setter Property="BorderThickness" Value="1, 0, 1, 1" />
    <Setter Property="WidthRequest" Value="15" />
    <Setter Property="VerticalTextAlignment" Value="Start" />
    <Setter Property="Padding" Value="0.5, 2.5, 0, 0" />
</Style>

<Style x:Key="IncreaseButtonStyle_WinUI" TargetType="telerik:RadTemplatedButton" BasedOn="{StaticResource IncreaseButtonBaseStyle}">
    <Setter Property="FontFamily" Value="TelerikFont" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="HeightRequest" Value="22" />
    <Setter Property="WidthRequest" Value="22" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Margin" Value="0, 0, 4, 0" />
    <Setter Property="VerticalOptions" Value="Center" />
</Style>

<Style x:Key="DecreaseButtonStyle_WinUI" TargetType="telerik:RadTemplatedButton" BasedOn="{StaticResource DecreaseButtonBaseStyle}">
    <Setter Property="FontFamily" Value="TelerikFont" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="HeightRequest" Value="22" />
    <Setter Property="WidthRequest" Value="22" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="VerticalOptions" Value="Center" />
</Style>

<ControlTemplate x:Key="RadNumericInput_ControlTemplate">
    <Grid ColumnDefinitions="*, Auto"
          ColumnSpacing="{OnPlatform Default=4, MacCatalyst=3.5}">
        <telerik:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
                                       Background="{TemplateBinding Background}"
                                       BorderBrush="{TemplateBinding BorderBrush}"
                                       BorderThickness="{TemplateBinding BorderThickness}"
                                       CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource CornerRadiusToThicknessConverter}}">
            <telerik:NumericInputTextInput x:Name="PART_TextInput"
                                                       Style="{TemplateBinding ActualTextInputStyle}" />
        </telerik:RadBorder>
        <OnPlatform x:TypeArguments="View">
            <On Platform="Android, iOS">
                <HorizontalStackLayout Grid.Column="1">
                    <telerik:RadTemplatedButton Style="{TemplateBinding ActualDecreaseButtonStyle}" />
                    <telerik:RadTemplatedButton Style="{TemplateBinding ActualIncreaseButtonStyle}" />
                </HorizontalStackLayout>
            </On>
            <On Platform="MacCatalyst">
                <Grid Grid.Column="1"
                      RowDefinitions="*, *">
                    <telerik:RadTemplatedButton Style="{TemplateBinding ActualIncreaseButtonStyle}" />
                    <telerik:RadTemplatedButton Grid.Row="1"
                                                            Style="{TemplateBinding ActualDecreaseButtonStyle}" />
                </Grid>
            </On>
        </OnPlatform>
    </Grid>
</ControlTemplate>

<ControlTemplate x:Key="RadNumericInput_ControlTemplate_WinUI">
    <Grid BackgroundColor="{TemplateBinding BackgroundColor}"
          Background="{TemplateBinding Background}"
          telerik:ViewUtils.CornerRadius="{TemplateBinding CornerRadius}">
        <Grid ColumnDefinitions="*, Auto">
            <telerik:NumericInputTextInput x:Name="PART_TextInput"
                                                       Style="{TemplateBinding ActualTextInputStyle}" />
            <HorizontalStackLayout Grid.Column="1">
                <telerik:RadTemplatedButton Style="{TemplateBinding ActualDecreaseButtonStyle}" />
                <telerik:RadTemplatedButton Style="{TemplateBinding ActualIncreaseButtonStyle}" />
            </HorizontalStackLayout>
        </Grid>
        <telerik:RadBorder InputTransparent="True"
                                       BackgroundColor="Transparent"
                                       BorderBrush="{TemplateBinding BorderBrush}"
                                       BorderThickness="{TemplateBinding BorderThickness}"
                                       CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource CornerRadiusToThicknessConverter}}" />
    </Grid>
</ControlTemplate>

<VisualStateGroupList x:Key="RadNumericInput_VisualStates_Android">
    <VisualStateGroup Name="CommonStates">
        <VisualState Name="Normal" />
        <VisualState Name="Focused">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadEntryFocusedBackgroundColor}" />
                <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadEntryFocusedBorderBrush}" />
                <Setter Property="telerik:RadNumericInput.BorderThickness" Value="0, 0, 0, 2" />
            </VisualState.Setters>
        </VisualState>
        <VisualState Name="ReadOnly" />
        <VisualState Name="ReadOnlyFocused">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadEntryFocusedBackgroundColor}" />
                <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadEntryReadOnlyFocusedBorderBrush}" />
                <Setter Property="telerik:RadNumericInput.BorderThickness" Value="0, 0, 0, 2" />
            </VisualState.Setters>
        </VisualState>
        <VisualState Name="Disabled">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadEntryDisabledBorderBrush}" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateGroupList>

<VisualStateGroupList x:Key="RadNumericInput_VisualStates_iOS">
    <VisualStateGroup Name="CommonStates">
        <VisualState Name="Normal" />
        <VisualState Name="Focused">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadEntryFocusedBackgroundColor}" />
                <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadEntryFocusedBorderBrush}" />
            </VisualState.Setters>
        </VisualState>
        <VisualState Name="ReadOnly" />
        <VisualState Name="ReadOnlyFocused">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadEntryFocusedBackgroundColor}" />
                <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadEntryReadOnlyFocusedBorderBrush}" />
            </VisualState.Setters>
        </VisualState>
        <VisualState Name="Disabled">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadEntryDisabledBackgroundColor}" />
                <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadEntryDisabledBorderBrush}" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateGroupList>

<VisualStateGroupList x:Key="RadNumericInput_VisualStates_MacCatalyst">
    <VisualStateGroup Name="CommonStates">
        <VisualState Name="Normal" />
        <VisualState Name="MouseOver" />
        <VisualState Name="Focused">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadEntryFocusedBackgroundColor}" />
                <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadEntryFocusedBorderBrush}" />
                <Setter Property="telerik:RadNumericInput.BorderThickness" Value="3" />
            </VisualState.Setters>
        </VisualState>
        <VisualState Name="ReadOnly" />
        <VisualState Name="ReadOnlyMouseOver" />
        <VisualState Name="ReadOnlyFocused">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadEntryFocusedBackgroundColor}" />
                <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadEntryReadOnlyFocusedBorderBrush}" />
                <Setter Property="telerik:RadNumericInput.BorderThickness" Value="3" />
            </VisualState.Setters>
        </VisualState>
        <VisualState Name="Disabled">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadEntryDisabledBackgroundColor}" />
                <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadEntryDisabledBorderBrush}" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateGroupList>

<VisualStateGroupList x:Key="RadNumericInput_VisualStates_WinUI">
    <VisualStateGroup Name="CommonStates">
        <VisualState Name="Normal" />
        <VisualState Name="MouseOver">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadBaseHoverColor}" />
            </VisualState.Setters>
        </VisualState>
        <VisualState Name="Focused">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadEntryFocusedBackgroundColor}" />
                 <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadEntryFocusedBorderBrush}" /> 
                <Setter Property="telerik:RadNumericInput.BorderThickness" Value="1, 1, 1, 2" />
            </VisualState.Setters>
        </VisualState>
        <VisualState Name="ReadOnly">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadEntryReadOnlyBackgroundColor}" />
                <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadSurfaceAltColorDarken8}" />
            </VisualState.Setters>
        </VisualState>
        <VisualState Name="ReadOnlyMouseOver">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadBaseHoverColor}" />
                <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadSurfaceAltColorDarken8}" />
            </VisualState.Setters>
        </VisualState>
        <VisualState Name="ReadOnlyFocused">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadEntryFocusedBackgroundColor}" />
                 <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadEntryReadOnlyFocusedBorderBrush}" /> 
                <Setter Property="telerik:RadNumericInput.BorderThickness" Value="1, 1, 1, 2" />
            </VisualState.Setters>
        </VisualState>
        <VisualState Name="Disabled">
            <VisualState.Setters>
                <Setter Property="telerik:RadNumericInput.BackgroundColor" Value="{DynamicResource RadBaseActiveColor}" />
                <Setter Property="telerik:RadNumericInput.BorderBrush" Value="{DynamicResource RadEntryDisabledBorderBrush}" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateGroupList>

<Style x:Key="RadNumericInputStyle" TargetType="telerik:RadNumericInput">
    <Setter Property="ControlTemplate" Value="{OnPlatform Default={StaticResource RadNumericInput_ControlTemplate}, WinUI={StaticResource RadNumericInput_ControlTemplate_WinUI}}" />
    <Setter Property="BackgroundColor" Value="{DynamicResource RadEntryBackgroundColor}" />
    <Setter Property="BorderBrush" Value="{DynamicResource RadEntryBorderBrush}" />
    <Setter Property="BorderThickness" Value="{OnPlatform Default=1, Android='0, 0, 0, 1'}" />
    <Setter Property="CornerRadius" Value="{OnPlatform Android='4, 4, 0, 0', iOS=10, MacCatalyst=0, WinUI=4}" />
    <!--<If Condition="PlatformTheme">
        <Setter Property="TextInputStyle" Value="{StaticResource NumericInputTextInputStyle}" />
        <Setter Property="IncreaseButtonStyle" Value="{OnPlatform Default={StaticResource IncreaseButtonStyle_Android_iOS}, MacCatalyst={StaticResource IncreaseButtonStyle_MacCatalyst}, WinUI={StaticResource IncreaseButtonStyle_WinUI}}" />
        <Setter Property="DecreaseButtonStyle" Value="{OnPlatform Default={StaticResource DecreaseButtonStyle_Android_iOS}, MacCatalyst={StaticResource DecreaseButtonStyle_MacCatalyst}, WinUI={StaticResource DecreaseButtonStyle_WinUI}}" />
    </If>-->
    <Setter Property="VisualStateManager.VisualStateGroups"
            Value="{OnPlatform Android={StaticResource RadNumericInput_VisualStates_Android},
                               iOS={StaticResource RadNumericInput_VisualStates_iOS},
                               MacCatalyst={StaticResource RadNumericInput_VisualStates_MacCatalyst},
                               WinUI={StaticResource RadNumericInput_VisualStates_WinUI}}" />
</Style>
    </ResourceDictionary>