Telerik UI for Windows 8 XAML

Here it will be shown how to style the RadNumericBox control conponents explicitly. Setting the TelerikNamedBrushes will affect the whole application while using explicit styles will affect only the current control.

Styling the Increase/DecreaseButton

Note

First you need to resolve Telerik named resources.

In order to style the Increase/Decrease button explicitly, you have to edit the style of its control. To do that you have to add custom style in the Page resources. Here are shown all the properties that affect the style of the button with their default values.

XAML Copy imageCopy
<Style TargetType="primitivesCommon:InlineButton" x:Key="CustomButtonStyle">
    <Setter Property="Padding" Value="9,2,9,4"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="FontFamily" Value="{StaticResource SymbolThemeFontFamily}"/>
    <Setter Property="Background" Value="{StaticResource TelerikNumericBoxSpinButtonBackgroundBrush}"/>
    <Setter Property="Foreground" Value="{StaticResource TelerikNumericBoxSpinButtonForegroundBrush}"/>
    <Setter Property="BorderBrush" Value="{StaticResource TelerikNumericBoxSpinButtonBackgroundBrush}"/>
    <Setter Property="PointerOverBackgroundBrush" Value="{StaticResource TelerikNumericBoxSpinButtonPointerOverBackgroundBrush}"/>
    <Setter Property="PointerOverForegroundBrush" Value="{StaticResource TelerikNumericBoxSpinButtonForegroundBrush}"/>
    <Setter Property="PointerOverBorderBrush" Value="{StaticResource TelerikNumericBoxSpinButtonPointerOverBackgroundBrush}"/>
    <Setter Property="PressedBackgroundBrush" Value="{StaticResource TelerikNumericBoxSpinButtonPressedBackgroundBrush}"/>
    <Setter Property="PressedForegroundBrush" Value="{StaticResource TelerikNumericBoxSpinButtonPressedForegroundBrush}"/>
    <Setter Property="PressedBorderBrush" Value="{StaticResource TelerikNumericBoxSpinButtonPressedBackgroundBrush}"/>
    <Setter Property="DisabledBackgroundBrush" Value="{StaticResource TelerikNumericBoxSpinButtonDisabledBackgroundBrush}"/>
    <Setter Property="DisabledForegroundBrush" Value="{StaticResource TelerikNumericBoxSpinButtonDisabledForegroundBrush}"/>
    <Setter Property="DisabledBorderBrush" Value="{StaticResource TelerikNumericBoxSpinButtonDisabledBorderBrush}"/>
</Style>

You can change every property you wish to custom value but remember that all of them should be present in the style. Then you have to set the Increase/DecreaseButtonStyle property of the RadNumericBox to the custom style as shown in the example below.

XAML Copy imageCopy
<telerik:RadNumericBox DecreaseButtonStyle="{StaticResource CustomButtonStyle}" />

Styling the Header

To style the header of RadNumericBox you have to define custom style in the Page resources.

XAML Copy imageCopy
<Style TargetType="ContentControl" x:Key="CustomHeaderStyle">
    <Setter Property="Foreground" Value="Green"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="FontWeight" Value="Bold"/>
</Style>

Then set the HeaderStyle property of the RadNumericBox to the custom style.

XAML Copy imageCopy
<telerik:RadNumericBox Header="Header" HeaderStyle="{StaticResource CustomHeaderStyle}"/>

The result is shown on the picture below.

Explicit Styling-Header Style