当前位置: 首页 > article >正文

winform第三方界面开源库AntdUI的使用教程保姆级环境设置篇

  • 1. AntdUI
    • 1.1. 导入项目
      • 1.1.1. 首先新建一个空白的基于.net的Winfrom项目
      • 1.1.2. 复制AntdUI中src目录到我们的解决方案下面
      • 1.1.3. 解决方案下添加现有项目
      • 1.1.4. 添加项目引用
    • 1.2. 编写代码
      • 1.2.1. 改写Form1类,让其继承自public partial class Form1 : AntdUI.Window
      • 1.2.2. 从工具箱拖入AntdUI.PageHeader控件,设置属性为Dock=Top
      • 1.2.3. 从工具箱拖入AntdUI.Chat.MsgList控件,设置属性Dock=Left
      • 1.2.4. 从工具箱拖入AntdUI.Chat.ChatList控件,设置属性Dock=Fill
      • 1.2.5. 添加图片到资源,设置ico
      • 1.2.6. 重写OnLoad(EventArgs e)函数,做点仿GPT对话的动画效果。
    • 1.3. 效果演示

1. AntdUI

AntdUI是一个开源的Winfrom第三方库,它可以使你的Winform窗体程序更加美观。

项目地址:

https://gitee.com/antdui/AntdUI

1.1. 导入项目

1.1.1. 首先新建一个空白的基于.net的Winfrom项目

文章配图

框架选择.net6

文章配图

1.1.2. 复制AntdUI中src目录到我们的解决方案下面

文章配图

源码下载无法编译?

编译器要求 Visual Studio 2022 以及以上

Visual Studio 安装 旧版本(.NET Framework 4.0 和 4.5)

1.1.3. 解决方案下添加现有项目

右键解决方案,添加现有项目,将AntdUI.csproj工程添加到当前解决方案中。

文章配图

1.1.4. 添加项目引用

现在两个工程都在同一解决方案下,但是MyChat(winform)还是无法引用到AntdUI程序集中的类库,所以需要对MyChat添加项目引用。我们手动修改MyChat.csproj文件,添加Antd项目引用


<ItemGroup>

    <ProjectReference Include="..\src\AntdUI\AntdUI.csproj" />
  </ItemGroup>

文章配图

因为是手动修改的csproj文件,需要重启vs2022,可以看到MyChat中已经有了项目依赖。

文章配图

打开我们的工具箱。注意: 这里有的小伙伴工具箱可能会一片空白就像这样

文章配图

这是因为没有选中窗体的设计器,我们打开解决方案管理器-- >找到在主窗体文件-- >右击鼠标选择打开设计器-- >然后再次打开我们的工具箱,这样我们就能见到我们需要的组件了。

文章配图

  • ** 工具箱看不到AntdUI选项卡?**

1.需将 AntdUI.csproj 内 TargetFrameworks 只保留自己项目使用的框架版本,删除bin目录后,然后重新生成

2.并且重启VS让其重新加载。这样就能在vs工具箱看到AntdUI的控件了。

文章配图

1.2. 编写代码

代码编写起来很简单,这里只是简单应用一下。

1.2.1. 改写Form1类,让其继承自public partial class Form1 : AntdUI.Window

1.2.2. 从工具箱拖入AntdUI.PageHeader控件,设置属性为Dock=Top

1.2.3. 从工具箱拖入AntdUI.Chat.MsgList控件,设置属性Dock=Left

1.2.4. 从工具箱拖入AntdUI.Chat.ChatList控件,设置属性Dock=Fill

1.2.5. 添加图片到资源,设置ico

1.2.6. 重写OnLoad(EventArgs e)函数,做点仿GPT对话的动画效果。

1.3. 效果演示

短短几行代码就能实现很专业的UI,当然这里我们只是简单应用了一下antdUI库,要想提高编码设计能力,还需要认真研究antdUI的源码实现,看的时候要去思考别人是怎么写的(实现),为什么这么写(设计)。

文章配图

Reference

https://gitee.com/antdui/AntdUI/tree/main/example/ChatUI

http://www.clicksun.cn/mis/bbs/showbbs.asp?id=26670


http://www.kler.cn/a/499858.html

相关文章:

  • scala基础学习_方法函数
  • 基于华为ENSP的OSPF状态机、工作过程、配置保姆级别详解(2)
  • android四大组件之一——Service
  • vue3监听器
  • cmake - build MS STL project
  • Vue 3 Diff 算法过程及基本实现方式
  • 信息系统项目管理-采购管理-采购清单示例
  • 2024.10.12 校招 实习 内推 面经
  • 【问题记录】解决小米手机无线投屏出现白屏什么都无法显示的问题
  • 【ROS2】☆ launch之Python
  • 重生之我在21世纪学C++—string
  • 【cuda学习日记】2.2 使用2维网络(grid)和2维块(block)对矩阵进行求和
  • 基于springboot+vue的高校创新创业课程体系的设计与实现
  • OpenAI掌舵人解读OpenAI新进展:迈向超级智能。
  • 传奇3仿韩服单机版安装教程+GM管理面板
  • 20250111面试鸭特训营第19天
  • postgresql|数据库|利用sqlparse和psycopg2库批量按顺序执行SQL语句(psyconpg2新优化版本)
  • 请求方式(基于注解实现)
  • vue.js 使用router-link替代a标签实现高亮
  • Windows11环境下设置MySQL8字符集utf8mb4_unicode_ci
  • UE材质控制UV
  • axios的替代方案onion-middleware
  • Windows 下安装 PyTorch 的常见问题及解决方法
  • 在php中,Fiber、Swoole、Swow这3个协程都是如何并行运行的?
  • 【HTML+CSS+JS+VUE】web前端教程-3-标题标签
  • Seata搭建