กำจัดศัตรูกวนใจใน NumericUpDown

ปล. ยังไม่ได้ Up รูปเลย.. เดี๋ยวก่อนเด๊อ...


หลังจากคาใจมาก็นาน

เรื่อง Numeric UpDown ที่เป็นลักษณะเหมือน Textbox แต่รับข้อมูลแต่ตัวเลขได้อย่างเดียว ดู ๆ ไปมันก็สะดวก ไม่ต้องมาใส่ Code ลงใน Textbox เพื่อตรวจสอบว่าข้อมูลที่กรอกไปเป็นตัวเลขรึเปล่า อะไรประมาณนั้น

จะโยกมาใช้ Numeric UpDown ก็โดนติงมาว่า ไม่อยากได้ ตัว Updown Spin ที่วางขนาบข้าง ดูแล้วมันเกะกะ User ไม่ชอบ จริง ๆ มันก็น่าจะเป็นผลดี ที่ว่า User เห็นปั๊บจะได้รู้เลยว่า ช่องเนี่ยใส่ตัวเลข อย่างเดียวแน่ ๆ

หาทางแก้ไปพักนึง ก็ไม่มีที่ไหนทำได้ (หรือว่าเราหาไม่เจอเอง) หรือไม่มีใครเค้าทำกันมากกว่า ไม่ใช่มันก็ได้ ก็เลยไปสร้าง Control ขึ้นมาตัวนึง จริง ๆ ไม่ได้สร้างหรอกครับ แต่เป็นการไป Inherits Textbox มาอีกที แล้วเติม Function Property ต่าง ๆ เพื่อทำงานเกี่ยวกับข้อมูลทั้งในส่วนของตัวเลขและตัวหนังสือ ก็ใช้ได้

สาเหตุที่ต้องเขียนเป็น Control ขึ้นมาก็เพราะว่า ลำพังถ้าให้ Programmer ใน Team ไปเขียนดักกันเอาเอง หรืออาจจะสร้าง Function อะไร ๆ ขึ้นมาแล้วให้ Programmer ไป Call ใช้เพื่อการนี้ ก็กลัวมันจะมีปัญหา เพราะเจอมากับตัวว่า โปเกม่อน เอ๊ย โปรแกรมเมอร์แต่ละคน Knowledge Base และการตัดสินใจเฉพาะหน้าไม่เหมือนกัน ก้เลยทำเป็น Control บังคับใช้ไปเลย มีอะไรจะได้เปลี่ยนจากจุดศูนย์กลางทีเดียว ง่ายดี

แต่มันก็ยังตะหงิด ๆ อยู่ดีเพราะฝั่ง Code ไปมากมายเพื่อเติมความสามารถให้ Textbox ตรวจสอบโน่นนี่ เพื่อความถูกต้องในส่วนของข้อมูลที่เป็นตัว

เลข แล้วส่วนอันที่ไม่จำเป็นต้องตรวจสอบ คือจะกรอกอะไรก็ได้รับหมดมันก็กินแรง Process โดยเปล่าประโยชน์ อีกทั้ง เวลาเพิ่มเติมการทำงานเกี่ยวกับ ตัวเลข มันก็ยากด้วย เพราะ ความต้องการของ User ที่โปรแกรมเมอร์บ่น ๆ กัน มันก็ไม่ต่างกันกับของ Programmer ที่ใช้ Tools สำเร็จรูปเช่นกัน

หลังจากบ่นกันมานาน วันนี้ว่างก็เลยลองค้นหาใหม่ดูปรากฏว่า ไม่มีข้อมูลตรงนั้นเหมือนเดิม กะอีแค่ Property ShowUpDown ก็มีให้เหมือน DataTimePicker ก็ไม่ได้ แม๊..... (แอบบ่น ดัง ๆ)

ก็เลยมาลองนั่งเล่นกับมันว่า เจ้า NumericUpdown มันไปสืบทอดเจตนารมณ์หรือไป Inherits มาจากใครบ้างแล้วก็ลอง ๆ ไล่ code ดู

แต่ช่างมันเถอะ ดูทางนี้ดีกว่า จะได้เข้าเรื่อง ซะที

...............................................................................................................................................................
...............................................................................................................................................................

