How to hide RadNumericInput Buttons
Environment
| Product Version | 2018.3.1122.3 |
| Product | NumericInput for Xamarin Cross-Platform |
| Xamarin Technology | Xamarin.Forms |
| Xamarin.Forms | 3.1+ |
Description
This article shows you how to hide the increase and decrease buttons of the Telerik UI for Xamarin RadNumericInput control.
Solution
In order to hide the buttons, you'll need to define a custom ControlTemplate that does not have any buttons. Let's start with the original template.
Note: The XAML defined below relies on the following xmlns to be defined:
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
xmlns:numericInput="clr-namespace:Telerik.XamarinForms.Input.NumericInput;assembly=Telerik.XamarinForms.Input"
The original ControlTemplate
Here is the entire original ControlTemplate for the RadNumericInput and its resource dependencies:
<OnPlatform x:TypeArguments="x:Double" x:Key="Height" Default="32">
<On Platform="Android" Value="45" />
<On Platform="iOS" Value="36" />
<On Platform="UWP" Value="32" />
</OnPlatform>
<OnPlatform x:TypeArguments="x:Double" x:Key="MinimumHeight" Default="33">
<On Platform="Android" Value="28" />
<On Platform="iOS" Value="28" />
<On Platform="UWP" Value="33" />
</OnPlatform>
<OnPlatform x:TypeArguments="x:Double" x:Key="Spacing" Default="10">
<On Platform="Android" Value="10" />
<On Platform="iOS" Value="10" />
<On Platform="UWP" Value="10" />
</OnPlatform>
<GridLength x:Key="ButtonWidth">58</GridLength>
<ControlTemplate x:Key="OriginalRadNumericInputControlTemplate">
<Grid ColumnSpacing="{StaticResource Spacing}" HeightRequest="{StaticResource Height}" MinimumHeightRequest="{StaticResource MinimumHeight}">
<Grid.Resources>
<ResourceDictionary>
<Style TargetType="numericInput:NumericInputButton" Class="DefaultNumericInputButtonStyle">
<Setter Property="BorderRadius">
<Setter.Value>
<OnPlatform x:TypeArguments="x:Int32">
<On Platform="iOS" Value="10" />
<On Platform="UWP" Value="0" />
</OnPlatform>
</Setter.Value>
</Setter>
<Setter Property="BorderColor" Value="Accent" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="TextColor" Value="Accent" />
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="0,0,0,0" />
</Style>
<Style TargetType="numericInput:NumericInputEntry" Class="DefaultNumericInputEntryStyle">
<Setter Property="HorizontalTextAlignment" Value="Center" />
<Setter Property="VerticalTextAlignment" Value="Center" />
<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="2">
<On Platform="Android" Value="0,0,0,2" />
<On Platform="iOS" Value="2" />
<On Platform="UWP" Value="2" />
</OnPlatform>
</telerikInput:BorderStyle.BorderThickness>
</telerikInput:BorderStyle>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{StaticResource ButtonWidth}" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="{StaticResource ButtonWidth}" />
</Grid.ColumnDefinitions>
<numericInput:NumericInputButton Text="{TemplateBinding DecreaseButtonText}" Command="{TemplateBinding DecreaseCommand}" StyleClass="DefaultNumericInputButtonStyle" AutomationId="NumericDecreaseButton" />
<numericInput:NumericInputEntry Grid.Column="1" x:Name="PART_Entry" StyleClass="DefaultNumericInputEntryStyle" Text="{TemplateBinding Value, Mode=OneWay}" InputTransparent="{TemplateBinding IsReadOnly}" AutomationId="NumericEntry" />
<numericInput:NumericInputButton Grid.Column="2" Text="{TemplateBinding IncreaseButtonText}" Command="{TemplateBinding IncreaseCommand}" StyleClass="DefaultNumericInputButtonStyle" AutomationId="NumericIncreaseButton" />
</Grid>
</ControlTemplate>
Inside the template's root Grid, there are two NumericInputButton controls. These are the Increase and Decrease buttons which you can safely remove because they do not have an x:Name prefixed with "PART_".
Any
ControlTemplateelement that is prefixed with "PART_" is almost always a required part. Removing such a part will result in the control not working. For example theNumericInputEntrycontrol is named PART_Entry and cannot be removed.
Customing the ControlTemplate
Here is the customized ControlTemplate without the buttons, named with a unique x:Key of CustomRadNumericInputControlTemplate.
<!-- Removed unused resources that were for columns and button sizing -->
<OnPlatform x:Key="Height" x:TypeArguments="x:Double" Default="32">
<On Platform="Android" Value="45" />
<On Platform="iOS" Value="36" />
<On Platform="UWP" Value="32" />
</OnPlatform>
<OnPlatform x:Key="MinimumHeight" x:TypeArguments="x:Double" Default="33">
<On Platform="Android" Value="28" />
<On Platform="iOS" Value="28" />
<On Platform="UWP" Value="33" />
</OnPlatform>
<!-- Removed buttons and unused style, columns and spacing -->
<ControlTemplate x:Key="CustomRadNumericInputControlTemplate">
<Grid HeightRequest="{StaticResource Height}" MinimumHeightRequest="{StaticResource MinimumHeight}">
<Grid.Resources>
<ResourceDictionary>
<Style TargetType="numericInput:NumericInputEntry" Class="DefaultNumericInputEntryStyle">
<Setter Property="HorizontalTextAlignment" Value="Center" />
<Setter Property="VerticalTextAlignment" Value="Center" />
<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="2">
<On Platform="Android" Value="0,0,0,2" />
<On Platform="iOS" Value="2" />
<On Platform="UWP" Value="2" />
</OnPlatform>
</telerikInput:BorderStyle.BorderThickness>
</telerikInput:BorderStyle>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Grid.Resources>
<numericInput:NumericInputEntry x:Name="PART_Entry" StyleClass="DefaultNumericInputEntryStyle" Text="{TemplateBinding Value, Mode=OneWay}" InputTransparent="{TemplateBinding IsReadOnly}" AutomationId="NumericEntry" />
</Grid>
</ControlTemplate>
Notice that the resources that were specifically for buttons have been removed as well. Items like the ColumnDefinitions, button styles and column spacing are no longer needed so we can simplify the template.
Implementation
Make sure that page has xmlns:telerikInput defined:
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
Finally, use the custom ControlTemplate as a StaticResource on any instance of RadNumericInput.
<telerikInput:RadNumericInput ControlTemplate="{StaticResource CustomRadNumericInputControlTemplate}" />