Where is the WPF Numeric UpDown control?

Question

Getting into the first serious WPF project. It seems like there are a lot of basic controls flat out missing. Specifically, I am looking for the Numeric UpDown control. Was there an out of band release that I missed? Really don't feel like writing my own control.

I do not want to use the WindowsFormHost and plop a WinForm ctl on it. I want it to be fully WPF without any legacy junk.

Thanks

I do not want to use the WindowsFormHost and plop a WinForm ctl on it. I want it to be fully WPF without any legacy junk.

Thanks

user_6859121 · Answer

Let's enjoy some hacky things:
Here is a Style of Slider as a NumericUpDown, simple and easy to use, without any hidden code or third party library.

If you want apply input restrictions on TextBox indeed, try this:

public static class InputLimit
{
    public static string GetDecimalValueProxy(TextBox obj) => (string)obj.GetValue(DecimalValueProxyProperty);

    public static void SetDecimalValueProxy(TextBox obj, string value) => obj.SetValue(DecimalValueProxyProperty, value);

    // Using a DependencyProperty as the backing store for DecimalValueProxy.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty DecimalValueProxyProperty =
        DependencyProperty.RegisterAttached("DecimalValueProxy", typeof(string), typeof(InputLimit),
            new FrameworkPropertyMetadata("0", FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, null, CoerceDecimalValueProxy));

    private static object CoerceDecimalValueProxy(DependencyObject d, object baseValue)
    {
        if (decimal.TryParse(baseValue as string, out _)) return baseValue;
        return DependencyProperty.UnsetValue;
    }
}

And modify xaml TextBox part to:

EDIT:
But the above code has a nasty bug...
Look at the code:

Text="{Binding Value, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}"

The TextBox will update value after it lost focus, but if you add UpdateSourceTrigger=PropertyChanged in Binding, you will cannot type dot(.) into TextBox.

You can use next converter code to fix it:

public class SafeDotConverter : MarkupExtension, IValueConverter
{
    private bool hasDot;
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var dbl = (double)value;
        if (hasDot && Math.Truncate(dbl) == dbl)
        {
            return $"{dbl}.";
        }
        return value.ToString();
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string str)
        {
            hasDot = str.EndsWith(".");

            if (double.TryParse(str, out var val))
                return val;
        }
        return DependencyProperty.UnsetValue;
    }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }
}

Use in Xaml:

Text="{Binding Value, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={local:SafeDotConverter}}"

user_3436326 · Answer

Apologize for keep answering 9 years questions.

I have follow @Michael's answer and it works.

I do it as UserControl where I can drag and drop like a Controls elements. I use MaterialDesign Theme from Nuget to get the Chevron icon and button ripple effect.

The running NumericUpDown from Micheal with modification will be as below:-

The code for user control:-

TemplateNumericUpDown.xaml

TemplateNumericUpDown.cs

using System.Windows;
using System.Windows.Controls;

namespace UserControlTemplate
{
    /// 
    /// Interaction logic for TemplateNumericUpDown.xaml
    /// 
    public partial class TemplateNumericUpDown : UserControl
    {
        private int _numValue = 0;
        public TemplateNumericUpDown()
        {
            InitializeComponent();
            txtNum.Text = _numValue.ToString();
        }
        public int NumValue
        {
            get { return _numValue; }
            set
            {
                if (value >= 0)
                {
                    _numValue = value;
                    txtNum.Text = value.ToString();
                }
            }
        }

        private void CmdUp_Click(object sender, RoutedEventArgs e)
        {
            NumValue++;
        }

        private void CmdDown_Click(object sender, RoutedEventArgs e)
        {
            NumValue--;
        }

        private void TxtNum_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (txtNum == null)
            {
                return;
            }

            if (!int.TryParse(txtNum.Text, out _numValue))
                txtNum.Text = _numValue.ToString();
        }
    }
}

On MyPageDesign.xaml, drag and drop created usercontrol will having

To get the value from the template, I use

string Value1 = JournalNumStart.NumValue;
string Value2 = JournalNumEnd.NumValue;

I'm not in good skill yet to binding the Height of the control based from FontSize element, so I set the from my page fontsize manually in usercontrol.

** Note:- I have change the "Archieve" name to Archive on my program =)

user_8276908 · Answer

Here is another open source control that has many different input methods (mouse drag, mouse wheel, cursor keys, textbox editing), supports many data types and use cases:

https://github.com/Dirkster99/NumericUpDownLib

user_12920956 · Answer

This is a modification of another answer but with binding support


using System.Windows;
using System.Windows.Controls;

namespace YourNamespace.Controls
{
    public partial class NumericUpDown : UserControl
    {

        public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
            "Value", typeof(int), typeof(NumericUpDown), new PropertyMetadata(default(int)));

        public int Value
        {
            get { return (int) GetValue(ValueProperty); }
            set
            {
                SetValue(ValueProperty, value); 
                txtNum.Text = value.ToString();
            }
        }
        
        public NumericUpDown()
        {
            InitializeComponent();
            txtNum.Text = Value.ToString();
        }

        private void cmdUp_Click(object sender, RoutedEventArgs e)
        {
            Value++;
        }

        private void cmdDown_Click(object sender, RoutedEventArgs e)
        {
            Value--;
        }

        private void txtNum_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (txtNum == null)
            {
                return;
            }

            if (!int.TryParse(txtNum.Text, out var val))
            {
                Value = val;
                txtNum.Text = val.ToString();
            }
        }
    }
}

user_2042691 · Answer

Just a pragmatic to do sample:

-Right click your Project (under Solution), select "Manage nuget Packages..."

-In Menu click Browse Tab search for "wpftoolkit", select "Extended.Wpf.Toolkit"

-Install it!

-Right click in your User Control Toolbox, select "Add Tab.." and name it "WPF Toolkit"

-Right click on the new "WPF Toolkit" Tab, select "Choose items..."

-In Menu click "Browse..." Button, look for nugets DLL folder, select all "...\packages\Extended.Wpf.Toolkit.3.5.0\lib et40\*.dll"

Ignore Warnings about some DLLs may not containing user controls!

Ready :)

user_9858180 · Answer

You can use "NumericUpDown".

Here is the link https://mahapps.com/docs/controls/numericupdown

user_8056120 · Answer

Go to NugetPackage manager of you project-> Browse and search for mahApps.Metro -> install package into you project. You will see Reference added: MahApps.Metro. Then in you XAML code add:

"xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"

Where you want to use your object add:

Enjoy the full extensibility of the object (Bindings, triggers and so on...).

user_14927507 · Answer

Free version of Extended.Wpf.Toolkit doesn't support .net core and .net

You can use HandyControl, it has a NumericUpDown control and works good in Wpf and .net 5.

https://github.com/HandyOrg/HandyControl

Where is the WPF Numeric UpDown control?

16 Answers