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

news2024/10/5 20:23:08

一、 效果展示

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，自动补齐0
         lbl.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，自动补齐0
         lbl.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.coloradmin.cn/o/1630848.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux内核广泛采用的侵入式数据结构设计

Linux内核广泛采用的侵入式数据结构设计

Linux内核广泛采用的侵入式数据结构设计恐怕很难应用到一般程序开发中。基本上是个高维十字链表&#xff0c;一个节点(struct)可以同时位于多个hash/list/tree中。我分享下我的经历&#xff0c;我刚入行时遇到一个好公司和师父&#xff0c;给了我机会&#xff0c;一年时间从3k薪…
阅读更多...
【网络原理】IP协议的地址管理和路由选择

【网络原理】IP协议的地址管理和路由选择

系列文章目录 【网络通信基础】网络中的常见基本概念 【网络编程】网络编程中的基本概念及Java实现UDP、TCP客户端服务器程序&#xff08;万字博文&#xff09; 【网络原理】UDP协议的报文结构 及 校验和字段的错误检测机制&#xff08;CRC算法、MD5算法&#xff09; 【网络…
阅读更多...
Arthas：阿里出品，线上问题快速搞定！

Arthas：阿里出品，线上问题快速搞定！

前面我们通过JVM线程分析及内存分析来让大家从服务器资源异常情况下排查代码问题&#xff0c;类似这种的解决方式&#xff0c;更多的是在服务器资源占用已经异常显现&#xff0c;我们就可以按照这种方式去排查和解决。 但实际工作中&#xff0c;可能会出现&#xff1a;接口的TP…
阅读更多...
什么是网络安全CTF？

什么是网络安全CTF？

什么是网络安全CTF? CTF 的意义&#xff1a; 如何入门 CTF&#xff1a; 推荐的在线 CTF 平台&#xff1a; 什么是网络安全CTF? CTF (Capture The Flag) 是一种网络安全竞赛&#xff0c;参赛者需要解决各种安全挑战&#xff0c;例如破解密码、利用漏洞、分析恶意软件等&am…
阅读更多...
二极管钳位型光伏逆变并网建模simulink仿真

二极管钳位型光伏逆变并网建模simulink仿真

整理了二极管钳位型光伏逆变并网建模simulink仿真&#xff0c;效果明显&#xff0c;附赠仿真报告。适合小白 二极管钳位型光伏逆变并网是将光伏发电系统中的直流电能转换为交流电能&#xff0c;并与电网连接。在此仿真中使用最大功率点追踪&#xff08;MPPT&#xff09;技术&a…
阅读更多...
【C语言】编译与链接

【C语言】编译与链接

1.翻译环境与运行环境 在ANSI C的任何一种实现中&#xff0c;存在两个不同的环境。 1.翻译环境&#xff0c;在这个环境中源代码被转换为可执行的机器指令&#xff08;二进制指令&#xff09; 2.执行环境&#xff0c;它用于实际执行代码 2.翻译环境 那么翻译环境是怎么将源代码…
阅读更多...
【Docker】docker部署lnmp和wordpress网站

【Docker】docker部署lnmp和wordpress网站

环境准备 docker&#xff1a;192.168.67.30 虚拟机&#xff1a;4核4G systemctl stop firewalld systemctl disable firewalld setenforce 0 安装docker #安装依赖包 yum -y install yum-utils device-mapper-persistent-data lvm2 #设置阿里云镜像 yum-config-manager --add…
阅读更多...
vue3学习笔记-快速上手

vue3学习笔记-快速上手

创建第一个vue3的应用 之前看书学习vue,书籍对应的版本是vue2,今天群里看小伙伴聊天&#xff0c;觉得他们说得对 &#xff0c;反正是从零开始学&#xff0c;而且vue2都不维护了&#xff0c;那为什么不直接学习vue3呢&#xff0c;于是乎&#xff0c;又开启了从0学vue3之路。 参考…
阅读更多...
Linux之进程间通信(二)

Linux之进程间通信(二)

system V system V共享内存是内核中专门设计的通信的方式, 粗粒度划分操作系统分为进程管理, 内存管理, 文件系统, 驱动管理.., 粒度更细地分还有 进程间通信模块. 对于操作系统, 通信的场景有很多, 有以传送数据, 快速传送数据, 传送特定数据块, 进程间协同与控制以目的, 它…
阅读更多...
一键设置jdk环境脚本

一键设置jdk环境脚本

自动化脚本 一、使用方法 创建一个txt文本&#xff0c;放在和jdk存放的同一目录下&#xff0c;复制粘贴进我的代码&#xff0c;利用全局替换&#xff0c;将jdk1.8,改成你自己的jdk包名字&#xff0c;再重新把这个文件保存为.vbs文件。然后运行就行了 MsgBox "Runing s…
阅读更多...
线上社交app的搭建，圈子社交系统，小程序＋app＋H5三端，源码交付，支持二开！

