记录|C#+winform创建扁平化风格界面

本项目的C#内容是自己跟做的,自己做的内容已经打包,可以通过自己跟做写的Dashboard界面,C#下的winform模式下载获得,但是需要花费3个积分

目录

  • 前言
  • 一、左边设置和步骤
    • 界面
    • 步骤
      • Step1.
      • Step2.
      • Step3.
      • Step4
      • Step5
  • 二、右边属性和步骤
    • 属性设置
    • 步骤
      • Step1.
      • Step2.
      • Step3.
  • 三、最终效果
    • 设计图:
    • 运行图:
  • 更新时间


前言

这是篇跟练文章,主要是记录自己对视频中内容的复刻,旨在通过复刻实现对Winform中的界面布局的了解。

记录来源:[C#][Winform]如何创建一个炫酷的扁平化风格Dashboard
下载文件:自己跟做写的Dashboard界面,C#下的winform模式


一、左边设置和步骤

界面

Form

  • StartPosition:CenterScreen
  • FormBorderStyle:None
  • BackColor:46,51,73
  • Size:951,577

Panel1

  • BackColor:24,30,54
  • Dock:Left
  • Size:186,577

Panel2

  • Dock:Top
  • Size:186,144

PictureBox1

  • 参数直接点击下图中符号设置
    在这里插入图片描述
  • 具体而言,是设置了Image和SizeMode的属性。
  • Location:60,20在这里插入图片描述

Label1

  • ForeColor:0, 126, 249
  • Text:UserName
  • Font中设置如下:
    在这里插入图片描述
    Label2
  • ForeColor:158,161,178
  • BackColor:Transparent
  • Text:Some User Text Here
  • Font设置如下:
    在这里插入图片描述
    Button1
  • Name:btnDashboard
  • Text:Dashboard
  • FlatSytle:Flat
  • FlatAppearance中的BorderSize:0
  • ForeColor:0,126,249
  • Font设置如下:
    在这里插入图片描述
  • Bold:True
  • Dock:Top
  • Image:更换图标
  • Size:186,42
  • TextImageRelation:TextBeforeImage
    以上动作做好后,再次将Dock改为:None 【目的是:将这个Button1模块复制出多个】
    但是上面复制好后,仍旧是将Dock改回为Top

Button2

  • Name:btnAnalytics
  • Image:更换图
  • Text:Analytics
  • Dock:Top

Button3

  • Name:btnCalender
  • Text:Calender
  • Dock:Top

Button4

  • Name:btnContectUs
  • Text:ContectUs

Button5

  • Name:btnSettings
  • Text:Settings
  • Dock:bottom

Panel3

  • Name:PnlNav
  • BackColor:0, 126, 249
  • Size:3,194
  • Location:移动Panel3到达合适的位置【看图】

步骤

Step1.

Form创建,设置Form参数
创建Panel1,设置参数
创建Panel2,放入Panel1中设置参数,
创建PictureBox1,放入Panel2中,设置参数
创建Label1,设置参数,放在在PictureBox1下
此时效果为:
在这里插入图片描述

Step2.

创建Label2,设置参数,放置在Label1的正下方。
创建Button1,设置参数。
以Button1为模板,复制出多个Button
当前效果如下所示:【我的home.png不知道为啥很大,无法设置Zoom属性
在这里插入图片描述
后来解决了,发现这里只能通过改变.png图片自身的大小来实现调节。
在这里插入图片描述

Step3.

对这些button2~button4进行属性设置。将Panel3放在合适的位置,最终结果如下所示:
在这里插入图片描述

Step4

双击Form界面,进入Form.cs界面中编写代码
在这里插入图片描述
效果为:
在这里插入图片描述

using System.Runtime.InteropServices;public partial class Form1 : Form{[DllImport("Gdi32.dll", EntryPoint = "CreateRoundRectRgn")]private static extern IntPtr CreateRoundRectRgn(int nLeftRect,int nTopRect,int nRightRect,int nBottomRect,int nWidthEllipse,int nHeightEllipse);public Form1(){InitializeComponent();Region = System.Drawing.Region.FromHrgn(CreateRoundRectRgn(0, 0, Width, Height, 25, 25));pnlNav.Height = btnDashboard.Height;pnlNav.Top = btnDashboard.Top;pnlNav.Left = btnDashboard.Left;btnDashboard.BackColor = Color.FromArgb(46, 51, 73);}
}

Step5

设置buton1~button5的点击事件。让Panel跟踪对应的button。

  • 设置了Panel的跟随
  • 设置了点击后的BackColor变化。【但是点击后依旧保持这个颜色,所以后面要设置离开后的事件去恢复颜色】
        private void btnDashboard_Click(object sender, EventArgs e){pnlNav.Height = btnDashboard.Height;pnlNav.Top = btnDashboard.Top;pnlNav.Left = btnDashboard.Left;btnDashboard.BackColor = Color.FromArgb(46, 51, 73);}private void btnAnalytics_Click(object sender, EventArgs e){pnlNav.Height = btnAnalytics.Height;pnlNav.Top = btnAnalytics.Top;pnlNav.Left=btnAnalytics.Left;btnAnalytics.BackColor = Color.FromArgb(46, 51, 73);}private void btnCalender_Click(object sender, EventArgs e){pnlNav.Height=btnCalender.Height;pnlNav.Top=btnCalender.Top;pnlNav.Left= btnCalender.Left;btnCalender.BackColor = Color.FromArgb(46, 51, 73);}private void btnContectUs_Click(object sender, EventArgs e){pnlNav.Height = btnContectUs.Height;pnlNav.Top = btnContectUs.Top;pnlNav.Left=btnContectUs.Left;btnContectUs.BackColor = Color.FromArgb(46, 51, 73);}private void btnSettings_Click(object sender, EventArgs e){pnlNav.Height = btnSettings.Height;pnlNav.Top=btnSettings.Top;pnlNav.Left = btnSettings.Left;btnSettings.BackColor = Color.FromArgb(46, 51, 73);}

设置button1-button5的离开事件,让颜色恢复。

        private void btnDashboard_Leave(object sender, EventArgs e){btnDashboard.BackColor = Color.FromArgb(24, 30, 54);}private void btnAnalytics_Leave(object sender, EventArgs e){btnAnalytics.BackColor = Color.FromArgb(24, 30, 54);}private void btnCalender_Leave(object sender, EventArgs e){btnCalender.BackColor = Color.FromArgb(24, 30, 54);}private void btnContectUs_Leave(object sender, EventArgs e){btnContectUs.BackColor = Color.FromArgb(24, 30, 54);}private void btnSettings_Leave(object sender, EventArgs e){btnSettings.BackColor = Color.FromArgb(24, 30, 54);}

二、右边属性和步骤

属性设置

Label4

  • font设置如下:
    [在这里插入图片描述](https://i-blog.csdnimg.cn/direct/cdea5c2cc3eb4252aa5f9093cbed1af5.png)-

  • ForeColor:158,161,176

  • Location:20,17

  • Text:Dashboard

TextBox1

  • Text:Search For Somethings
  • Size:292, 28
  • MultiLine:True
  • ForeColor:200,200,200
  • Font设置:
    在这里插入图片描述
  • BackColor:74, 79, 99

button1

  • Text:X
  • Size:25,25
  • ForeColor:White
  • FlatStyle:Flat
  • FlatAppearence下的BorderSize:0

Panel5

  • Size:258,130
  • BackColor:37,42,64

Label5

  • ForeColor:White
  • Text:Earning
  • Font:
    在这里插入图片描述

Label6

  • Text:$12345
  • ForeColor:0,146,249
  • Font:
    在这里插入图片描述

Label7

  • Text:Details of Last 28 Days
  • Font:
    在这里插入图片描述
  • ForeColor:159,151,176

PictureBox2

  • sizeMode:Zoom

步骤

Step1.

创建Panel4,用于遍布右边窗口界面。
创建Label3,放入Panel4左上角。
创建TextBox1,放在左边
创建Button放在TextBox1的右边
创建Panel5,放在Label3的下边
创建Label4和Label5,Label6和Label7放在Panel4中
创建PictureBox2,放在Panel5中。
当前效果如下图所示:
在这里插入图片描述

Step2.

复制Step1.中的内容,只需要更改色彩和图片即可。
ForeColor:50, 226, 178
在这里插入图片描述

Step3.

创建个button,用于显示进度图。【视频中是用了CircularProgressBar组件,很遗憾我没有,只要用贴图在button上的方式实现,或者用PictureBox来实现】
在这里插入图片描述

三、最终效果

设计图:

在这里插入图片描述

运行图:

在这里插入图片描述

更新时间

  • 2024.07.22:创建,上传C#源代码

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

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

相关文章

【BUG】已解决:ModuleNotFoundError: No module named ‘requests‘

ModuleNotFoundError: No module named ‘requests‘ 目录 ModuleNotFoundError: No module named ‘requests‘ 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页,我是博主英杰,211科班出身&a…

Django已经登录但是还是提示登录

问题描述 在使用 Django 开发网站时,你可能会遇到一个问题:当用户在访问网站时,如果 URL 从 https://200sm.com/chat/ 切换到 https://www.200sm.com/chat/,用户可能会被要求重新登录或遇到其他验证问题。这是因为 Django 默认情…

Python怎样读取URL生成PDF

1. 安装依赖的exe 需要在这个网址,安装一个exe包,地址:https://wkhtmltopdf.org/ 进入网址后,点这个位置: 选择一个你的操作系统的下载链接: 安装后的exe文件: C:\Program Files\wkhtmltopdf…

vue3.2使用@wangeditor/editor-for-vue实现富文本编辑器,后端使用thinkphp上传图片

Vue 组件代码 npm i wangeditor/editor-for-vue<template><div style"border: 1px solid #ccc;height:600px;"><Toolbar style"border-bottom: 1px solid #ccc" :editor"editorRef" :defaultConfig"toolbarConfig" :m…

记录解决springboot项目上传图片到本地,在html里不能回显的问题

项目场景&#xff1a; 项目场景&#xff1a;在我的博客系统里&#xff1a;有个相册模块&#xff1a;需要把图片上传到项目里&#xff0c;在html页面上显示 解决方案 1.建一个文件夹 例如在windows系统下。可以在项目根目录下建个photos文件夹&#xff0c;把上传的图片文件…

n9.Nginx 自定义访问日志

Nginx 自定义访问日志 访问日志是记录客户端即用户的具体请求内容信息&#xff0c;而在全局配置模块中的error_log是记录nginx服务 器运行时的日志保存路径和记录日志的level&#xff0c;因此两者是不同的&#xff0c;而且Nginx的错误日志一般只有一 个&#xff0c;但是访问日…

【Pytorch实用教程】pytorch中random_split用法的详细介绍

在 PyTorch 中,torch.utils.data.random_split 是一个非常有用的函数,用于将数据集随机分割成多个子集。这在机器学习和深度学习中非常常见,特别是当你需要将数据集分割成训练集和测试集或验证集时。这里是 random_split 的详细用法介绍: 功能 random_split 用于随机地将…

java面试-场景题

一、集合 1. java中如何给一个超大的一个亿左右的list数据去重&#xff1f; 我当时的回答是使用HashSet或Stream流的distinct语法。但是面试官好像更注重内存的消耗问题。 使用HashSet&#xff1a; HashSet 是一个不允许有重复元素的集合。你可以将List中的元素添加到HashSe…

华为OD2024D卷机试题汇总,含D量50%+,按算法分类刷题,事半功倍

目录 专栏导读华为OD机试算法题太多了&#xff0c;知识点繁杂&#xff0c;如何刷题更有效率呢&#xff1f; 一、逻辑分析二、数据结构1、线性表① 数组② 双指针 2、map与list3、队列4、链表5、栈6、滑动窗口7、二叉树8、并查集9、矩阵 三、算法1、基础算法① 贪心思维② 二分查…

虚拟机固定配置IP

在Hyper-V中&#xff0c;vEthernet (Default Switch) 是Hyper-V自带的默认虚拟交换机&#xff0c;它允许虚拟机直接连接到宿主机网络或外部网络。这个虚拟交换机可以通过Hyper-V管理器或PowerShell等工具进行管理和配置。以下是具体的操作步骤&#xff1a; 一、通过Hyper-V管理…

SAP 贷项销售订单简介

SAP 贷项销售订单简介 1. 什么是销售贷方销售订单?2. 创建销售贷方销售订单的场景3. 销售贷方销售订单的创建流程直接创建发票---VF01将会计凭证过账到会计核算查看贷项销售订单凭证流查看客户明细---FBL5N贷项后台配置SAP销售贷方销售订单(Sales Credit Memo Request)是销售…

Windows定时任务实现关闭和开启声音

目录 1. 下载并放置 nircmd.exe1.1 下载 NirCmd&#xff1a;1.2 放置 nircmd.exe&#xff1a; 2. 定时关闭声音2.1 打开任务计划程序&#xff1a;2.2 创建基本任务&#xff1a;2.3 设置任务名称和描述&#xff1a;2.4 触发器&#xff1a;2.5 操作&#xff1a;2.6 设置程序或脚本…

面试官问:Django、Flask、FastAPI,你选哪个?为什么?

如果你是python Web方向的开发工程师&#xff0c;那么在面试中&#xff0c;会经常遇到面试官问这个问题&#xff1a; “在Python的三个流行Web框架&#xff1a;Django、Flask和FastAPI&#xff0c;说说它们的异同&#xff0c;以及你是怎么选择合适的框架&#xff1f;” 异同对…

AndroidStudio 编辑xml布局文件卡死问题解决

之前项目编写的都是正常&#xff0c;升级AndroidStudio后编辑布局文件就卡死&#xff0c;还以为是AndroidStudio文件。 其实不然&#xff0c;我给整个项目增加了版权声明。所以全部跟新后&#xff0c;布局文件也增加了版权声明。估计AndroidStudio在 解析布局文件时候因为有版…

【目标检测】Anaconda+PyTorch(GPU)+PyCharm(Yolo5)配置

前言 本文主要介绍在windows系统上的Anaconda、PyTorch、PyCharm、Yolov5关键步骤安装&#xff0c;为使用yolo所需的环境配置完善。同时也算是记录下我的配置流程&#xff0c;为以后用到的时候能笔记查阅。 Anaconda 软件安装 Anaconda官网&#xff1a;https://www.anaconda…

Java API和API帮助文档

API:目前是JDK中提供的各种功能的Java类。 简单理解&#xff0c;API就是别人已经写好的东西&#xff0c;我们不需要自己编写&#xff0c;直接用就可以了。比如Random,Scanner....。 Java在设计的时候&#xff0c;将api收入在JDK-API帮助文档中&#xff0c;可直接在API帮助文档…

大数据量级科普

数据量的不同等级可以根据其存储能力的大小进行划分。以下是根据常见的数据存储单位&#xff0c;从低到高列出的数据量等级&#xff1a; 1. KB&#xff08;千字节&#xff09;级 定义&#xff1a;KB是Kilobyte的缩写&#xff0c;即千字节。存储容量&#xff1a;较小&#xff…

ubuntu源码安装Odoo

序言:时间是我们最宝贵的财富,珍惜手上的每个时分 Odoo具有非常多的安装方式&#xff0c;除了我最爱用的 apt-get install&#xff0c;我们还可以使用git拉取Odoo源码进行安装。 本次示例于ubuntu20.04 Desktop上进行操作&#xff0c;理论上在ubuntu14.04之后都可以用此操作。 …

OpenWrt 配置 Tailscale 内网穿透

前言 Openwrt 安装 zerotier 内网穿透. Tailscale 在 OpenWrt 下配置教程参考 GXNAS 博客 的 OpenWrt安装Tailscale设置内网穿透科学出国外网互访局域网设备。啥都不会难搞 的 【傻呱呱】OpenWrt安装Tailscale。阿髙 的 openwrt设置开机自启 tailscale为例。 Tailscale 安…

TensorFlow 1.12函数和注释

TensorFlow 1.12 包含大量的函数和类&#xff0c;覆盖了从基础数学操作到复杂的神经网络层构建的各种功能。列举出部分函数并进行注释。 基础张量操作 tf.add: 张量加法。tf.subtract: 张量减法。tf.multiply: 张量乘法。tf.div: 张量除法。tf.mod: 张量取模。tf.pow: 张量幂…