C# winfrom 超详细UI创建过程 实现双色球选号器UI界面设计过程

一、 效果展示

1. 无点击效果展示：不选中——双色球为灰色，字体也为灰色

在这里插入图片描述

2.点击双色器效果展示：选中——双色球为红或者蓝，字体为白色

在这里插入图片描述

二、 使用控件标注说明

在这里插入图片描述

三、界面特点介绍

  • 双色球代码控制生成---------由于红色33个球，蓝色16个球，拖放控件过于繁琐
  • 页面偏向扁平化设计

四、环境配置介绍

  • vs2022
  • .NET Framework 4.6
  • 准备素材图片
    在这里插入图片描述

五、完整的实现过程

1.创建项目：选择windows窗体应用（.NET Framwork）

在这里插入图片描述
在这里插入图片描述

2.窗体基础设置

  • 将窗体名称改为FrmMain
    在这里插入图片描述
  • 窗体大小设置：976, 624
    在这里插入图片描述
  • 窗体扁平化设置
    FormBorderStyle:None
    在这里插入图片描述

3.红色上边框设置

  • 窗体上面红色部分设计
  • 使用Panel，尺寸：976，39【颜色：191, 41, 61】
  • 插入Label控件：
    — 字体：微软雅黑，字体大小：三号字体
    — 字体颜色：白色
    — Text：双 色 球 彩 票 选 号 器
  • 错号退出按钮：button按钮
    — 背景颜色【颜色：191, 41, 61】
    — 字体：微软雅黑，字体大小：三号字体
    — 字体颜色：白色
    — Text：X
    — Name：btnClose
    — 边框、背景色都设置为红色
    — FlatStyle：Flat
    在这里插入图片描述

— 退出代码（双击控件，进入到事件中）：this.Close()；

  • 效果展示
  • 背景色设置为白色
    在这里插入图片描述

4.设置号码球字体样式部分

  • 设置红球区-字体设置
  • 颜色设置：192, 0, 0
  • 字体：微软雅黑，三号字体
  • 请选择至少6个红色球 ： 默认字体设置
  • 设置蓝球区-字体设置
  • 颜色设置：192, 0, 0
  • 字体：微软雅黑，三号字体
  • 请选择至少1个蓝色球 ： 默认字体设置
  • 左侧设置控件Panel，右侧一样设置控件Panel
  • 左侧Panel-Name设置：panelRed，右侧Panel-Name设置：panelBlue
  • 左侧Panel-尺寸：826,238 ， 右侧Panel-尺寸：508, 238

5.下方选球部分样式

  • 下拉控件ComboBox中的属性Name：cbbRed
  • 下拉不可编辑：DropDownstyle：DropDownList
  • Button按钮设计，背景颜色：White，Cursor：Hand（鼠标样式），FlatStyle：Flat，字体颜色：红色：192, 0, 0，蓝色：30, 80, 162
  • Button边框设置
    在这里插入图片描述
  • Button 红色区域属性设置 Name：btnRandomCreate，蓝色属性：Name：btnCreateBlue
  • combox列表：Name：cbbRed，cbbBlue
  • 清空Button,Name:btnResetRed,btnResetBlue
  • Button 清楚区域属性设置：红色与蓝色，Name：btnResetRed，btnResetBlue

6.划线部分与显示部分

  • 划线：Label标签，设置AutoSize：False，BorderStyle：Fixedsingle，设置好后呈现直线，将Text内容清空，Size：中的hight设置成1，显示效果如下
    在这里插入图片描述
  • 显示选择球数设置，其他为Label标签+普通文字，字体设置为微软雅黑
  • 颜色：从红到黑：192, 0, 0，0, 0, 192，Black
  • button按钮，Name：设置lblRedCount，lblBlueCount，lblBallCount
  • 效果展示
    在这里插入图片描述

7.下方设置过程

确认按钮设置：

  • Name：btnConfirm
  • FlatStyle：Flat
  • Backgroundlmage：背景图，设置

显示文本：

  • DataGridView
  • Name:dgvList
  • BackgroundColor:white
  • ColumnHeadersVisible：False

机选按钮
Name：btnAutoSelect1
在这里插入图片描述
机选几柱设置

  • Name：txtAutoselect
    在这里插入图片描述
    自选机选按钮

  • Name：btnSelect1
    在这里插入图片描述
    清空按钮
    Name：btnDelAll
    在这里插入图片描述
    提交购买按钮
    在这里插入图片描述
    广告位设置

  • 使用控件：pictureBox
    Name：默认，没有设置代码控制

六、窗体拖动代码实现

  • 可以窗体可以自由拖动，在上部分的Panel 进行设置
  • 将代码写入到FrmMain中
