New to Telerik UI for WinUI? Download free 30-day trial

Getting Started with WinUI NumericBox

This topic demonstrates how to start using RadNumericBox for .

Assembly References

In order to use the RadNumericBox in your projects, you have to add references to the following assembly:

  • Telerik.WinUI.Controls.dll
  • Telerik.Licensing.Runtime.dll

Defining a RadNumericBox

You can access the RadNumericBox control through an alias pointing to the Telerik.UI.Xaml.Controls.Input namespace: xmlns:input="using:Telerik.UI.Xaml.Controls.Input"

Example 1: Adding a RadNumericBox in XAML

<Grid xmlns:input="using:Telerik.UI.Xaml.Controls.Input"> 
    <input:RadNumericBox Value="5" Minimum="1" Maximum="10" /> 
</Grid> 

Figure 1: Result from Example 1

WinUI RadNumericBox

Watermark and WatermarkTemplate

The Watermark and WatermarkTemplate properties allow you to customize what is displayed when the Value of the control is not set.

Example 2: Setting the Watermark

<Grid xmlns:input="using:Telerik.UI.Xaml.Controls.Input"> 
    <input:RadNumericBox Watermark="Please, enter a number" /> 
</Grid> 

Example 3: Setting the Watermark and WatermarkTemplate

<input:RadNumericBox Watermark="Please, enter a number" > 
    <input:RadNumericBox.WatermarkTemplate> 
        <DataTemplate> 
            <TextBlock Text="{Binding}" Foreground="Red" /> 
        </DataTemplate> 
    </input:RadNumericBox.WatermarkTemplate> 
</input:RadNumericBox> 

Figure 2: Result from Example 3

WinUI RadNumericBox with a watermark

Header and HeaderTemplate

The Header and HeaderTemplate properties allow you to customize the header of the control displayed above it.

Example 4: Setting the Header

<Grid xmlns:input="using:Telerik.UI.Xaml.Controls.Input"> 
    <input:RadNumericBox Header="My number" Value="5"> 
    </input:RadNumericBox> 
</Grid> 

Example 5: Setting the Header and HeaderTemplate

<Grid xmlns:input="using:Telerik.UI.Xaml.Controls.Input"> 
    <input:RadNumericBox Header="My number" Value="5"> 
        <input:RadNumericBox.HeaderTemplate> 
            <DataTemplate> 
                <TextBlock Text="{Binding}" FontWeight="Bold" TextDecorations="Underline" /> 
            </DataTemplate> 
        </input:RadNumericBox.HeaderTemplate> 
    </input:RadNumericBox> 
</Grid> 

Figure 3: Result from Example 5

WinUI RadNumericBox with a header

ValueFormat and ValueFormatSelector

The ValueFormat and ValueFormatSelector properties allow you to provide a custom format for the data. The ValueFormatSelector allows you to choose a format depending on the current value.

Example 5: Setting the ValueFormat

<Grid xmlns:input="using:Telerik.UI.Xaml.Controls.Input"> 
    <input:RadNumericBox x:Name="numericBox" Value="5" ValueFormat="{}{0:C}" /> 
</Grid> 

Example 6: Setting the ValueFormatSelector

public sealed partial class MainPage : Page 
{ 
    public MainPage() 
    { 
        this.InitializeComponent(); 
 
        this.numericBox.ValueFormatSelector = new ValueFormatSelector(); 
    } 
} 
 
public class ValueFormatSelector : Telerik.Core.IFormatSelector 
{ 
    public string GetFormat(object value) 
    { 
        if(double.Parse(value.ToString()) > 5) 
        { 
            return "{0:C}"; 
        } 
        else 
        { 
            return "{0:N}"; 
        } 
    } 
} 

SmallChange and LargeChange

The SmallChange and LargeChange properties allow for customizing with how much the Value of the control is increased/decreased. The SmallChange is used when scrolling the mouse wheel while the control is focused and also when the up/down arrow keys are pressed. The LargeChange is used when the page up/page down keys are pressed.

Telerik UI for WinUI Learning Resources

See Also

In this article
Not finding the help you need?