Good NumericUpDown equivalent in WPF?

Question

I'm looking for a simple NumericUpDown (a.k.a. number spinner) control in WPF. This seems to be another lacking control in WPF. There must be some existing ones out there and I don't like to re-invent the wheel.

That's a damn bad joke. I became resistant to searching for wpf controls, in fear that I won't find them. — MadeOfAir, Jan 18 '14 at 19:08
Xaml only solution: https://stackoverflow.com/a/63734191/6859121 — Squirrel.Downy, Mar 01 '21 at 11:21

score 100 · Accepted Answer · edited Nov 15 '12 at 08:12

100

The Extended WPF Toolkit has one: NumericUpDown enter image description here

edited Nov 15 '12 at 08:12

Artur Carvalho

6,046
10
62
91

answered Mar 17 '11 at 03:23

26

Update: The Extended WPF Toolkit replaced that control with these DecimalUpDown, DoubleUpDown, or IntegerUpDown. – Erez Mar 18 '13 at 14:41
1

FYI, Xceed announced that [https://github.com/xceedsoftware/wpftoolkit](they will continue to publish version 3.8.x under the MS-PL until 31 Dec 2020). "This will be the last version to be released under such license, and the next release will be under our new community license, which only allows non-commercial use." – skst Oct 19 '20 at 01:49

score 1 · Answer 2 · answered Sep 14 '09 at 12:06

If commercial solutions are ok, you may consider this control set: WPF Elements by Mindscape

It contains such a spin control and alternatively (my personal preference) a spin-decorator, that can decorate various numeric controls (like IntegerTextBox, NumericTextBox, also part of the control set) in XAML like this:

<WpfElements:SpinDecorator>
   <WpfElements:IntegerTextBox Text="{Binding Foo}" />
</WpfElements:SpinDecorator>

Andrey Burykin · Answer 3 · 2021-01-14T14:45:14.887

A control that is missing from the original set of WPF controls, but much used, is the NumericUpDown control. It is a neat way to get users to select a number from a fixed range, in a small area. A slider could be used, but for compact forms with little horizontal real-estate, the NumericUpDown is essential.

Solution A (via WindowsFormsHost)

You can use the Windows Forms NumericUpDown control in WPF by hosting it in a WindowsFormsHost. Pay attention that you have to include a reference to System.Windows.Forms.dll assembly.

<Window x:Class="WpfApplication61.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>    
        <WindowsFormsHost>
            <wf:NumericUpDown/>
        </WindowsFormsHost>
...

Solution B (custom)

There are several commercial and codeplex versions around, but both involve installing 3rd party dlls and overheads to your project. Far simpler to build your own, and a aimple way to do that is with the ScrollBar.

A vertical ScrollBar with no Thumb (just the repeater buttons) is in fact just what we want. It inherits rom RangeBase, so it has all the properties we need, like Min, Max, and SmallChange (set to 1, to restrict it to Integer values)

So we change the ScrollBar ControlTemplate. First we remove the Thumb and Horizontal trigger actions. Then we group the remains into a grid and add a TextBlock for the number:

<Grid Margin="2">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <TextBlock VerticalAlignment="Center" FontSize="20" MinWidth="25" Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}"/>
    <Grid Grid.Column="1" x:Name="GridRoot" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Background="{TemplateBinding Background}">
        <Grid.RowDefinitions>
            <RowDefinition MaxHeight="18"/>
            <RowDefinition Height="0.00001*"/>
            <RowDefinition MaxHeight="18"/>
        </Grid.RowDefinitions>
        <RepeatButton x:Name="DecreaseRepeat" Command="ScrollBar.LineDownCommand" Focusable="False">
            <Grid>
                <Path x:Name="DecreaseArrow" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Data="M 0 4 L 8 4 L 4 0 Z"/>
            </Grid>
        </RepeatButton>
        <RepeatButton Grid.Row="2" x:Name="IncreaseRepeat" Command="ScrollBar.LineUpCommand" Focusable="False">
            <Grid>
                <Path x:Name="IncreaseArrow" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Data="M 0 0 L 4 4 L 8 0 Z"/>
            </Grid>
        </RepeatButton>
    </Grid>
</Grid>

Sources:

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/28077147) — lissettdm, Jan 14 '21 at 13:22

score 1 · Answer 4 · edited Jun 30 '11 at 14:41

1

add a textbox and scrollbar

in VB

Private Sub Textbox1_ValueChanged(ByVal sender As System.Object, ByVal e As System.Windows.RoutedPropertyChangedEventArgs(Of System.Double)) Handles Textbox1.ValueChanged
     If e.OldValue > e.NewValue Then
         Textbox1.Text = (Textbox1.Text + 1)
     Else
         Textbox1.Text = (Textbox1.Text - 1)
     End If
End Sub

edited Jun 30 '11 at 14:41

SLaks

800,742
167
1,811
1,896

answered Nov 28 '10 at 21:13

Skarstoker

11
1

Good NumericUpDown equivalent in WPF?

4 Answers4

Linked