How to hide arrows on numericUpDown control in win forms?

Question

to hide the arrows I have added numericUpDown.Controls[0].Hide(); and it hides the arrows but leaves white space when form is opened.

How to hide them to be like simple textBox?

Answer 1

You can hide the arrows by accessing the numericUpDown's Controls property. You can either hide or remove them:

numericUpDown1.Controls[0].Visible = false;

or

numericUpDown1.Controls.RemoveAt(0);

You can do this right after IntializeComponent().

Answer 2

This solution also removes the unused space:

public class MyNumericUpDown : NumericUpDown
{
    public MyNumericUpDown()
    {
        Controls[0].Hide();
    }

    protected override void OnTextBoxResize(object source, EventArgs e)
    {
        Controls[1].Width = Width - 4;
    }
}

Answer 3

NumericUpDownare nice, they bring Min, Max and Increment values for free and hold doubles.

But I can understand your aim, they are truly ugly and the cursor keys work just as well without those pesky little arrows; but I can't even hide or remove them visually here.

So I think the best option will be to put the NUD into a smaller Label and thereby cover the right part of it..

If you want to you can wrap the following workaround in a NakedNumericUpDown class ;-)

nudLabel.AutoSize = false;
nudLabel.Location = numericUpDown1.Location;
nudLabel.BorderStyle = numericUpDown1.BorderStyle;
numericUpDown1.BorderStyle = BorderStyle.None;
numericUpDown1.Controls.RemoveAt(0);  // optional
numericUpDown1.Parent = nudLabel;
numericUpDown1.Location = Point.Empty;
nudLabel.ClientSize = numericUpDown1.Size;
nudLabel.Width -= 25;  // shrink enough to cover the arrows

You may want to create the Label dynamically, of course..

One problem is that now there is no visual clue that the users can up the arrow keys to change the values, though

Answer 4

You can use this code. This code show up&down controllers, but they dont work, you use this code in Form_Load

YourNumericName.Controls[0].Enabled= false;

Answer 5

Add a custom Paint event to draw the arrows how you want (or draw over them).

E.g.

    NumericUpDown nud = new NumericUpDown();
    nud.Font = new Font(FontFamily.GenericSansSerif, 20f, FontStyle.Regular);
    bool isSet = false;
    NW nw = null;
    nud.Enabled = false;
    nud.VisibleChanged += delegate {
        // NUD children consist of two child windows:
        // 1) TextBox
        // 2) UpDownBase - which uses user draw
        if (!isSet) {
            foreach (Control c in nud.Controls) {
                if (!(c is TextBox)) {
                    // prevent flicker
                    typeof(Control).InvokeMember("DoubleBuffered", BindingFlags.SetProperty | BindingFlags.Instance | BindingFlags.NonPublic, null, c, new object[] { true });
                    c.Paint += (sender,e) => {
                        var g = e.Graphics;
                        int h = c.Height;
                        int w = c.Width;

                        // cover up the default Up/Down arrows:
                        //g.FillRectangle(SystemBrushes.Control, 3, 3, w - 6, h/2 - 6);
                        //g.FillRectangle(SystemBrushes.Control, 3, h/2 + 3, w - 6, h/2 - 6);

                        // or hide the entire control
                        if (nud.Enabled)
                            g.Clear(nud.BackColor);
                        else
                            g.Clear(SystemColors.Control);
                    };

                    nw = new NW(c.Handle);
                    isSet = true;
                }
            }
        }
    };

To ignore click events:

class NW : NativeWindow {

    public NW(IntPtr hwnd) {
        AssignHandle(hwnd);
    }
    const int WM_NCHITTEST = 0x84;
    protected override void WndProc(ref Message m) {
        if (m.Msg == WM_NCHITTEST)
            return;

        base.WndProc(ref m);
    }
}

Answer 6

Create your own numeric class. Numeric controls contains 2 controls. First textbox and second buttons. Hide first one and all your problems will be solved.

 public class MyCustomNumericBox : System.Windows.Forms.NumericUpDown
    {
        public MyCustomNumericBox()
        {
           Controls[0].Visible = false;
        }
    }

Then from toolbox get your numerir control: MyCustomNumericBox. Or you can delete that control during constructor init and that's all

     public class MyCustomNumericBox : System.Windows.Forms.NumericUpDown
    {
        public MyCustomNumericBox()
        {
           Controls.Remove(Controls[0]);
        }
    }

Full code to fit your request: 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Drawing;
using System.Windows.Forms;
namespace yournamespace
{
    class NumericBx: NumericUpDown
    {
        public NumericBx()
        {
            var ctr = Controls[0];
            this.Controls[0].Visible = false;
            this.Controls[0].Enabled = false;
            this.Controls.Remove(ctr);
            // I have tried to rewrite sizes to hide unused area...but visual studio fails to 
            //show num control. That is why this part is commented 
            //Controls[0].Size = new Size(0, ClientSize.Height);
            //Controls[1].Size = new Size(ClientSize.Width, ClientSize.Height);
        }
    }
}

Answer 7

Aren't the arrows just the reason why anyone would use numericupdown control? If you want it to be like textbox, then use textbox. Get the functionality for keyboard up or down arrow presses intercepting the keydown event.

Answer 8

It's not the most elegant solution, but you can use a panel in the Form Designer and set the BackColor property to white and cover the arrows.

Of course this creates a white area where the user cannot interact with the control, so I recommend covering the NumericUpDown's borders and drawing a line on the left edge of the panel. (Looks something like this screenshot in the designer).

Then, add a Paint event to the panel:

private void panel1_Paint(object sender, PaintEventArgs e)
{
  using (Pen pen = new Pen(Color.FromArgb(174, 173, 179), 1))
  {
    e.Graphics.DrawLine(pen, 0, 0, 0, panel1.Height);
  }
}

Answer 9

I know this is an old thread but no one has solved it satisfactorily. And here is mine solution:

1. Create a new "CustomControl"

2. Change CustomControl to NumericUpDown

3. Add an OnResize overridee

   public partial class nNumeric : NumericUpDown
   {
       public nNumeric()
       {
           InitializeComponent();
       }
       protected override void OnResize(EventArgs e)
       {
           var buttons = this.Controls[0];
           var edit = this.Controls[1];
           buttons.Visible = false;
           edit.MinimumSize = new Size( Width - edit.Left*2, 0);
           edit.Width = this.Width;
       }
   }
   

4. done, simple and effective :)

I hope it will help someone :)

Answer 10

Simple solution:change the input type from number to tel input type="tel"