เริ่มต้นสร้าง Custom Control ใน .Net C# ตอนที่ 1

ในการพัฒนาโปรแกรม อาจจะพบความยุ่งยากซับซ้อน เมื่อมีทีมร่วมทำงานกันหลายคน แน่นอนว่าต้องมีการขุด OOP ขึ้นมาใช้อย่างถึงแก่น ไม่ว่าจะเป็น Override, Overload , Inheritance และอีกมากมาย แต่การพัฒนาแบบ OOP ก็ไม่ได้มีแต่การเขียนในรูปแบบ Class Libraly อย่างเดียว บางอย่างหากเราจับมาเขียนเป็น Control จะสะดวกกับการใช้งานมากกว่า ผู้เขียนจะแสดงตัวอย่างการสร้าง Control ด้วย Visual Studio 2010 (.Net 4.0)

สร้าง Custom Control ที่สืบทอดจาก Button
ผู้เขียนสร้าง Project เป็น Windows Forms Application ขึ้นมาแล้วทำการเพิ่มไฟล์ Custom Control เข้าใน Solution Explorer

คลิ๊กเมาส์ขวาที่ Project เลือก Add > New Item...

เลือก Custom Control ในที่นี้ผู้เขียนตั้งชื่อเป็น myButton

Class เริ่มต้นที่ Visual Studio สร้างขึ้น

คลาสที่สร้างให้เมื่อเพิ่มไฟล์ Custom Control จะเป็นคลาสที่สืบทอด (Inheritance) มาจากคลาสพื้นฐานของคือคลาส Control หากเราต้องการจะสร้าง Control ใหม่ขึ้นมาก็สามารถ Implement ได้เลย แต่ในที่นี้ผู้เขียนไม่ต้องการสร้าง Control ใหม่ แต่ต้องการนำ Control เดิมมาเพิ่มเติมความสามารถ ผู้เขียนจึงเปลี่ยนในส่วนของการสืบทอด แทนที่จะสืบทอดมาจาก Control ก็เปลี่ยนเป็นให้สืบทอดจาก Button


    public partial class myButton : Button
    {
        //method Constructor
        public myButton()
        {
            InitializeComponent();
        }


        //method ในการวาด Control ที่ทำการ Override เพิ่มเติม แต่ยังใช้ความสามารถของ base class ด้วย
        protected override void OnPaint(PaintEventArgs pe)
        {
            base.OnPaint(pe);
        }
    }



ผู้เขียนจะทำให้ myButton เป็นปุ่มที่เหมือนมีไฟติดเวลานำเมาส์ไปวาง
ในที่นี้ผู้เขียนอยากแนะนำให้เน้นความสำคัญไปที่ method OnPaint ซึ่งจะทำงานอยู่ตลอดเวลาในโปรแกรมแบบ GUI

คำสั่งในการทำงานทั้งหมด



    public enum isEvent { move, none }  //สร้างชนิดข้อมูลเพื่ออ้างอิงสถานะ
    public partial class myButton : Button
    {
        private isEvent IE = isEvent.none;  //ตัวแปรเก็บค่าสถานะ
        public myButton()
        {
            InitializeComponent();
        }


        //ปรับปรุงความสามารถการวาดที่สืบทอดมา
        protected override void OnPaint(PaintEventArgs pe)
        {
            base.OnPaint(pe);  //สืบทอดรูปแบบจากคลาสแม่
            this.RePaint(pe);  //method ในการระบายสี เมื่อสถานะปุ่มเปลี่ยนไป
        }


        //ปรับปรุงความสามารถของ Event เมื่อนำเมาส์เคลื่อนออกจากปุ่ม
        protected override void OnMouseLeave(EventArgs e)
        {
            this.IE = isEvent.none; //กำหนดให้สถานะเป็น none
            base.OnMouseLeave(e); //สืบทอดความสามารถเดิม
        }


        //ปรับปรุงความสามารถของ Event เมื่อเคลื่อนเมาส์บนปุ่ม
        protected override void OnMouseMove(MouseEventArgs mevent)
        {
            this.IE = isEvent.move; //กำหนดให้สถานะเป็น move
            base.OnMouseMove(mevent);  //สืบทอดความสามารถเดิม
        }


        //เปลี่ยนค่าสีตามสถานะ
        private void setGradientColor(PaintEventArgs e)
        {
            Color? c1 = null;
            Color? c2 = null;


            //ตรวจสอบสถานะและเก็บค่าสี 
            switch (this.IE)
            {
                case isEvent.move:
                    c1 = Color.FromArgb(130, Color.Yellow);
                    c2 = Color.FromArgb(70, Color.Black);
                    break;
                default:
                    c1 = Color.FromArgb(50, Color.White);
                    c2 = Color.FromArgb(100, Color.Black);
                    break;
            }


            //วาดสี่เหลี่ยมและระบายสีเป็นแบบ Gradient
            Brush b = new System.Drawing.Drawing2D.LinearGradientBrush(ClientRectangle, (Color)c1, (Color)c2, 90);
            e.Graphics.FillRectangle(b, this.ClientRectangle);
            b.Dispose();
        }


        //วาดรูปแบบที่ต้องการ
        private void RePaint(PaintEventArgs e)
        {
            this.Cursor = Cursors.Hand;  //ให้ปุ่มมีเคอเซอร์เป็นรูปมือเสมอ
            this.setGradientColor(e);  //วาดและระบายสีลงไปที่ปุ่ม


            //ปรับเปลี่ยนรูปแบบตัวอักษรตามสถานะ
            switch (this.IE)
            {
                case isEvent.move:
                    this.ForeColor = Color.Black;
                    this.Font = new Font(this.Font.FontFamily, 12, FontStyle.Bold);
                    break;
                default:
                    this.ForeColor = Color.Black;
                    this.Font = new Font(this.Font.FontFamily, (float)9.5, FontStyle.Regular);
                    break;
            }
        }
    }



เป็นอันเสร็จสิ้นกับการสร้าง Control ให้ Compile และ Build ได้เลย จะพบว่าใน ToolBox จะปรากฎ Control ใหม่ขึ้นมา

Control "myButton"

ทดสอบโดยการลากมาวาง เหมือนปุ่มทั่วไป แล้วรันโปรแกรม

ลักษณะปุ่มเมื่อเปิดโปรแกรม

เมื่อนำเมาส์วางบนปุ่ม จะมีสีเหมือนปุ่มไฟ