How to rearrange RadNumericInput buttons using Telerik for Maui version 8 or greater

1 Answer 15 Views
NumericInput
Aleksey
Top achievements
Rank 1
Aleksey asked on 28 Jan 2025, 01:05 PM

Hello,

I wanted to do a simple rearrangement of the control elements' position for IOS and Adnroid, like this: "- [input] +" instead of the current positioning "[input] - +"

previously it was possible to do so using ControlTemplate.

How i can acchive that using the latest verion of telerik controls?

Appretiate for your help

 

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 28 Jan 2025, 04:12 PM

Hello Aleksey,

You can achieve the result using the control template.

Here is a sample xaml definition of the numeric control template:

    <ContentPage.Resources>
        <ResourceDictionary>
            <telerik:CornerRadiusToThicknessConverter x:Key="CornerRadiusToThicknessConverter" />

            <ControlTemplate x:Key="RadNumericInput_ControlTemplate_Android_iOS">
                <Grid ColumnDefinitions="Auto,*, Auto"
              ColumnSpacing="4">
                    <HorizontalStackLayout Grid.Column="0">
                        <telerik:RadTemplatedButton Style="{TemplateBinding ActualDecreaseButtonStyle}" />
                    </HorizontalStackLayout>
                    <telerik:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}" Grid.Column="1"
                               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>
                    <HorizontalStackLayout Grid.Column="2">
                        <telerik:RadTemplatedButton Style="{TemplateBinding ActualIncreaseButtonStyle}" />
                    </HorizontalStackLayout>
                </Grid>
            </ControlTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>
    <VerticalStackLayout>
        <telerik:RadNumericInput x:Name="numeric" ControlTemplate="{StaticResource RadNumericInput_ControlTemplate_Android_iOS}" />
    </VerticalStackLayout>

Regards,
Didi
Progress Telerik

Aleksey
Top achievements
Rank 1
commented on 29 Jan 2025, 06:08 PM

Thank you so much! It works :)

as a proposal: Having such templates as a part of the documentation will be cool.

Thank you for so quick response and have a good day!

 

Didi
Telerik team
commented on 30 Jan 2025, 07:44 AM

Hi Aleksey,

Regarding to the templates, we are looking for a way to expose all default control templates and style. 

Bill Griep
Top achievements
Rank 1
commented on 10 Feb 2025, 04:36 PM

Would you be able to post the ActualIncreaseButtonStyle and ActualDecreaseButtonStyle styles?  We are having problems with trying to override the styles with a custom control template.
Lance | Senior Manager Technical Support
Telerik team
commented on 10 Feb 2025, 05:33 PM

Hi Bill, you can usually take out the  "Actual" prefix and reference it by the normal key. However, I predict that you're going to ask for more as you need it, so I am sharing with you the current (v9) resource dictionary contents for RadNumericInput. This will get you the latest support that is sensitive to the new theming mechanism.

If you have any further questions or need assistance about your exact implementation that doesn't benefit the general public, I would recommend opening a Support Ticket for faster 1:1 help.

Bill Griep
Top achievements
Rank 1
commented on 10 Feb 2025, 07:04 PM

Thanks Lance.  That did the trick.
Tags
NumericInput
Asked by
Aleksey
Top achievements
Rank 1
Answers by
Didi
Telerik team
Share this question
or