UpDown Button (SpinButton) in WinUI NumberBox

28 Sep 20213 minutes to read

This section describes how to change value in the NumberBox control using keys, mouse scrolling and the up-down button.

Increase or decrease value

You can increment or decrement the value in the NumberBox control by using UpArrow, DownArrow, PageUp and PageDown keys. You can change the increment or decrement value when Arrow keys are pressed, using the SmallChange property and for Page keys using the LargeChange property. By default, the value of SmallChange property is 1 and LargeChange property is 10.

NOTE

The value in NumberBox can also be changed by mouse scrolling. The mouse scrolling increases or decreases the value based on the SmallChange property.

XAML

<editors:SfNumberBox HorizontalAlignment="Center"
                     VerticalAlignment="Center" 
                     SmallChange="5"
                     Value="10"
                     LargeChange="10" />

C#

SfNumberBox SfNumberBox= new SfNumberBox();
SfNumberBox.PlaceholderText = "Enter input here...";
sfNumberBox.HorizontalAlignment = HorizontalAlignment.Center;
sfNumberBox.VerticalAlignment = VerticalAlignment.Center;

UpDown button placement

You can increase or decrease the value of the NumberBox control using the up-down button. By default, the value of UpDownPlacementMode property is Hidden. You can change the up-down button position by assigning the value UpDownPlacementMode property as Inline or Compact.

NOTE

When using the up-down button, the NumberBox control value changes based on the value of the SmallChange property.

XAML

<editors:SfNumberBox x:Name="sfNumberBox" 
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     UpDownPlacementMode="Inline" />

C#

SfNumberBox sfNumberBox = new SfNumberBox();
sfNumberBox.HorizontalAlignment = HorizontalAlignment.Center;
sfNumberBox.VerticalAlignment = VerticalAlignment.Center;
sfNumberBox.UpDownPlacementMode = NumberBoxUpDownPlacementMode.Inline;

TextBox visibility

The TextBoxVisibility property can be used to hide or show the visibility of a text box in a number box.
When the text box visibility is collapsed, only the UpDown buttons are visible. You can change the control values by using the UpDown buttons.

NOTE

This feature is enabled when the UpDownPlacementMode value is Inline.

XAML

<editors:SfNumberBox x:Name="numberBox"
                     Height="75" 
                     Width="300"
                     TextBoxVisibility="Collapsed"
                     UpDownPlacementMode="Inline"/>

C#

SfNumberBox SfNumberBox = new SfNumberBox();
SfNumberBox.TextBoxVisibility = Visibility.Collapsed;
SfNumberBox.UpDownPlacementMode = NumberBoxUpDownPlacementMode.Inline;

If the TextBoxVisibility value is collapsed,

If the TextBoxVisibility value is Visible,