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，自动补齐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

八、实现效果

请添加图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

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

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

0.前言 接触Qt开发也有一年多的时间了&#xff0c;还记得去年初从杭州回合肥时&#xff0c;刚来公司面临的几个问题&#xff1a; 1.C#转上位机的迷茫2.新公司管理模式的差异3.试用期的各种紧急任务。 当时也是加班加点学习C和Qt的基础知识&#xff0c;做了两个考核项目后&am…
阅读更多...
生态短讯 | Tapdata 与 TDengine 完成产品兼容性互认证，打造物联网实时数据生态

生态短讯 | Tapdata 与 TDengine 完成产品兼容性互认证，打造物联网实时数据生态

近月&#xff0c;深圳钛铂数据有限公司&#xff08;以下简称钛铂数据&#xff09;自主研发的实时数据平台&#xff08;Tapdata Live Data Platform&#xff09;与北京涛思数据科技有限公司&#xff08;以下简称涛思数据&#xff09;自主研发的大数据平台 TDengine&#xff0c;已…
阅读更多...
arm版Linux下安装大数据集群各种组件

arm版Linux下安装大数据集群各种组件

背景&#xff1a;由于本人是用的Macbookpro m2来进行开发的&#xff0c;很多环境和Intel芯片的都不一样&#xff0c;期间安装各种软件遇到各种问题&#xff0c;为了以后不走之前的老路&#xff0c;现记录各种软件的安装步骤。 系统安装组件说明 序号组件名称组件版本1jdkjdk-…
阅读更多...
SpringMvc的核心组件和执行流程

SpringMvc的核心组件和执行流程

一、 springmvc的核心组件及作用 1.DispatcherServlet:前置控制器&#xff0c;是整个流程控制的核心&#xff0c;用来控制其他组件的执行&#xff0c;降低了其他组件的耦合性 2.Handler:控制器&#xff0c;完成具体的业务逻辑&#xff0c;当DispatcherServlet接收到请求后&am…
阅读更多...
Linux华硕笔记本安装ROG Asusctl

Linux华硕笔记本安装ROG Asusctl

基础环境 适用系统&#xff1a; linux mint 21ubuntu 22.04 安装版本&#xff1a; asusctl-5.0.10rust 1.77.2 构建 安装编译环境 sudo apt-get update sudo apt-get install -y \libasound2-dev \libfreetype6-dev \libexpat1-dev \libxcb-composite0-dev \libssl-dev …
阅读更多...
mysql基础2——字段类型

mysql基础2——字段类型

整数类型 需要考虑存储空间和可靠性的平衡 浮点类型 浮点数类型不精准 将十进制数转换为二进制数存储 浮点数类型&#xff1a;float double real(默认是&#xff0c;double ) 如果需要将real设定为float &#xff0c;那么通过以下语句实现 set sql_mode "real_as…
阅读更多...
Token 在 LLM

Token 在 LLM

大语言模型不能理解原始文本，所以需要把原始文本转换成大语言模型可以理解的数字表示形式，经过大模型处理以后，需要将该数字表示形式转换为人可以理解的文本。 原始文本到 token 原始文本转换为token序列的过程通常是在LLM的预处理阶段完成的。 在大型语言模型(LLM)中,tok…
阅读更多...
restful请求风格的增删改查-----查询and添加

restful请求风格的增删改查-----查询and添加

一、restful风格的介绍 restful也称之为REST ( Representational State Transfer )&#xff0c;可以将它理解为一种软件架构风格或设计风格&#xff0c;而不是一个标准。简单来说&#xff0c;restful风格就是把请求参数变成请求路径的一种风格。例如&#xff0c;传统的URL请求…
阅读更多...
Windows bat实现循环往txt文件插入1000条数据内容

Windows bat实现循环往txt文件插入1000条数据内容

bat脚本实现&#xff1a; echo off for /L %%i in (1,1,1000) do (echo "I am from 192.168.10.171" >> c:\ztj.txt ) echo off --在批处理运行命令的时候不会一条一条的显示执行的命令 for /L %variable in (start,step,end) do command [command-p…
阅读更多...
SQLite导出数据库至sql文件

SQLite导出数据库至sql文件

SQLite是一款实现了自包含、无服务器、零配置、事务性SQL数据库引擎的软件库。SQLite是世界上部署最广泛的SQL数据库引擎。 SQLite 是非常小的&#xff0c;是轻量级的&#xff0c;完全配置时小于 400KiB&#xff0c;省略可选功能配置时小于250KiB。 SQLite 源代码不受版权限制。…
阅读更多...
BST+二分

BST+二分

