C#自定義控件旋轉(zhuǎn)按鈕功能

更新時間：2024年09月09日 09:20:42 作者：郭恩碩

本教程指導(dǎo)如何自定義繪制一個帶有手自動旋轉(zhuǎn)功能的按鈕和帶有標(biāo)題的面板,教程提供詳細的步驟,方便用戶自定義界面布局,感興趣的朋友跟隨小編一起看看吧

C#用戶控件之旋轉(zhuǎn)按鈕

按鈕功能：手自動旋轉(zhuǎn)，標(biāo)簽文本顯示、點擊二次彈框確認（源碼在最后邊）；

【制作方法】

找到控件的中心坐標(biāo)，畫背景外環(huán)、內(nèi)圓；再繪制矩形開關(guān)，進行角度旋轉(zhuǎn)即可獲得；

【關(guān)鍵節(jié)點】

No.1 獲取中心坐標(biāo)，思考要繪制圖形的相對坐標(biāo)、寬度、高度；
No.2 更改坐標(biāo)系原點，以此原點為坐標(biāo)，繪制矩形開關(guān)，再旋轉(zhuǎn)指定角度

//方法中獲取原點
Point centerPoint = GetCenterPoint();
#region 獲取中心原點
private Point GetCenterPoint()
{
    if (this.height > this.width)
    {
        return new Point(this.width / 2, this.width / 2);
    }
    else
    {
        return new Point(this.height / 2, this.height / 2);
    }
}
#endregion

//更改坐標(biāo)系原點
g.TranslateTransform(centerPoint.X, centerPoint.Y);
//旋轉(zhuǎn)指定角度
if (switchStatus)
{
    g.RotateTransform(36.0f);
}
else
{
    g.RotateTransform(-36.0f);
}

【1】按鈕的背景（外環(huán)<g.DrawEllipse>、內(nèi)圓<g.FillEllipse>）繪制方法與指示燈的方法一樣；

注意：此坐標(biāo)系以控件左上角為準(zhǔn)

//繪制外環(huán)—(Pen)-DrawEllipse
p = new Pen(this.cirInColor, this.cirOutWidth);
RectangleF rec = new RectangleF(this.cirOutGap, this.cirOutGap, (centerPoint.X - this.cirOutGap) * 2, (centerPoint.X - this.cirOutGap) * 2);
g.DrawEllipse(p, rec);
//填充內(nèi)圓—(SolidBrush)-FillEllipse
sb = new SolidBrush(this.cirInColor);
rec = new RectangleF(this.cirInGap, this.cirInGap, (centerPoint.X - this.cirInGap) * 2, (centerPoint.X - this.cirInGap) * 2);
g.FillEllipse(sb, rec);

【2】繪制中間矩形及圓點，畫刷填充指定區(qū)域（g.FillRectangle、g.FillEllipse)

注意：此坐標(biāo)系以中心點為準(zhǔn)

//更改坐標(biāo)系原點
g.TranslateTransform(centerPoint.X, centerPoint.Y);
//填充矩形開關(guān)
rec = new RectangleF(-this.togWidth * 0.5f, this.togGap - centerPoint.Y, togWidth, (centerPoint.Y - togGap) * 2);
g.FillRectangle(new SolidBrush(this.togColor), rec);
//填充矩形開關(guān)圓點
rec = new RectangleF(-this.togWidth * 0.5f + togForeGap, this.togGap - centerPoint.Y + togForeGap, togWidth - 2 * togForeGap, togForeHeight);
g.FillEllipse(new SolidBrush(this.togForeColor), rec);

【3】繪制文本，在指定的矩形中繪制指定的字符串（g.DrawString）

//指定字符串
rec = new RectangleF(this.width * 0.05f, 1, this.width, 20);
g.DrawString(this.textLeft, this.textFont, new SolidBrush(this.textColor), rec, sf);
rec = new RectangleF(this.width * 0.63f, 1, this.width, 20);
g.DrawString(this.textRight, this.textFont, new SolidBrush(this.textColor), rec, sf);

【4】創(chuàng)建鼠標(biāo)點擊事件，添加鼠標(biāo)點擊事件處理<更改屬性值>，在屬性中觸發(fā)事件（Event）

#region 添加事件
[Browsable(true)]
[Category("操作_G")]
[Description("雙擊進入事件")]
public event EventHandler MouseDown_G;   //事件聲明

//初始化函數(shù)添加鼠標(biāo)點擊事件處理
this.MouseDown += Switch_MouseDown; ;

//鼠標(biāo)點擊事件處理邏輯
private void Switch_MouseDown(object sender, MouseEventArgs e)
{
    DialogResult dr = MessageBox.Show("二次確認操作？", "提示您", MessageBoxButtons.OKCancel, MessageBoxIcon.Question);
    if (dr == DialogResult.OK)
    {
        SwitchStatus = !SwitchStatus; //此處屬性值，不是字段
    }
    else return;
}
#endregion

//開關(guān)狀態(tài)屬性
 private bool switchStatus = false;
 [Browsable(true)]
 [Category("布局_G")]
 [Description("開關(guān)狀態(tài)")]
 public bool SwitchStatus
 {
     get { return switchStatus; }
     set
     {
         switchStatus = value; this.Invalidate();
         //激活觸發(fā)事件
         this.MouseDown_G?.Invoke(this, null);
     }
 }

備忘：指定默認事件（在應(yīng)用時點擊鼠標(biāo)即可進入自定義事件,否則進入‘load’事件）

[DefaultEvent("MouseDown_G")]

最后生成

下一個：一個標(biāo)題面板，方便用戶界面的布局

【1】新建用戶組件

【2】更改組件繼承為Panel

【3】定義屬性（標(biāo)題的顏色、字體、高度；抬頭背景色；邊框顏色）

private Font titleFont = new Font("微軟雅黑", 12);
[Browsable(true)]
[Category("布局_G")]
[Description("標(biāo)題字體")]
public Font TitleFont
{
    get { return titleFont; }
    set
    {
        titleFont = value;
        this.Invalidate();
    }
}

【4】重繪畫布

//畫外邊框
g.DrawRectangle(new Pen(this.colorBorder), new Rectangle(0, 0, this.Width - 1, this.Height - 1));
//填充抬頭矩形
RectangleF rec = new RectangleF(0.5f, 0.5f, this.Width - 2, this.titleHeight);
g.FillRectangle(new SolidBrush(this.colorBack), rec);
//文本繪制
g.DrawString(this.titleText, this.titleFont, new SolidBrush(this.colorTitle), rec, sf);

【5】備注說明

初始化字體格式-需要再兩個方法中定義文本對齊格式

//字體對齊格式
this.sf = new StringFormat();
this.sf.Alignment = StringAlignment.Center;
this.sf.LineAlignment = StringAlignment.Center;
//指定控件大小
this.Size = new System.Drawing.Size(300, 150);

最后生成并應(yīng)用