Explicit Styling

This article will demonstrate how to style the RadNumericBox control conponents explicitly.

Styling the Increase/DecreaseButton

In order to style the Increase/Decrease button explicitly, you can use the IncreaseButtonStyle and DecreaseButtonStyle properties as demonstrated in Examples 1 and 2.

Example 1: Creating the custom styles

<Application.Resources> 
    <ResourceDictionary xmlns:primitivesCommon="using:Telerik.UI.Xaml.Controls.Primitives.Common"> 
        <ResourceDictionary.MergedDictionaries> 
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" /> 
            <ResourceDictionary Source="ms-appx:///Telerik.WinUI.Controls/Themes/Generic.xaml"/> 
        </ResourceDictionary.MergedDictionaries> 
 
        <Style x:Key="CustomNumericButtonIncreaseStyle" TargetType="primitivesCommon:InlineButton" BasedOn="{StaticResource NumericButtonIncreaseStyle}"> 
             <Setter Property="Background" Value="Green"/> 
        </Style> 
 
        <Style x:Key="CustomNumericButtonDecreaseStyle" TargetType="primitivesCommon:InlineButton" BasedOn="{StaticResource NumericButtonDecreaseStyle}"> 
            <Setter Property="Background" Value="Red"/> 
        </Style> 
    </ResourceDictionary> 
</Application.Resources> 

Example 2: Setting the IncreaseButtonStyle and DecreaseButtonStyle

<Grid xmlns:input="using:Telerik.UI.Xaml.Controls.Input"> 
    <input:RadNumericBox    Value="5"  Width="250" VerticalAlignment="Center"  IncreaseButtonStyle="{StaticResource CustomNumericButtonIncreaseStyle}" DecreaseButtonStyle="{StaticResource CustomNumericButtonDecreaseStyle}"/> 
</Grid> 

Figure 1: Result from Example 2

Styling the Header

To style the header of RadNumericBox you can set the HeaderStyle property as demonstrated in Example 1.

Example 3: Setting the HeaderStyle

<Grid xmlns:input="using:Telerik.UI.Xaml.Controls.Input"> 
    <Grid.Resources> 
        <Style TargetType="ContentControl" x:Key="CustomHeaderStyle"> 
            <Setter Property="Foreground" Value="Green"/> 
            <Setter Property="FontSize" Value="20"/> 
            <Setter Property="FontWeight" Value="Bold"/> 
        </Style> 
    </Grid.Resources> 
    <input:RadNumericBox Header="My header" Value="5"  Width="250" VerticalAlignment="Center" HeaderStyle="{StaticResource CustomHeaderStyle}" /> 
</Grid> 

Figure 2: Result from Example 3