二叉搜索树 二叉查找树是指一棵有下列性质的[二叉树]&#xff1a; 若任意节点的左子树不空&#xff0c;则左子树上所有节点的值均小于它的根节点的值&#xff1b;若任意节点的右子树不空&#xff0c;则右子树上所有节点的值均大于它的根节点的值&#xff1b;任意节点的左、右…
阅读更多...
《计算思维导论》笔记：《第10章 数据化思维-数据聚集与管理》计算思维第17讲-从表的管理看数据库

《计算思维导论》笔记：《第10章 数据化思维-数据聚集与管理》计算思维第17讲-从表的管理看数据库

《大学计算机—计算思维导论》&#xff08;战德臣 哈尔滨工业大学&#xff09; 《计算思维第17讲-从表的管理看数据库----结构化与非结构化数据管理》 一、引言 今天我们从表的管理看数据库&#xff0c;给大家讲一下结构化与非结构化数据管理的思维。 二、为什么需要数据库–工…
阅读更多...
ExpertPrompting：指导大语言模型成为杰出专家

ExpertPrompting：指导大语言模型成为杰出专家

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 论文标题&#xff1a;ExpertPrompting: Instructing Large Language Models to be Distinguished Experts 论文地址&#xff1a;https://arxiv.org/abs/2305.14688 作者 & 机构&#xff1a;Benfen…
阅读更多...
cd /op-bash: 无法为立即文档创建临时文件: 设备上没有空间

cd /op-bash: 无法为立即文档创建临时文件: 设备上没有空间

问题 在shell输入命令按tab键时出现以下报错 (base) [link999hadoop102 ~]$ cd /op-bash: 无法为立即文档创建临时文件: 设备上没有空间 -bash: cd: /op: 没有那个文件或目录原因分析 磁盘空间不够 df -Th # 通过命令查看具体情况解决 1、清理大文件 进入到 容量-已用 使…
阅读更多...
【未完成】【QT+OpenCV】车牌号检测 学习记录 遇到的问题

【未完成】【QT+OpenCV】车牌号检测 学习记录 遇到的问题

【QTOpenCV】车牌号检测 学习记录 首先在QT里面配置好OpenCV .pro文件中加入&#xff1a; INCLUDEPATH G:/opencv/build/include LIBS -L"G:/opencv/build/x64/vc14/lib"\-lopencv_core \-lopencv_imgproc \-lopencv_highgui \-lopencv_ml \-lopencv_video \-lo.c…
阅读更多...
【c++】stack和queue使用 stack和queue模拟实现

【c++】stack和queue使用 stack和queue模拟实现

主页&#xff1a;醋溜马桶圈-CSDN博客 专栏&#xff1a;c_醋溜马桶圈的博客-CSDN博客 gitee&#xff1a;mnxcc (mnxcc) - Gitee.com 目录 1. stack的介绍和使用 1.1 stack的介绍 1.2 stack的使用 1.3 stack的模拟实现 2. queue的介绍和使用 2.1 queue的介绍 2.2 queue的…
阅读更多...
react之组件与JSX

react之组件与JSX

第一章 - 描述用户界面 概述&#xff1a;React是一个用于构建用户界面&#xff08;UI&#xff09;的JavaScript库&#xff0c;用户界面由按钮&#xff0c;文本和图像等小单元内容构建而成。React帮助你把它们组合成可重用&#xff0c;可嵌套的组件。从web端网站到移动端应用&a…
阅读更多...
【Node.js】02 —— Path模块全解析

【Node.js】02 —— Path模块全解析

&#x1f31f;Node.js之Path模块探索&#x1f308; &#x1f4da;引言 在Node.js的世界中&#xff0c;path模块就像一把万能钥匙&#x1f511;&#xff0c;它帮助我们理解和操作文件与目录的路径。无论你是初入Node.js殿堂的新手&#xff0c;还是久经沙场的老兵&#xff0c;理…
阅读更多...
如何在PostgreSQL中使用CTE（公共表表达式）来简化复杂的查询逻辑？

如何在PostgreSQL中使用CTE（公共表表达式）来简化复杂的查询逻辑？

文章目录 解决方案步骤示例代码 结论 在处理复杂的SQL查询时&#xff0c;我们经常会遇到需要多次引用子查询或中间结果的情况。这可能会使得查询变得冗长且难以理解。为了解决这个问题&#xff0c;PostgreSQL&#xff08;以及其他一些SQL数据库系统&#xff09;引入了公共表表达…
阅读更多...
uni-app为图片添加自定义水印（升级版）

uni-app为图片添加自定义水印（升级版）

前置内容 uni-app为图片添加自定义水印&#xff08;解决生成图片不全问题&#xff09; UI 升级 现在水印样式变成这样了&#xff1a; 代码 <template><canvas v-if"waterMarkParams.display" canvas-id"waterMarkCanvas" :style"canv…
阅读更多...
最新文章

Copyright @ 2022~2023