线上社交app的搭建，圈子社交系统，小程序＋app＋H5三端，源码交付，支持二开！

在科技飞速发展的大背景下&#xff0c;年轻人社交不再局限于面对面&#xff0c;线上社交app已深入各大年轻人的手机中。相比于传统交友方式&#xff0c;线上社交app为用户提供了更加新奇的交友体验。同时&#xff0c;它还可以吸引更多的朋友&#xff0c;提高用户的整体交友体验…
阅读更多...
第4篇：创建Nios II工程之Hello_World＜三＞

第4篇：创建Nios II工程之Hello_World＜三＞

Q&#xff1a;接着我们再来完成Nios II软件工程设计部分。 A&#xff1a;从Quartus Tools选择Nios II Software Build Tools for Eclipse&#xff0c;打开Nios II SBT软件&#xff0c;Workspace指定到hello_world工程的software文件夹路径&#xff1b;再从File-->New-->…
阅读更多...
Java学习13

Java学习13

目录 一.内部类: 1.概念&#xff1a; 2.内部类的分类&#xff1a; &#xff08;1&#xff09;定义在外部类的局部位置上&#xff08;通常在方法体中&#xff09;&#xff1a; 1. 局部内部类&#xff08;有类名&#xff09; 2.匿名内部类&#xff08;无类名-重点&#xff01;…
阅读更多...
Linux 基础命令使用创建用户

Linux 基础命令使用创建用户

浏览网站的时候图片&#xff0c;看到一个小练习。创建用户分别位于不同的用户组。 解答下面的题目 2、建立用户使用 useradd&#xff0c;设置密码使用passwd的命令。大概不会使用命令可以借助man来解答。 先建立用户组&#xff1a; groupadd group1 # group1 不存在先建立&…
阅读更多...
Redis底层数据结构之ZSkipList

Redis底层数据结构之ZSkipList

目录 一、概述二、ZSkipList结构三、和平衡树和哈希表的对比 redis底层数据结构已完结&#x1f44f;&#x1f44f;&#x1f44f;&#xff1a; ☑️redis底层数据结构之SDS☑️redis底层数据结构之ziplist☑️redis底层数据结构之quicklist☑️redis底层数据结构之Dict☑️redis…
阅读更多...
可替代IBM DOORS的现代化需求管理解决方案Jama Connect，支持数据迁移及重构、实时可追溯性、简化合规流程

可替代IBM DOORS的现代化需求管理解决方案Jama Connect，支持数据迁移及重构、实时可追溯性、简化合规流程

作为一家快速发展的全球性公司&#xff0c;dSPACE一直致力于寻找保持领先和优化开发流程的方法。为推进其全球现代化计划&#xff0c;dSPACE开始寻找可以取代传统需求管理平台&#xff08;IBM DOORS&#xff09;的需求管理解决方案。 通过本次案例&#xff0c;您将了解dSPACE为…
阅读更多...
【YOLO 系列】基于YOLO V8的火灾烟雾监控检测识别系统【python源码+Pyqt5界面+数据集+训练代码】

【YOLO 系列】基于YOLO V8的火灾烟雾监控检测识别系统【python源码+Pyqt5界面+数据集+训练代码】

摘要&#xff1a; 火灾烟雾的及时检测对于人们的生命财产安全至关重要。然而&#xff0c;在大多数情况下&#xff0c;火灾往往在被发现时已经进展到了难以控制的阶段&#xff0c;这导致了严重的后果。为了解决这一问题&#xff0c;我们提出了基于深度学习技术的火灾烟雾检测系…
阅读更多...
前端开发攻略---介绍HTML中的＜dialog＞标签，浏览器的原生弹框。

前端开发攻略---介绍HTML中的＜dialog＞标签，浏览器的原生弹框。

1、演示 2、介绍 <dialog> 标签用于定义对话框&#xff0c;即一个独立的窗口&#xff0c;通常用来显示对话框、提示框、确认框等弹出式内容。在对话框中&#xff0c;可以包含文本、表单元素、按钮等内容&#xff0c;用户可以和这些内容进行交互。 3、兼容性 4、示例代码 …
阅读更多...
03-MVC执行流程-参数解析与Model

03-MVC执行流程-参数解析与Model

重要组件 准备Model&#xff0c;Controller Configuration public class WebConfig {ControllerAdvicestatic class MyControllerAdvice {ModelAttribute("b")public String bar() {return "bar";}}Controllerstatic class Controller1 {ResponseStatus(H…
阅读更多...
现代永磁同步电机控制原理pdf及全套matlab仿真模型

现代永磁同步电机控制原理pdf及全套matlab仿真模型

现代永磁同步电机控制原理pdf及matlab仿真模型。全书包含SVPWM, DTC, Lun, smo, EKF, HFI等经典控制算法。将书中10章节涉及到的模型复原搭建模型。 模型获取链接&#xff1a;现代永磁同步电机控制原理pdf及全套matlab仿真模型
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023