裘环有 發表於 2024-9-7 23:58:00

C#自定义控件—旋转按钮

<h2 id="c用户控件之旋转按钮">C#用户控件之旋转按钮</h2>
<h4 id="按钮功能手自动旋转标签文本显示点击二次弹框确认源码在最后边"><strong>按钮功能：</strong>手自动旋转，标签文本显示、点击二次弹框确认（源码在最后边）；</h4>
<p><img src="https://img2024.cnblogs.com/blog/3497053/202409/3497053-20240907101856822-703347171.png" alt="" loading="lazy"></p>
<hr>
<h5 id="制作方法"><strong>【制作方法】</strong></h5>
<ul>
<li>找到控件的中心坐标，画背景外环、内圆；再绘制矩形开关，进行角度旋转即可获得；</li>
</ul>
<hr>
<h5 id="关键节点"><strong>【关键节点】</strong></h5>
<ul>
<li>No.1 获取中心坐标，思考要绘制图形的相对坐标、宽度、高度；</li>
<li>No.2 更改坐标系原点，以此原点为坐标，绘制矩形开关，再旋转指定角度</li>
</ul>
<pre><code>//方法中获取原点
Point centerPoint = GetCenterPoint();

#region 获取中心原点
private Point GetCenterPoint()
{
    if (this.height &gt; this.width)
    {
      return new Point(this.width / 2, this.width / 2);
    }
    else
    {
      return new Point(this.height / 2, this.height / 2);
    }
}
#endregion
</code></pre>
<pre><code>//更改坐标系原点
g.TranslateTransform(centerPoint.X, centerPoint.Y);

//旋转指定角度
if (switchStatus)
{
    g.RotateTransform(36.0f);
}
else
{
    g.RotateTransform(-36.0f);
}
</code></pre>
<hr>
<p><strong>【1】</strong>按钮的背景（外环&lt;g.DrawEllipse&gt;、内圆&lt;g.FillEllipse&gt;）绘制方法与指示灯的方法一样；</p>
<p>注意：此坐标系以控件左上角为准</p>
<pre><code>//绘制外环—(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);
</code></pre>
<hr>
<p><strong>【2】</strong>绘制中间矩形及圆点，画刷填充指定区域（g.FillRectangle、g.FillEllipse)</p>
<p>注意：此坐标系以中心点为准</p>
<pre><code>//更改坐标系原点
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);
</code></pre>
<hr>
<p><strong>【3】</strong>绘制文本，在指定的矩形中绘制指定的字符串（g.DrawString）</p>
<pre><code>//指定字符串
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);
</code></pre>
<hr>
<p><strong>【4】</strong>创建鼠标点击事件，添加鼠标点击事件处理&lt;更改属性值&gt;，在属性中触发事件（Event）</p>
<pre><code>#region 添加事件



public event EventHandler MouseDown_G;   //事件声明
</code></pre>
<pre><code>//初始化函数添加鼠标点击事件处理
this.MouseDown += Switch_MouseDown; ;
</code></pre>
<pre><code>//鼠标点击事件处理逻辑
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
</code></pre>
<pre><code>//开关状态属性
private bool switchStatus = false;



public bool SwitchStatus
{
   get { return switchStatus; }
   set
   {
         switchStatus = value; this.Invalidate();

         //激活触发事件
         this.MouseDown_G?.Invoke(this, null);
   }
}
</code></pre>
<p>备忘：指定默认事件（在应用时点击鼠标即可进入自定义事件,否则进入‘load’事件）</p>
<pre><code>
</code></pre>
<hr>
<h5 id="最后生成">最后生成</h5>
<p><img src="https://img2024.cnblogs.com/blog/3497053/202409/3497053-20240907213913614-1972973460.gif" alt="" loading="lazy"></p>
<hr>
<h3 id="下一个一个标题面板方便用户界面的布局">下一个：一个标题面板，方便用户界面的布局</h3>
<p><img src="https://img2024.cnblogs.com/blog/3497053/202409/3497053-20240906212655800-866557918.png" alt="" loading="lazy"></p>
<hr>
<p><strong>【1】新建用户组件</strong></p>
<p><img src="https://img2024.cnblogs.com/blog/3497053/202409/3497053-20240906212050949-2019873419.png" alt="" loading="lazy"></p>
<p><strong>【2】更改组件继承为Panel</strong></p>
<p><img src="https://img2024.cnblogs.com/blog/3497053/202409/3497053-20240906212117933-988599526.png" alt="" loading="lazy"></p>
<p><strong>【3】定义属性</strong>（标题的颜色、字体、高度；抬头背景色；边框颜色）</p>
<pre><code>private Font titleFont = new Font("微软雅黑", 12);



public Font TitleFont
{
    get { return titleFont; }
    set
    {
      titleFont = value;
      this.Invalidate();
    }
}
</code></pre>
<p><strong>【4】重绘画布</strong></p>
<pre><code>//画外边框
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);
</code></pre>
<p><strong>【5】备注说明</strong></p>
<ul>
<li>初始化字体格式-需要再两个方法中定义文本对齐格式</li>
</ul>
<pre><code>//字体对齐格式
this.sf = new StringFormat();
this.sf.Alignment = StringAlignment.Center;
this.sf.LineAlignment = StringAlignment.Center;

//指定控件大小
this.Size = new System.Drawing.Size(300, 150);
</code></pre>
<hr>
<p><strong>最后生成并应用</strong></p>
<p><img src="https://img2024.cnblogs.com/blog/3497053/202409/3497053-20240907020731352-912154916.png" alt="" loading="lazy"></p>
<hr>
<h2 id="源码链接">源码链接</h2>
<p><img src="https://img2024.cnblogs.com/blog/3497053/202409/3497053-20240907221141877-839936240.gif" alt="" loading="lazy"></p>
<p>（不想折腾的直接用Dll，如有更好的记得留言分享哦！代码有不足的也请大神指教）别忘点赞哦<br>
https://pan.baidu.com/s/1QM_iZ-UMksPqwWo2ssS5Ow?pwd=ju01</p>
<hr>
<h1 id="end">End</h1><br><br>
来源：https://www.cnblogs.com/guoenshuo/p/18401032
頁: [1]
查看完整版本: C#自定义控件—旋转按钮