CPF netcore跨平台UI框架

系列教程

CPF 入门教程(一)

CPF 门教程 - 数据绑定和命令绑定(二)

CPF 入门教程 - 样式和动画(三)

CPF 入门教程 - 绘图(四)

CPF 入门教程 - 设计器和模板库的使用(五)

CPF 入门教程 - 控件布局(六)

注意:免费模式里无法使用这些功能。

先打开一个CPF设计视图,右键可以看到模板库选项。

其中模板库里有控件组和控件模板两种类型。

控件组:由Panel包裹的一组控件,并且Panel的IsGroup属性为true。这个时候控件组可以看做一个整体,默认鼠标点击子元素拖动是直接拖到Panel,需要按Alt才能通过鼠标拖动子元素或者直接用键盘调子元素的位置还是可以的。

控件组的意义在于,界面代码的复用,同时兼顾各个元素可以独立调整。比如做一个按钮里面包含图片和文字,一般开发者习惯编辑这个按钮的模板来实现,但是需要同时支持图片和文字,那就需要另外定义图片属性和文字属性来实现单独的设置,或者对图片和文字定义绑定的字段。而且,如果不同地方需要复用这个代码,同时可能还需要调整字体,图片位置等等,这样代码量比较大。但是如果用控件组的话,就不需要这么麻烦了。自带图片和文字的控件组,如果没有你想要的,你也可以自己设计控件组,添加到库里,方便以后复用。

选中按钮,右键,模板库,控件组,图片+文字,自动添加图片和文字的控件。然后你可以单独对图片和文字设置,改颜色,位置...你想要怎么调整都行。

除了按钮之外,像TabItem里,TreeViewItem里等等,很多地方都可以这样使用,选项卡里加文字图片关闭按钮等等,都很方便。

控件模板

这里的控件模板主要是InitializeComponent 整个方法。一般的UI代码都写在InitializeComponent,这样可以方便子类覆盖重写。兼顾UI的自定义和功能的复用。一般简单的UI代码复用用控件组,复杂的就用控件模板来实现,已经需要数据绑定做列表,表格等等内容的时候也需要用模板来实现。

其中基础控件模板里包含里几乎所有内置控件的模板代码。假如你需要对某个自带控件深度定制的话,可以先VS添加个CPF控件,修改继承类型为你需要重写的。

双击打开设计界面,右键,模板库,选择基础控件模板,找到对应的控件模板,VS会自动将内置控件的模板代码添加到InitializeComponent ,这样你就可以根据内置的控件模板代码来改成你需要的,相当于WPF里的编辑模板副本,自动生成当前控件的模板。

添加自己设计的控件组和模板到库

假如自己设计了个控件组,最底层的控件必须是Panel或者Panel的子类,把改成true,然后控件右键,就有添加到模板库

填写模板名称,点确认添加就行了。会自动把预览图和代码保存到模板库里。

如果是模板的话,直接先选中当前设计器的根元素控件,右键,添加模板库。 就会把整个InitializeComponent() 方法的代码保存起来。

这些模板代码和图片保存在开发者工具目录里的,你可以根据自己的需求对模板代码修改。如果要修改图片,需要关闭VS。

设计器里的一些使用细节

1,快速使用svg图标,一般到 阿里巴巴的 www.iconfont.cn 搜索你要的图标,找到图标之后,选择下载,然后选择复制SVG代码。这样你就可以直接粘贴到设计界面里,会自动生成SVG元素。需要注意的是,不能支持显示复杂的svg,复制的内容必须是<svg开头和</svg>结尾的,如果svg内容太长,建议把svg保存到单独的svg文件里。再通过svg控件引用这个svg文件。

使用svg文件资源

2.写CSS的时候,记得要开启关键词提示

3.生成控件字段

设置好Name,然后把GenerateMember改成true

如果生成字段了,需要重命名,需要用VS的Ctrl+R+R来重命名才行。

4.生成事件命令方法

点开命令集合,

添加一个命令,EventName里选择你要绑定的事件或者属性变化通知,填好需要生成的MethodName方法名。点确定,就会自动生成对应的方法。

