Range Adorner in WPF Integer TextBox

18 Nov 20181 minute to read

The Value of the IntegerTextBox can be visually indicated like a progress bar using the range adorner feature. This feature is disabled by default. You can show the adorner over the WPF Integer TextBox control by setting the EnableRangeAdorner property to true. The default value of EnableRangeAdorner is false. The adorner layer fills the control area on the basis of the minimum and maximum values, taking the current Value into account. The Range Adorner is not displayed when the MinValue or MaxValue property is not set. When the Value is outside the [MinValue, MaxValue] range, the adorner is clamped to the nearest bound.

XAML

<syncfusion:IntegerTextBox x:Name="integerTextBox" Value="63" MinValue="0" MaxValue="100" EnableRangeAdorner="True" />

C#

using Syncfusion.Windows.Shared;

IntegerTextBox integerTextBox = new IntegerTextBox();
integerTextBox.MinValue = 0;
integerTextBox.MaxValue = 100;
integerTextBox.Value = 63;
integerTextBox.EnableRangeAdorner = true;

Changing the Background of the Range Adorner

You can change the background color of the range adorner using the RangeAdornerBackground property. The default value of RangeAdornerBackground is a light-blue brush.

XAML

<syncfusion:IntegerTextBox x:Name="integerTextBox" MinValue="0" MaxValue="100" Value="57" EnableRangeAdorner="True" RangeAdornerBackground="LightGreen"/>

C#

using Syncfusion.Windows.Shared;
using System.Windows.Media;

IntegerTextBox integerTextBox = new IntegerTextBox();
integerTextBox.MinValue = 0;
integerTextBox.MaxValue = 100;
integerTextBox.Value = 57;
integerTextBox.EnableRangeAdorner = true;
integerTextBox.RangeAdornerBackground = Brushes.LightGreen;