Step Interval in WPF Percent TextBox

21 May 20213 minutes to read

The PercentTextBox control allows you to increase or decrease the percent value by pressing up-arrow and down-arrow keys in keyboard or mouse wheel over the control. The ScrollInterval property is used to specify the increment or decrement interval. The default value of ScrollInterval is 1.

For example, the ScrollInterval value is set to 4. So, that the PercentTextBox control PercentValue increases or decreases by 4 while pressing Up arrow or Down arrow keys and Mouse wheel scrolling up or down.

Change Value on Up, Down arrow key

The PercentTextBox control allows you to increase or decrease the PercentValue of PercentTextBox based on the ScrollInterval by pressing the up arrow and down arrow keys on the keyboard.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Width="150"
                          Height="25" PercentValue ="10" ScrollInterval="2"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 150;
percentTextBox.Height = 25;
percentTextBox.PercentValue = 10;
percentTextBox.ScrollInterval = 2;

Change Value on Mouse Wheel

The PercentTextBox allows you to increase or decrease the PercentValue based on the ScrollInterval by the Mouse scrolling over the control When the IsScrollingOnCircle property is true. The default value of IsScrollingOnCircle property is true.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Width="150" Height="25" PercentValue ="34" 
                          IsScrollingOnCircle="True" ScrollInterval="3"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 150;
percentTextBox.Height = 25;
percentTextBox.PercentValue = 34;
percentTextBox.IsScrollingOnCircle = true;
percentTextBox.ScrollInterval = 3;

Change Value on Click and Drag

The PercentTextBox allows you to increase or decrease the percent value based on the ScrollInterval by clicking and dragging the mouse when the EnableExtendedScrolling property is true. PercentTextBox percent value increases when the cursor moves to the right or the top of the screen and decreases when you click and drag the mouse to the left or the bottom of the screen. Before that, the control should be in an unfocused state.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Width="120" Height="25" PercentValue ="10" 
                          ScrollInterval="5" EnableExtendedScrolling="True"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 120;
percentTextBox.Height = 25;
percentTextBox.PercentValue = 10;
percentTextBox.ScrollInterval = 5;
percentTextBox.EnableExtendedScrolling = true;

Allow or restrict selection on focus

PercentTextBox allows you to automatically select text by setting TextSelectionOnFocus property to true and when the control got focus. If you want to restrict the selection on when control got focus, use the TextSelectionOnFocus property value as false. The default value of the TextSelectionOnFocus property is true.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" TextSelectionOnFocus="False"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.TextSelectionOnFocus = true;

TextSelectionOnFocus = “False”

TextSelectionOnFocus = “True”