CPF 入门教程 - 设计器和模板库的使用(五)的更多相关文章

  1. CPF 入门教程 - 控件布局(六)

    CPF netcore跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) C ...

  2. CPF 入门教程 - 属性和事件(七)

    CPF C#跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) CPF 入门 ...

  3. CPF 入门教程 - 各个控件介绍(八)

    CPF C#跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) CPF 入门 ...

  4. CPF 入门教程 - 各平台各系统发布说明(九)

    CPF C#跨平台桌面UI框架,支持Windows,Mac,Linux,支持龙芯.飞腾等CPU 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - ...

  5. CPF 入门教程 - 数据绑定和命令绑定(二)

    CPF netcore跨平台UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) 数据绑定和Wpf类似,支持双向绑定.数据绑定和命令绑定是UI和业务逻辑分离的基础 ...

  6. CPF 入门教程 - 样式和动画(三)

    CPF NetCore跨平台UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) 用样式可以对内部元素进行批量设置属性. ...

  7. CPF 入门教程 - 绘图(四)

    CPF NetCore跨平台UI框架,增加了Vlc支持跨平台播放视频. 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF ...

  8. Qt编写控件属性设计器9-数据库采集

    一.前言 数据库作为数据源,在很多组态软件中使用非常多,指定数据库类型,填写好数据库连接信息,指定对应的数据库表和字段,采集间隔,程序按照采集间隔自动采集数据库数据,绑定到界面上的控件赋值显示即可.使 ...

  9. mui初级入门教程(六)— 模板页面实现原理及多端适配指南

    文章来源:小青年原创发布时间:2016-07-26关键词:mui,webview,template,os,多端适配转载需标注本文原始地址: http://zhaomenghuan.github.io. ...

随机推荐

  1. 手把手教你SpringBoot2整合Redis

    此文仅为初学java的同学学习,大佬请勿喷,文末我会附上完整代码包供大家参考 redis的搭建教程此处略过,大家自行百度,本文的教程开始: 一.先在pom.xml中添加相关依赖 <!--redi ...

  2. secure 审计暴力登陆

    文件路径 cd /var/log -rw------- 1 root root 1200063 Aug 10 20:04 secure 做应急响应,或者做脚本监控的时候,都可以参考如下特征 ... A ...

  3. PAT-1167(Cartesian Tree)根据中序遍历序列重建最小堆

    Cartesian Tree PAT-1167 一开始我使用数组进行存储,但是这样可能会导致无法开足够大的数组,因为树如果是链表状的则无法开这么大的数组(虽然结点很少). 正确的解法还是需要建树,使用 ...

  4. 1.1 Python3基础-前言

    >>返回主目录 Python 交互式代码 Python 脚本式代码 第一段Python代码: print('Hello World!') >>返回主目录

  5. git clone 提速

    将类似于 git clone https://github.com/graykode/nlp-tutorial 的命令改成 https://github.com.cnpmjs.org/graykode ...

  6. kali msf6 更新及bug处理

    问题描述 Metasploit 漏洞库更新,利用msfupdate命令更新,出现已停止该命令更新,出现如下提示: 利用一句话安装更新,命令如下,安装过程中有部分警告出现 curl https://ra ...

  7. TensorFlow学习(1)

    初识TensorFlow 一.术语潜知 深度学习:深度学习(deep learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法. 深度学 ...

  8. 【odoo14】第十五章、网站客户端开发

    odoo的web客户端.后台是员工经常使用的地方.在第九章中,我们了解了如何使用后台提供的各种可能性.本章,我们将了解如何扩展这种可能性.其中web模块包含了我们在使用odoo中的各种交互行为. 本章 ...

  9. 自定义校验注解ConstraintValidator

    一 前言 系统执行业务逻辑之前,会对输入数据进行校验,检测数据是否有效合法的.所以我们可能会写大量的if else等判断逻辑,特别是在不同方法出现相同的数据时,校验的逻辑代码会反复出现,导致代码冗余, ...

  10. Aibabelx-shop 大型微服务架构系列实战之技术选型

    一.本项目涉及编程语言java,scala,python,涉及的技术如下: 1.微服务架构: springboot springcloud mybatisplus shiro 2.全文检索技术 sol ...