หลังจากค้นหาด้วยการ BreakPoint แล้ว Code เข้าไปในหน้าต่าง Immediate Window
ดังนี้
? NumericUpDown1.Controls.Count

ได้ตัวเลข 2 ออกมา 1 ตัว นั่นคือ เจ้านี่ในตัวมันประกอบไปด้วย Control ลูกภายในทั้งหมด 2 ตัว อ่า....
ไปดูซิว่าแต่ละตัวมันคืออันหยั๋ง



ได้มาหยั่งงี๊ครับ ไม่คุ้นเคย ก็เลยลองไป Search ใน Help ดู ปรากฏว่า ไม่มีทั้งคู่

? NumericUpDown1.Controls(0).GetType.ToString()
"System.Windows.Forms.UpDownBase+UpDownButtons"
? NumericUpDown1.Controls(1).GetType.ToString()
"System.Windows.Forms.UpDownBase+UpDownEdit"


ไม่เป็นไร มั่วเอาก็ได้ โดยจากสิ่งที่มองเห็น UpDownButtons น่าจะเป็น ตัว UpdownSpin และ UpDownEdit น่าจะเป็นที่กรอกข้อมูล ซึ่งเดา ๆ ดูมันก็น่าจะเป็น Textbox ได้ ก็เลย

เออ ใช่ได้เฮอะ เอาหล่ะ ได้อย่างนี้ ก็ค่อนข้างแน่ใจแล้วว่า อีกตัวมันต้องเป็นอย่างที่คิดแน่ ๆ แล้วจะทำไง ก็เลยพาลคิดไปว่า เอา UpDownButtons ออกหรือซ่อนมันไว้ แล้วขยาย Textbox ให้เต็มกรอบน่าจะได้ ก็เลยได้ Code ตัวนี้มา

พอทำได้ เริ่มมันครับ แตกหน่อต่อยอดไปเรื่อยเป็น 2 ลักษณะคือ

1. ทำเป็น Control ที่ Inherits จาก NumericUpdown ต้นฉบับอีกที (ตัวนี้ผมตั้งชื่อเป็น NumBox ครับ)
2. ทำเป็น Function แล้วให้ Programmer Call โดยส่ง NumericUpdawn ที่ต้องการเข้ามาปรับแต่งอีกที

ดูตัวแรกก่อนครับ
ก็ไปสร้าง Class เปล่า ๆ มาตัวนึงแล้วก็ตั้งชื่อ ซึ่งชือที่ต้องในที่นี้ผมใช้ชื่อเหมือนชื่อ Control ที่จะสร้างเลยคือ NumBox ครับ จากนั้นก็ Code นี้ลงไป Build Project ซะ 1 รอบ ถ้าไม่มีอะไรผิดพลาดก็จะเกิด Control ใน ToolsBox ขึ้นมาอีก 1 ตัวครับ



มาแล้ว.....



อีกวิธีนึงที่ใช้วิธีการสร้าง Function
ก็หาที่ว่าง ๆ จะเป็นสร้าง Static หรือ Shared ขึ้นมาใน Class ก็ได้ แต่ตรงนี้ ไม่อยากยาวก็เลยสร้างไว้ใน Form นั้นแหล่ะ เห็นง่ายดี อย่างนี้ครับ



ตามรูปนี่ ผมลองด้วยการกำหนดค่าตอน Click ปุ่มนะครับ ถ้าเอาแบบอัตโนมัติก็อาจจะไปใส่ใน form Load หรือ New ก็ได้ตามสะดวก



พอ Run ดูก็



ตัวที่ 2 เป็น TextBox ธรรมดานะครับ จะเห็นว่าเหมือนกันเด๊ะ ๆ


ที่เห็นว่ามีการผูก Event KeyPress ไว้ด้วยก็เพราะว่า ทางทีมของผมมีการระบุไว้ด้วยว่า Textbox ถ้ากด Enter จะต้อง Focus ไปที่ Tab ถัดไป ไหน ๆ ก็ ไหน ก็เลยฝากฝังมันรวมกันไปเลย

ลองดูครับ
น่าจะมันส์ดี

Create Date : 08 สิงหาคม 2551		1 comments
Last Update : 8 สิงหาคม 2551 16:54:19 น.
Counter : 6415 Pageviews.
Share Tweet