C#自定义控件旋转按钮功能_Asp.net

c#用户控件之旋转按钮

按钮功能：手自动旋转，标签文本显示、点击二次弹框确认（源码在最后边）；

【制作方法】

找到控件的中心坐标，画背景外环、内圆；再绘制矩形开关，进行角度旋转即可获得；

【关键节点】

no.1 获取中心坐标，思考要绘制图形的相对坐标、宽度、高度；
no.2 更改坐标系原点，以此原点为坐标，绘制矩形开关，再旋转指定角度

//方法中获取原点
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

//更改坐标系原点
g.translatetransform(centerpoint.x, centerpoint.y);
//旋转指定角度
if (switchstatus)
{
    g.rotatetransform(36.0f);
}
else
{
    g.rotatetransform(-36.0f);
}

【1】按钮的背景（外环<g.drawellipse>、内圆<g.fillellipse>）绘制方法与指示灯的方法一样；

注意：此坐标系以控件左上角为准

//绘制外环—(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);
//填充内圆—(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】绘制中间矩形及圆点，画刷填充指定区域（g.fillrectangle、g.fillellipse)

注意：此坐标系以中心点为准

//更改坐标系原点
g.translatetransform(centerpoint.x, centerpoint.y);
//填充矩形开关
rec = new rectanglef(-this.togwidth * 0.5f, this.toggap - centerpoint.y, togwidth, (centerpoint.y - toggap) * 2);
g.fillrectangle(new solidbrush(this.togcolor), rec);
//填充矩形开关圆点
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】创建鼠标点击事件，添加鼠标点击事件处理<更改属性值>，在属性中触发事件（event）

#region 添加事件
[browsable(true)]
[category("操作_g")]
[description("双击进入事件")]
public event eventhandler mousedown_g;   //事件声明

//初始化函数添加鼠标点击事件处理
this.mousedown += switch_mousedown; ;

//鼠标点击事件处理逻辑
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

//开关状态属性
 private bool switchstatus = false;
 [browsable(true)]
 [category("布局_g")]
 [description("开关状态")]
 public bool switchstatus
 {
     get { return switchstatus; }
     set
     {
         switchstatus = value; this.invalidate();
         //激活触发事件
         this.mousedown_g?.invoke(this, null);
     }
 }

备忘：指定默认事件（在应用时点击鼠标即可进入自定义事件,否则进入‘load’事件）

[defaultevent("mousedown_g")]

最后生成

下一个：一个标题面板，方便用户界面的布局

【1】新建用户组件

【2】更改组件继承为panel

【3】定义属性（标题的颜色、字体、高度；抬头背景色；边框颜色）

private font titlefont = new font("微软雅黑", 12);
[browsable(true)]
[category("布局_g")]
[description("标题字体")]
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);

最后生成并应用