C#自定義控制元件—轉換開關

郭恩硕發表於2024-09-01
C#控制元件

C#使用者控制元件之轉換開關

如何自定義一個轉換鍵（Toggle）？

三步繪製一個精美控制元件：

  1. 定義屬性；
  2. 畫布重繪；
  3. 新增事件；

主要技能：

  • 如何自定義屬性；
  • 畫布重繪的一般格式；
  • 控制元件的事件觸發過程；
  • 技能擴充套件

    1. 轉換按鈕使能時新增二次確認彈框？

    2. 在From窗體中應用控制元件時，點選事件沒有觸發？

    3. 屬性名稱在控制元件屬性樹中的排列如何定義？

    4. 新增一個字型更改屬性？

1.定義屬性

  • 字型（Font）
  • 顏色（Color）
  • 字串（String）
  • 列舉（Enum）
  • 屬性說明 [Browsable(true)]
#region 屬性

private Font displayFont = new Font("Segoe UI", 12);
[Browsable(true)]
[Category("佈局_G")]
[Description("字型格式")]
public Font DisplayFont
{
    get { return displayFont; }
    set
    {
        if (value != null)
        {
            displayFont = value;
            this.Invalidate(); // Trigger redraw
        }
    }
}

private bool _checked = false;
[Browsable(true)]  //說明（需放在屬性前邊）：是否選中
[Category("佈局_G")]
[Description("是否選中")]
public bool Checked
{
    get { return _checked; }
    set
    {
        _checked = value;
        this.Invalidate();

        //啟用觸發事件
        this.MouseDown_G?.Invoke(this, null);

    }
}

private string falseText = "關閉";
[Browsable(true)]  //說明：文字關閉
[Category("佈局_G")]
[Description("文字關閉")]
public string FalseText
{
    get { return falseText; }
    set { falseText = value; this.Invalidate(); }
}

//樣式切換
public enum SwType
{
    Ellipse,    //橢圓
    Rectangle,  //矩形
}

private SwType switchType = SwType.Ellipse;
[Browsable(true)]  //說明：切換樣式
[Category("佈局_G")]
[Description("切換樣式")]
public SwType SwitchType
{
    get { return switchType; }
    set { switchType = value; this.Invalidate(); }
}

private Color sliderColor = Color.White; //Color.White
[Browsable(true)]  //說明：滑塊顏色
[Category("佈局_G")]
[Description("滑塊顏色")]
public Color SliderColor
{
    get { return sliderColor; }
    set { sliderColor = value; this.Invalidate(); }
}

#endregion

屬性名稱在控制元件屬性樹中的排列如何定義？
答：根據屬性說明安裝A~Z的字母順序排列

