CODEWITHSUNDEEP
c#winforms
AYETY
AYETY

Reputation: 710

How to hide arrows on numericUpDown control in win forms?

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

enter image description here

How to hide them to be like simple textBox?

Upvotes: 19

Views: 34897

Answers (11)

Robert
Robert

Reputation: 11

I have a quick-and-dirty 3-line workaround for that:

int widthOfSpinButtons = this.numericUpDown.Controls[0].Width; // store width of spin buttons before removing them
this.numericUpDown.Controls[0].Dispose(); // remove spin buttons; after this, the first item left in the list of controls is the UpDownEdit control (the texbox)
this.numericUpDown.Controls[0].MinimumSize = new Size(this.numericUpDown.Controls[0].Width + widthOfSpinButtons, this.numericUpDown.Controls[0].MinimumSize.Height); // increase the minimum width of the UpDownEdit (the textbox) to its current width plus the width of the removed spin buttons

Upvotes: 1

Marek Mucha
Marek Mucha

Reputation: 11

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 :)

Upvotes: 0

D8A
D8A

Reputation: 1

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);
  }
}

Upvotes: 0

morteza
morteza

Reputation: 35

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;

Upvotes: 3

aminjabari
aminjabari

Reputation: 59

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

Upvotes: -2

KodFun
KodFun

Reputation: 423

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;
    }
}

Upvotes: 7

user3750325
user3750325

Reputation: 1551

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().

Upvotes: 19

Jevgenij Kononov
Jevgenij Kononov

Reputation: 1239

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);
        }
    }
}

Upvotes: 1

Loathing
Loathing

Reputation: 5266

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);
    }
}

Upvotes: 1

TaW
TaW

Reputation: 54433

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

Upvotes: 2

Sami
Sami

Reputation: 2110

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.

Upvotes: 0

Related Questions