private Point mouseOff;//鼠标移动位置变量
private bool leftFlag;//标签是否为左键
private void FrmMain_MouseDown(object sender, MouseEventArgs e)
{if (e.Button == MouseButtons.Left){mouseOff = new Point(-e.X, -e.Y); //得到变量的值leftFlag = true;                  //点击左键按下时标注为true;}
}
private void FrmMain_MouseMove(object sender, MouseEventArgs e)
{if (leftFlag){Point mouseSet = Control.MousePosition;mouseSet.Offset(mouseOff.X, mouseOff.Y);  //设置移动后的位置Location = mouseSet;}
}
private void FrmMain_MouseUp(object sender, MouseEventArgs e)
{if (leftFlag){leftFlag = false;//释放鼠标后标注为false;}
}private void btnClose_Click(object sender, EventArgs e)
{this.Close();
}
  • 对上部分的Panel 进行鼠标绑定事件
    在这里插入图片描述
  • 实现效果
    请添加图片描述

七、实现号码球的生成以及实现选取与清空球

 public FrmMain(){InitializeComponent();//初始化红色球和蓝色球InitRedPanel();InitBluePanel();}//创建两色球标签控件集合，为了方便后面用户选择等相关操作，省的每次都去访问panel集合// key=球的数字   value=球对象private Dictionary<string, Label> redBallLables = new Dictionary<string, Label>();private Dictionary<string, Label> blueBallLables = new Dictionary<string, Label>();#region  拖动窗体的实现private Point mouseOff;//鼠标移动位置变量private bool leftFlag;//标签是否为左键private void FrmMain_MouseDown(object sender, MouseEventArgs e){if (e.Button == MouseButtons.Left){mouseOff = new Point(-e.X, -e.Y); //得到变量的值leftFlag = true;                  //点击左键按下时标注为true;}}private void FrmMain_MouseMove(object sender, MouseEventArgs e){if (leftFlag){Point mouseSet = Control.MousePosition;mouseSet.Offset(mouseOff.X, mouseOff.Y);  //设置移动后的位置Location = mouseSet;}}private void FrmMain_MouseUp(object sender, MouseEventArgs e){if (leftFlag){leftFlag = false;//释放鼠标后标注为false;}}private void btnClose_Click(object sender, EventArgs e){this.Close();}#endregion#region 红色球区域初始化private void InitRedPanel(){for (int i = 1; i <= 33; i++) //下面的属性是我们直接在UI中添加控件后，生成的，复制过来的{//这些是不变的属性Label lbl = new Label();lbl.Cursor = System.Windows.Forms.Cursors.Hand;lbl.Font = new System.Drawing.Font("微软雅黑", 12F, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, ((byte)(134)));lbl.ForeColor = System.Drawing.Color.DimGray;lbl.Image = Image.FromFile("images/gray.png");lbl.TextAlign = System.Drawing.ContentAlignment.MiddleCenter;lbl.Size = new System.Drawing.Size(48, 45);//这些是变化的属性lbl.Name = "lblnum" + i;lbl.Text = i < 10 ? "0" + i : i.ToString(); //如果数字小于10，自动补齐0lbl.Tag = "0";// 默认0  表示灰色  1 表示红色，为了后面切换背景使用  （实际开发中，根据需要也可以存储数据）//坐标需要单独计算（分3组）if (i <= 11) //第1排{lbl.Location = new System.Drawing.Point(13 + 48 * (i - 1), 13);}else if (i >= 12 && i <= 22){lbl.Location = new System.Drawing.Point(13 + 48 * (i - 1 - 11), 58); // Y 增加了45，这个是我们通过观察后台代码得到的数字}else if (i >= 23){lbl.Location = new System.Drawing.Point(13 + 48 * (i - 1 - 22), 103);}//lbl.Location = new System.Drawing.Point(13, 13); //这个是第一个红色球的原始坐标//添加到面板集合中this.panelRed.Controls.Add(lbl);//当你写到这个地方的时候，可以把UI中自己添加的全部删掉//增加一个单击事件，实现有颜色切换lbl.Click += new EventHandler(lblRed_Click);//添加到红色球集合中redBallLables.Add(lbl.Text, lbl);}}#endregion#region 蓝色球区域初始化private void InitBluePanel(){for (int i = 1; i <= 16; i++){//这些是不变的属性Label lbl = new Label();lbl.Cursor = System.Windows.Forms.Cursors.Hand;lbl.Font = new System.Drawing.Font("微软雅黑", 12F, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, ((byte)(134)));lbl.ForeColor = System.Drawing.Color.DimGray;lbl.Image = Image.FromFile("images/gray.png");lbl.TextAlign = System.Drawing.ContentAlignment.MiddleCenter;lbl.Size = new System.Drawing.Size(48, 45);//这些是变化的属性lbl.Name = "lblnum" + i;lbl.Text = i < 10 ? "0" + i : i.ToString(); //如果数字小于10，自动补齐0lbl.Tag = "0";// 默认0  表示灰色  1 表示蓝色，为了后面切换背景使用  //坐标需要单独计算（分3组）if (i <= 6) //第1排{lbl.Location = new System.Drawing.Point(13 + 48 * (i - 1), 13);}else if (i >= 7 && i <= 12){lbl.Location = new System.Drawing.Point(13 + 48 * (i - 1 - 6), 58); // Y 增加了45，这个是我们通过观察后台代码得到的数字}else if (i >= 13){lbl.Location = new System.Drawing.Point(13 + 48 * (i - 1 - 12), 103);}//添加到面板集合中this.panelBlue.Controls.Add(lbl);//增加一个单击事件，实现有颜色切换lbl.Click += new EventHandler(lblBlue_Click);//添加到蓝色球集合中blueBallLables.Add(lbl.Text, lbl);}}#endregion#region 单击球变色，演示复位//红色球单击private void lblRed_Click(object sender, EventArgs e){Label lbl = (Label)sender;if (lbl.Tag.ToString().Equals("0"))//如果这个球是灰色的{SetRedOrBlue(lbl, "red");}else{SetGray(lbl);}ShowRedCount();//显示红色球的总数}//蓝色球单击private void lblBlue_Click(object sender, EventArgs e){Label lbl = (Label)sender;if (lbl.Tag.ToString().Equals("0")){SetRedOrBlue(lbl, "blue");}else{SetGray(lbl);}ShowBlueCount(); //显示蓝色球选择的总数}//设置成红色或蓝色private void SetRedOrBlue(Label lbl, string color){if (lbl.Tag.ToString().Equals("0"))//如果这个球是灰色的{lbl.Image = Image.FromFile($"images/{color}.png");lbl.Tag = "1";lbl.ForeColor = System.Drawing.Color.White;}}//统一设置成灰色private void SetGray(Label lbl){lbl.Image = Image.FromFile("images/gray.png");lbl.Tag = "0";lbl.ForeColor = System.Drawing.Color.DimGray;}#endregion#region 显示红色球和蓝色球的选择总数//显示红色球的总数private void ShowRedCount(){int redCount = 0;foreach (var item in this.redBallLables.Values){if (item.Tag.ToString().Equals("1")) redCount++;}this.lblRedCount.Text = redCount.ToString();}//显示蓝色球的总数private void ShowBlueCount(){int blueCount = 0;foreach (var item in this.blueBallLables.Values){if (item.Tag.ToString().Equals("1")) blueCount++;}this.lblBlueCount.Text = blueCount.ToString();}#endregion#region 清空按钮//清空红色球选择private void btnResetRed_Click(object sender, EventArgs e){foreach (Label item in this.redBallLables.Values){SetGray(item);}this.lblRedCount.Text = "0";}//清空蓝色球选择private void btnResetBlue_Click(object sender, EventArgs e){foreach (Label item in this.blueBallLables.Values){SetGray(item);}this.lblBlueCount.Text = "0";}#endregion

八、实现效果

请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/638087.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

24位AD分辨率、256Ksps*16通道国产数据采集卡、uV级采集、支持IEPE

24位AD分辨率、256Ksps*16通道国产数据采集卡、uV级采集、支持IEPE

24位AD分辨率、256Ksps*16通道、uV级采集、USB数据传输、支持IEPE、C、LABVIEW、MATLAB、Python等多编程语言&#xff0c;提供例程&#xff0c;支持二次开发。 XM7016-以太网采集卡 XM7016是一款以太网型高速数据采集卡&#xff0c;具有16通道真差分输入&#xff0c;24位分辨率…
阅读更多...
230基于matlab的布谷鸟（COA）多目标优化算法

230基于matlab的布谷鸟（COA）多目标优化算法

基于matlab的布谷鸟&#xff08;COA&#xff09;多目标优化算法&#xff0c;以 满意度、成本、时间、质量为目标的多目标优化求解代码。程序已调通&#xff0c;可直接运行。 230 matlab 布谷鸟&#xff08;COA&#xff09;多目标优化 - 小红书 (xiaohongshu.com)
阅读更多...
进程和计划任务管理

进程和计划任务管理

目录 一、程序和进程的关系 程序 进程 线程 进程和线程的关系 二、查看进程信息ps ps 命令——查看静态的进程统计信息 方法一&#xff1a;ps aux 方法二&#xff1a;ps -elf top 命令——查看进程动态信息 系统查看命令总结 查看进程信息pgrep 查看进程树 以树的结…
阅读更多...
上位机工作感想-从C#到Qt的转变-1

上位机工作感想-从C#到Qt的转变-1

0.前言 接触Qt开发也有一年多的时间了&#xff0c;还记得去年初从杭州回合肥时&#xff0c;刚来公司面临的几个问题&#xff1a; 1.C#转上位机的迷茫2.新公司管理模式的差异3.试用期的各种紧急任务。 当时也是加班加点学习C和Qt的基础知识&#xff0c;做了两个考核项目后&am…
阅读更多...
【大模型应用极简开发入门（2）】GPT模型简史：从GPT-1到GPT-4：从小数据量的微调到大数据量的强化学习不断优化模型

【大模型应用极简开发入门（2）】GPT模型简史：从GPT-1到GPT-4：从小数据量的微调到大数据量的强化学习不断优化模型

文章目录 一. GPT-1&#xff1a;无监督与微调1. 在GPT-1之前的监督学习的问题2. GPT-1中新的学习过程-无监督的预训练3. 复杂任务下的微调4. GPT-1为更强大的模型铺平了道路 二. GPT-2&#xff1a;context learning1. 核心思想&#xff1a;context learning2. GPT-2的数据集 三…
阅读更多...
maven报orace,jdbc错误，并出现大量红色波浪线Unresolved dependency

maven报orace,jdbc错误，并出现大量红色波浪线Unresolved dependency

由于oracle的限制&#xff0c;一般我们是无法通过maven直接下载oracle的驱动包的&#xff0c;这就可能导致其余的包出现红色波浪线&#xff0c;解决方法如下 1.新建一个文件夹&#xff0c;并将oracle驱动包放在这个新建的文件夹下&#xff0c;注意不要讲这个oracle包放在maven本…
阅读更多...
浏览器数据找回

浏览器数据找回

网站上分享的文章应该都是个人的心血&#xff0c;对于一些操作问题导致心血丢失真的很奔溃&#xff0c;终于找到一个弥补的办法&#xff0c;csdn的文章谷歌浏览器亲测有效&#xff0c;理论上其他浏览器的其他网站应该也可以&#xff0c;适用以下场景 把博客编辑当成了编写新博…
阅读更多...
Vue3+TS版本Uniapp：项目前置操作

Vue3+TS版本Uniapp：项目前置操作

作者&#xff1a;前端小王hs 阿里云社区博客专家/清华大学出版社签约作者✍/CSDN百万访问博主/B站千粉前端up主 环境&#xff1a;使用vscode进行开发 如果一开始是使用的HbuilderX&#xff0c;请看hbuilderX创建的uniapp项目转移到vscode 为什么选择vscode&#xff1f;有更好…
阅读更多...
温湿度LCD显示并上传服务器

温湿度LCD显示并上传服务器

项目需求 通过温湿度传感器将值传到LCD1602&#xff0c;并实时通过蓝牙透传到手机。 硬件介绍 温湿度传感器 DHT11温湿度传感器 DHT11_温湿度传感器数据格式-CSDN博客 LCD1602LCD1602-CSDN博客 HC-01 继电器模块 硬件接线 LCD1602 D0~D7 --> A0~A7VDD, A --> 5v…
阅读更多...
（避雷指引：管理页面超时问题）windows下载安装RabbitMQ

（避雷指引：管理页面超时问题）windows下载安装RabbitMQ

一、背景&#xff1a; 学习RabbitMQ过程中&#xff0c;由于个人电脑性能问题&#xff0c;直接装在windows去使用RabbitMQ&#xff0c;根据各大网友教程&#xff0c;去下载安装完之后&#xff0c;使用web端进行简单的入门操作时&#xff0c;总是一直提示超时&#xff0c;要么容…
阅读更多...
大sql mysql执行

大sql mysql执行

先把sql 拆分 太大的执行失败 使用 SQLDumpSplitter3 拆分sql 执行拆分的sql 拆分的sql 打开发现很多 ; 开头的空行 替换掉 正则 ^; 修改数据库 my.cnf my,ini 执行可能会提示 [ERR] 2006 - Server has gone away 错误 在 [mysqld] 添加以下几行 wait_timeout2880000 inter…
阅读更多...
WordPress SQLite Docker 镜像封装细节

WordPress SQLite Docker 镜像封装细节

为了让大家用的放心&#xff0c;同时解答 GitHub 社区中的疑问。这篇文章聊聊上一篇文章的 Docker 容器封装细节。 写在前面 在前一篇文章《WordPress 告别 MySQL&#xff1a;Docker SQLite WordPress》中&#xff0c;如果你跟着文章实践&#xff0c;大概三分钟就能够启动一个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023