2.畫布重繪

  • 畫帶四角圓弧的矩形、滑塊、文字；
  • 畫橢圓、滑塊、文字
      #region 畫布

      private Graphics graphics;
      private int width;
      private int height;

      //矩形繪製
      protected override void OnPaint(PaintEventArgs e)
      {
          base.OnPaint(e);
          graphics = e.Graphics;
          graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
          graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;
          graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
          graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

          this.width = this.Width;
          this.height = this.Height;

          if (this.switchType == SwType.Rectangle)  //欄位選擇為矩形時
          {
              //填充色
              Color fillColor = this._checked ? trueColor : falseColor;

              //帶四角圓弧的矩形
              GraphicsPath path = new GraphicsPath();
              int diameter = 10;  //預設圓弧直徑
              //左上角圓弧：起始座標，寬，高，開始角度，掃描角度
              path.AddArc(0, 0, diameter, diameter, 180f, 90f);
              path.AddArc(this.width - diameter, 0, diameter, diameter, 270f, 90f);  //右上角
              path.AddArc(this.width - diameter, this.height - diameter, diameter, diameter, 0f, 90f);  //右下角
              path.AddArc(0, this.height - diameter, diameter, diameter, 90f, 90f);  //左下角
              graphics.FillPath(new SolidBrush(fillColor), path);  //填充色

              //文字
              string strText = this._checked ? trueText : falseText;

              //滑塊(true\false 兩種形態)
              if (_checked)
              {
                  //繪製滑塊
                  path = new GraphicsPath();
                  int sliderwidth = this.height - 4;
                  path.AddArc(this.width - sliderwidth - 2, 2, diameter, diameter, 180f, 90f);
                  path.AddArc(this.width - diameter - 2, 2, diameter, diameter, 270f, 90f);
                  path.AddArc(this.width - diameter - 2, this.height - diameter - 2, diameter, diameter, 0f, 90f);
                  path.AddArc(this.width - sliderwidth - 2, this.height - diameter - 2, diameter, diameter, 90f, 90f);
                  graphics.FillPath(new SolidBrush(sliderColor), path);

                  //繪製文字
                  Rectangle rec = new Rectangle(0, 0, this.width - sliderwidth - 2, this.height);
                  StringFormat sf = new StringFormat();
                  sf.Alignment = StringAlignment.Center;
                  sf.LineAlignment = StringAlignment.Center;

                  graphics.DrawString(strText, DisplayFont, new SolidBrush(sliderColor), rec, sf);

              }
              else
              {
                  //繪製滑塊
                  path = new GraphicsPath();
                  int sliderwidth = this.height - 4;
                  path.AddArc(2, 2, diameter, diameter, 180f, 90f);
                  path.AddArc(sliderwidth - diameter + 2, 2, diameter, diameter, 270f, 90f);
                  path.AddArc(sliderwidth - diameter + 2, sliderwidth - diameter + 2, diameter, diameter, 0f, 90f);
                  path.AddArc(2, sliderwidth - diameter + 2, diameter, diameter, 90f, 90f);
                  graphics.FillPath(new SolidBrush(sliderColor), path);

                  //繪製文字
                  Rectangle rec = new Rectangle(sliderwidth + 2, 0, this.width - sliderwidth - 2, this.height);
                  StringFormat sf = new StringFormat();
                  sf.Alignment = StringAlignment.Center;
                  sf.LineAlignment = StringAlignment.Center;
                  graphics.DrawString(strText, DisplayFont, new SolidBrush(sliderColor), rec, sf);
              }
          }
          else if (this.switchType == SwType.Ellipse)  //欄位選擇為橢圓時
          {
              //填充色
              Color fillColor = this._checked ? trueColor : falseColor;

              //橢圓形
              GraphicsPath path = new GraphicsPath();

              path.AddArc(1, 1, this.height - 2, this.height - 2, 90f, 180f);
              path.AddArc(this.width - (this.height - 2) - 1, 1, this.height - 2, this.height - 2, 270f, 180f);
              graphics.FillPath(new SolidBrush(fillColor), path);  //填充色

              //文字
              string strText = this._checked ? TrueText : falseText;

              //滑塊(true\false 兩種形態)
              if (_checked)
              {
                  //繪製滑塊
                  int ciclewidth = this.height - 6;
                  graphics.FillEllipse(new SolidBrush(sliderColor), new Rectangle(this.width - ciclewidth - 3, 3, ciclewidth, ciclewidth));

                  //繪製文字
                  Rectangle rec = new Rectangle(0, 0, this.width - ciclewidth - 3, this.height);
                  StringFormat sf = new StringFormat();
                  sf.Alignment = StringAlignment.Center;
                  sf.LineAlignment = StringAlignment.Center;
                  graphics.DrawString(strText, DisplayFont, new SolidBrush(sliderColor), rec, sf);
              }
              else
              {
                  //繪製滑塊
                  int ciclewidth = this.height - 6;

                  graphics.FillEllipse(new SolidBrush(sliderColor), new Rectangle(3, 3, ciclewidth, ciclewidth));

                  //繪製文字
                  Rectangle rec = new Rectangle(ciclewidth + 3, 0, this.width - ciclewidth - 3, this.height);
                  StringFormat sf = new StringFormat();
                  sf.Alignment = StringAlignment.Center;
                  sf.LineAlignment = StringAlignment.Center;
                  graphics.DrawString(strText, DisplayFont, new SolidBrush(sliderColor), rec, sf);
              }
          }
      }

      #endregion

3.新增事件

理解 ：在From中控制元件的滑鼠點選事件的執行過程

先執行控制元件內部的MouseDown方法——其方法內部的屬性——其屬性中的觸發事件——最後執行From後臺的點選生成的自定義方法（可自定義）

其他技巧： 應用控制元件時拉出來雙擊即可生成自定義方法

<From中雙擊控制元件預設是Load方法，想讓他自動生成自己設定的事件需要在控制元件程式碼中新增：[DefaultEvent("MouseDown_G")]>。

//指定預設事件（雙擊控制元件進入）
[DefaultEvent("MouseDown_G")]

關鍵程式碼：點選控制元件彈出框確認後再執行From的事件中的程式碼

//事件宣告 public event EventHandler MouseDown_G;

//啟用事件 this.MouseDown_G?.Invoke(this, null); ——執行完成跳轉到From中的雙擊事件方法中

//建構函式新增滑鼠點選事件——點選控制元件事件處理
this.MouseDown += Toggle_MouseDown;

//建構函式新增事件處理後自動生成此方法（無需在控制元件的屬性中雙擊）
private void Toggle_MouseDown(object sender, MouseEventArgs e)
  {
      DialogResult dr = MessageBox.Show("二次確認操作？", "提示您", MessageBoxButtons.OKCancel, MessageBoxIcon.Question);
      if (dr == DialogResult.OK)
      {
          Checked = !Checked;
      }
      else return;
  }

發現一個錯誤，當應用該控制元件時，在From中點選無效；經過兩天的查詢（斷點查詢）才發現問題所在，在Form的設計器中的From屬性的Enable為False，改為true才可使能
原因：控制元件更新後沒有及時生成導致From崩盤後（空視窗後沒在意），導致Designer的預設程式碼更改。

End

討論交流請留言

相關文章