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. 答不上的JUC笔试题

    1:有一个总任务A,分解为子任务A1 A2 A3 ...,任何一个子任务失败后要快速取消所有任务,请写程序模拟. 「请寻求最优解,不要只是粗暴wait()」 本题解题思路:Fork/Join 通常使用 ...

  2. docker轻量级监控-sysdig

    sysdig Sysdig = system(系统)+dig(挖掘).Sysdig 是一个开源系统发掘工具,用于系统级别的勘察和排障,可以把它看作一系列Linux系统工具的组合,主要包括: strac ...

  3. 2021-2-26:为什么需要 System.gc() ?

    JVM 默认启动参数中,DisableExplicitGC 为 false,ExplicitGCInvokesConcurrent 为 false,对于大多数 GC (除了 ZGC 的其他 GC,包括 ...

  4. ElasticSearch 集群安全

    公号:码农充电站pro 主页:https://codeshellme.github.io 在安装完 ES 后,ES 默认是没有任何安全防护的. ES 的安全管理主要包括以下内容: 身份认证:鉴定访问用 ...

  5. 防数据泄露_MySQL库和数据安全

    目录 攻击场景 外部入侵 内部盗取 防御体系建设 参考 在企业安全建设中有一个方向是防数据泄露,其中一块工作就是保障数据库安全,毕竟这里是数据的源头.当然数据库也分不同的种类,不同类型的数据库的防护手 ...

  6. 用go实现常见的数据结构

    目录 1 golang常见数据结构实现 1.1 链表 1.2 可变数组 1.3 栈和队列 1.3.1 原生切片实现栈和队列 1.3.1.1 切片原生栈实现 1.3.1.2 切片原生队列实现 1.3.2 ...

  7. KeyboardDemo - Android身份证号、车牌号快捷输入键盘

    Android身份证号.车牌号快捷输入键盘 项目地址 Github 键盘部分在 keyboard module 中 键盘与EditText绑定参照 MainActivity

  8. 【python+selenium的web自动化】- 元素的常用操作详解(一)

    如果想从头学起selenium,可以去看看这个系列的文章哦! https://www.cnblogs.com/miki-peng/category/1942527.html ​ 本篇主要内容:1.元素 ...

  9. 关于Python编写时候的一些数据格式调用问题

    utf-8 可变长度字符串,互联网通用,目的是减少内存占用Unicode 万国码, 对于英文多占用一个字节ASCII码 美国编码1个字节Gb2313 中国编码 编码 encode解码 decodepy ...

  10. HashMap源码阅读(小白的java进阶)

    OverView 构造方法 //构造方法 public HashMap(int initialCapacity, float loadFactor) { if (initialCapacity < ...