How to style RadNumericInput control

1 Answer 103 Views
NumericInput Styling
n/a
Top achievements
Rank 1
Iron
n/a asked on 28 Dec 2022, 09:51 AM

I using LightTheme and DarkTheme in app.
But I have a problem with +/- buttons CornerRadius and Entry border styling.
They are not react to specified style.

How to style buttons and entry to custom apperance without override whole control template?

Documentation is too poor in this context.

Here is my xaml:

<telerikInput:RadNumericInput x:Name="numericInput" 
                              IsEnabled="{Binding IsEnabled}"
                              Value="{Binding Value,Mode=TwoWay}"
                              VerticalOptions="Center" 
                              HorizontalOptions="FillAndExpand">
            </telerikInput:RadNumericInput>

And syles:

<Style TargetType="{x:Type telerikInput:RadNumericInput}">
        <Setter Property="BackgroundColor" Value="{DynamicResource EntryBackgroundColor}" />
    </Style>

    <Style TargetType="{x:Type telerikNumericInput:NumericInputButton}">
        <Setter Property="BorderRadius" Value="5" />
        <Setter Property="BorderColor" Value="{DynamicResource PrimaryColor}"/>
        <Setter Property="TextColor" Value="{DynamicResource TextThemeColor}"/>
        <Setter Property="BackgroundColor" Value="{DynamicResource EntryBackgroundColor}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="0,0,0,0"/>
    </Style>
    
    <Style TargetType="{x:Type telerikNumericInput:NumericInputEntry}">
        <Setter Property="TextColor" Value="{DynamicResource TextThemeColor}"/>
        <Setter Property="Padding" Value="0,0,0,0"/>
        <Setter Property="Keyboard" Value="Numeric"/>
        <Setter Property="BorderStyle">
            <Setter.Value>
                <telerikInput:BorderStyle>
                    <telerikInput:BorderStyle.BorderThickness>
                        <OnPlatform x:TypeArguments="Thickness" Default="1">
                            <On Platform="Android" Value="1"/>
                            <On Platform="iOS" Value="1"/>
                            <On Platform="UWP" Value="1"/>
                        </OnPlatform>
                    </telerikInput:BorderStyle.BorderThickness>
                </telerikInput:BorderStyle>
            </Setter.Value>
        </Setter>
    </Style>


 

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 28 Dec 2022, 03:27 PM

Hello Maciej,

In the documentation there isn't a styling section as there isn't a style that can be applied to the buttons, border, entry directly. We have this logged as a feature requests: 

https://feedback.telerik.com/xamarin/1387998-change-the-numericinput-color-button-border-and-button-content 

https://feedback.telerik.com/xamarin/1415666-expose-textcolor-for-radnumericinput 

The opton for customizing and styling the NumericInput is the ControlTemplate.

Regards,
Didi
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
NumericInput Styling
Asked by
n/a
Top achievements
Rank 1
Iron
Answers by
Didi
Telerik team
Share this question
or