Circular button | طريقة إنشاء زر دائري بلغة السي شارب

Circular button | طريقة إنشاء زر دائري بلغة السي شارب

عندما تريد انشاء اداة مخصصة من ادوات التحكم الموجودة في السي شارب
تقوم بإنشاء كلاس وتقوم بتسمية هذا الكلاس باسم يدل على الاداة المخصصة التي ستقوم بصنعها


مثلا في هذا الموضوع سوف نقوم بتسمية الكلاس باسم Circular button يعني زر دائري
سوف نختصر الاسم ونجعل اسم الكلاس CButton  ونجعله يورث من الكلاس Button لكي نعمل نسخه معدله من الاداة الاساسية

كود الكلاس مع الشرح :
ملاحظة : عندما تقوم بإنشاء كلاس لاتنسى ان تقوم بتضمين الفضاء Drawing و Windows.Forms

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace CircularButtons
{
   
    class CButton : Button
    {
        // انشاء اعضاء اداة التحكم وتهيئتها بقيم ابتدائيه

        private Color borderColor = Color.Red; // لون الحدود
        private Color onHoverBorderColor = Color.Red;// لون الحدود عندما يكون الماوس فوق الزر
        private Color buttonColor = Color.Red;// لون الزر
        private Color onHoverButtonColor = Color.Red;// لون الزر عندما يكون المؤشر بينه
        private Color textColor = Color.White; // لون النص الذي يعرض على الزر
        private Color onHoverTextColor = Color.White;// لون النص عندما يكون المؤشر بداخل الزر

        private bool isHovering; /*
        متغير منطقي يقوم بفحص حالة الماوس
    MouseLeave و   MouseEnter   من خلال الاحداث
        
         كما في الاكواد التاليه بداخل دالة البناء
         */
        private int borderThickness = 0; // سمك الحدود
        private int borderThicknessByTwo = 0;

       
        public CButton() // دالة البناء
        {

         //  DoubleBuffered = true;





            MouseEnter += (sender, e) =>
            {
                isHovering = true;
/*
// لاحظ هذه الطريقة المختصرة التي من خلاله قمنا بمعالجة حدث  دخول الماوس
   بدون ما نعمل دالة حدث وبدون اي جهد
  
               ملاحظة هذه الطريقة في معالجة الاحداث تتم داخل دوال البناء      
 
               
              عندما يكون المؤشر داخل مساحة الزر True تكون قيمة المتغير المنطقي تساوي 
    */
   
   
    };
            MouseLeave += (sender, e) =>
            {
                isHovering = false;
               // نفس العملية الاولة بس للحدث مغادرة الماوس
            };

           // المظهر
            FlatStyle = FlatStyle.Flat; 
            FlatAppearance.BorderSize = 0;
           
            // ButtonBase الخصائص التي في الاعلى مشتقات من الكلاس الاساسي
            //

            // تهيئة قيمة الخط الافتراضية للزر
            Font = new Font("Tahoma", 12, FontStyle.Bold);


            Size = new Size(138, 54);

            /*
             ستكون قيم هذا الزر الخط والمظهر و الحجم
             قيم افتراضية عندما تكون تسحب الزر للفورم بتكون هذه قيمه الافتراضية
             بالاضافة الى المتغيرات التي في الاعلى
           
            
             */
        }


        // الان وصلنا الى الدالة التي ستغير من شكل الزر
        // وهي دالة ناسخة او تسمى تجاوز
        // تنسخ الدالة الوهمية الاساسية الموجود في كلاس كونترول
        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);

            /*
عند تجاوز الدالة  في فئة مشتقة
 OnPaint (PaintEventArgs) تأكد من استدعاء الدالة  
للفئة الأساسية بحيث يتلقى المندوبين المسجلون الحدث     
            base.OnPaint(e); مثل هذا السطر
            
             */



          
            Graphics g = e.Graphics;

            #region شرح  للسطر الذي في الاعلى
            /*
           تم إنشاء اوبجكت من كلاس الرسم 
           جعلنا هذا الاوبجكت يساوي خاصية الرسم لوبجكت الحدث
          سوف يحدث على كائن هذا الحدث  g بمعنى ان اي تغيير في الاوبجكت




              */

            #endregion



           //
           g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
            #region شرح السطر السابق
            /*
           SmoothingMode  تقوم الخاصية
             بتعيين جودة العرض للرسومات
            
           g  لاحظ ان السطر السابق تستطيع ان تكتبه بدون الاوبجكت
            
             e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
             */


            #endregion





            ////

            Brush brush = new SolidBrush(isHovering ? onHoverBorderColor : borderColor);

            #region شرح السطر السابق
            /*
            Brush الكلاس
             كلاس الفرشاة
             يحدد الكائنات المستخدمة لملء التصميمات الداخلية للاشكال الرسومية 

//////////
         SolidBrush   الكلاس الاخر
             يحدد فرشاة بلون واحد. تستخدم الفرش لتعبئة أشكال الرسوم
            
            اما ما بداخل الاقواس فهو عبارة عن شرط

                  onHoverBorderColor  سوف يتم تنفيذ  true   عندما يساوي  isHovering
         borderColor    غير ذلك سوف ينفذ
            
              قمنا بشرح صيغة هذا الشرط في القناة
             */



            #endregion
          
           
           
            //Border حدود الزر
            g.FillEllipse(brush, 0, 0, Height, Height);
            g.FillEllipse(brush, Width - Height, 0, Height, Height);
            g.FillRectangle(brush, Height / 2, 0, Width - Height, Height);
            /*
             دوال تحميل زائد تقوم
             تملأ الجزء الداخلي من القطع
            
            
            
             */



            brush.Dispose();
            brush = new SolidBrush(isHovering ? onHoverButtonColor : buttonColor);

            //Inner part. Button itself
            g.FillEllipse(brush, borderThicknessByTwo, borderThicknessByTwo, Height - borderThickness,
                Height - borderThickness);
            g.FillEllipse(brush, (Width - Height) + borderThicknessByTwo, borderThicknessByTwo,
                Height - borderThickness, Height - borderThickness);
            g.FillRectangle(brush, Height / 2 + borderThicknessByTwo, borderThicknessByTwo,
                Width - Height - borderThickness, Height - borderThickness);

            brush.Dispose();
            brush = new SolidBrush(isHovering ? onHoverTextColor : textColor);

            //Button Text
            SizeF stringSize = g.MeasureString(Text, Font);
            g.DrawString(Text, Font, brush, (Width - stringSize.Width) / 2, (Height - stringSize.Height) / 2);
        }


        public Color BorderColor
        {
            get { return borderColor; }
            set
            {
                borderColor = value;
            
            }
        }

        public Color OnHoverBorderColor // لون حدود الزر عندما يكون المؤشر فوق الزر
        {
            get { return onHoverBorderColor; }
            set
            {
                onHoverBorderColor = value;
              
            }
        }

        public Color ButtonColor // خاصية لون الزر
        {
            get { return buttonColor; }
            set
            {
                buttonColor = value;
             
            }
        }

        public Color OnHoverButtonColor// لون الزر عندما يكون المؤشر فوقه
        {
            get { return onHoverButtonColor; }
            set
            {
                onHoverButtonColor = value;
              
            }
        }

        public Color TextColor // تلوين النص
        {
            get { return textColor; }
            set
            {
                textColor = value;
              
            }
        }



        // خاصية تلوين النص عندما يكون المؤشر فوق الزر
        public Color OnHoverTextColor
        {
            get { return onHoverTextColor; }
            set
            {
                onHoverTextColor = value;
               
            }
        }
    }
}

الان انتهينا من كتابة هذا الكلاس 

ولكي تستخدم الاداة المخصصة التي انتهينا من عملها قم بإعادة بناء المشروع وذلك بالضغط على 

Ctrl+Shift+B

بعد ذلك قم بالبحث عن اسم الاداة CButton في قائمة ToolBox