第一次接触第三方控件就是DotNetBar,现在官网已发布到12.2版本了,这里只能使用12.1破解版本,下载地址:http://www.t00y.com/file/92543094

在这个版本中出现了一个新的控件TokenEditor Control,根据官方的博客和文档来学习一下。

今天我们发布了DotNetBar12.1版本,带来了新的控件——Token Editor control。它是一种能够分析用户输入的文本并转换成明显标记的高级text-box控件。类似于现在邮件客户端中邮件地图文本输入框,但是Token Editor更加灵活 。每个部分文本,在接受之前都要通过验证,所以,它可能拒绝不能通过验证的版本。如下图:

这让我想起了在写博客时的Tag标签,标签常用逗号,分号或空格隔开,有时都不知用哪一个是支持的,其实TokenEditor比较好,分隔比较明显,用回车统一结束,标签中也可以输入分隔号。

此控件内置支持自动完成和自动筛选功能,并将显示和更新用户输入的可用标签列表。

01.Separators

分隔符集合,支持多种分隔符,默认支持英文的分号和逗号,如果我们想以分号作为标签(当然,实际情况中这样无理的要求很少),输入两个分号即可。

02.RemoveTokenButtonVisible

删除标签按键的可见性,默认可见。类似的还有PopupCloseButtonVisible属性。

03.Tokens

Token即标签,TokenEditor不仅可以用户输入,还可以进行选择,选择的Token须在代码中实现:

默认也可以选中一些标签,选中方法如下:

下面是选择时的一些功能测试:

04.ValidateToken事件

ValidateToken事件,用于验证标签,下面是官方的例子,是一个验证邮箱的例子。除了可以输入初始化的标签外,还可以输出符合语法规则的邮箱地址,如gisweis@139.com,但输入gisweis189.com则不行。

这里需要用到的是正则表达式,大学时学过,还是有用,至少看得懂。

IsValid验证标签是否有效。默认值是true。

IsNewToken验证是否为新的标签。

据说,在12.2版本中,它的功能将还会增加。

参考链接:

http://devcomponents.com/blog/?p=1303

http://www.devcomponents.com/kb2/?p=1631

关键属性

BackgroundStyle – 返回定义控件背景样式和边框的对象。

CheckBoxesVisible – indicates whether check-boxes are shown next to the list of tokens when popup is open. This allows you to create multi-selection style combo-box control when combined with DropDownButtonVisible property.

DropDownButtonVisible – indicates whether drop-down button is visible inside of the control which shows the popup when clicked.

DropDownHeight – indicates the height of the auto-complete drop-down.

DropDownWidth – indicates the width of the auto-complete drop-down.

EnablePopupResize – indicates whether auto-complete popup can be resized by end user.

EnterKeyValidatesToken – indicates whether when token text is entered into the text-box pressing the Enter key attempts to validate the token and converts the text to token.

IsPopupOpen – 是否打开自动完成弹出窗口。

MaxHeightLines – indicates maximum number of lines control will grow to when AutoSizeHeight=true. Set to 0 to indicates unlimited growth.

PopupCloseButtonVisible – indicates whether multi-column popup close button is visible.

PreservePopupSize – indicates whether auto-complete popup size is preserved between popup displays if popup is resized by end-user.

ReadOnly – indicates whether tokens can be added or removed by end user. Default value is false.

RemoveTokenButtonVisible – indicates whether remove token button is displayed on individual tokens so they can be removed from the selection.

Separators – collection of separators which are used to divide entered text into the tokens.

Tokens – collection of the tokens available for selection.

ValidateTokenTextOnLostFocus – indicates whether any text entered into the token editor is validated and converted to token when control loses focus.

关键事件

AutoCompletePopupOpened – occurs after the auto-complete popup is opened.

BeforeAutoCompletePopupOpen – occurs before auto-complete popup is opened and allows you to cancel popup opening.

RemovingToken – occurs before token is removed from the SelectedTokens by end user.

SelectedTokensChanged – occurs when SelectedTokens collection changes.

ValidateToken – occurs when an token is selected from the auto-complete list or when text entry by end user is parsed into token to validate it.

DotNetBar12.1新控件——TokenEditor的更多相关文章

  1. 【Android】Anroid5.0+新控件---酷炫标题栏的简单学习

    Android5.0+推出的新控件感觉特别酷,最近想模仿大神做个看图App出来,所以先把这些新控件用熟悉了. 新控件的介绍.使用等等网上相应的文章已经特别多了,题主也没那能力去写篇详解出来,本篇随笔记 ...

  2. Android其它新控件 (转)

    原文出处:http://blog.csdn.net/lavor_zl/article/details/51312715 Android其它新控件是指非Android大版本更新时提出的新控件,也非谷歌I ...

  3. 一个Activity掌握Design新控件 (转)

    原文地址:http://blog.csdn.net/lavor_zl/article/details/51295364 谷歌在推出Android5.0的同时推出了全新的设计Material Desig ...

  4. 一个Activity掌握Android5.0新控件 (转)

    原文地址:http://blog.csdn.net/lavor_zl/article/details/51279386 谷歌在推出Android5.0的同时推出了一些新控件,Android5.0中最常 ...

  5. 一个Activity掌握Android4.0新控件 (转)

    原文地址:http://blog.csdn.net/lavor_zl/article/details/51261380 谷歌在推出Android4.0的同时推出了一些新控件,Android4.0中最常 ...

  6. 【转】Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用

    Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用 分类: Android UI ...

  7. 【转】Android M新控件之FloatingActionButton,TextInputLayout,Snackbar,TabLayout的使用

    Android M新控件之FloatingActionButton,TextInputLayout,Snackbar,TabLayout的使用 分类: Android UI2015-06-15 16: ...

  8. Android5.0新控件CardView的介绍和使用

       CardView也是5.0的新控件,这控件其实就是一个卡片啦,当然我们自己也完全可以定义这样一个卡片,从现在的微博等社App中可以看到各式各样的自定义卡片,所以这个控件意义不是很大.suppor ...

  9. Android5.0新控件

    谷歌在推出Android5.0的同时推出了一些新控件,Android5.0中最常用的新控件有下面5种.  1. CardView(卡片视图) CardView顾名思义是卡片视图,它继承FrameLay ...

随机推荐

  1. 第10天-JavaScript正则表达式

    正则有什么用 给定的字符串是否符合正则表达式的过滤逻辑 通过正则表达式,从字符串中获取我们想要的特定部分 替换字符串满足正则表达式的字符 例如:验证邮箱.手机号.银行卡.采集器(爬虫).中奖信息133 ...

  2. linux——(3)文件与目录管理

    文件与目录管理相关指令 ls [-adlR] 目录 #查看目录与文件的命令. -a #连同隐藏文件一起列出来. -d #只列出目录. -l #列出相关属性和权限等数据. -R #连同子目录内容一起列出 ...

  3. thunk 函数

    function* f() { console.log(1); for (var i = 0; true; i++) { console.log('come in'); var reset = yie ...

  4. 「NOI2017」游戏

    「NOI2017」游戏 题目描述 小 L 计划进行 \(n\) 场游戏,每场游戏使用一张地图,小 L 会选择一辆车在该地图上完成游戏. 小 L 的赛车有三辆,分别用大写字母 \(A\).\(B\).\ ...

  5. ssm整合总结(一)--第一步之使用maven搭建一个web项目

    本文内容来自:山硅谷,本文内容整合了任务2,任务3,任务4内容.http://www.gulixueyuan.com/my/course/50 1说明 1.1该项目使用的知识点有 1.1.1校验方式是 ...

  6. js——引用类型和基本类型

    js中的数据类型有以下几种: 基本类型:Number Boolean  String  undefined null  Symbol 引用类型:Object(Array, Function, Date ...

  7. CentOS 6.9设置阿里云源/163源

    阿里云: 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的CentOS ...

  8. 典型案例收集-使用OpenVPN连通多个机房内网(iptables+静态路由)

    说明: 1.这个方案是我最初实现的方案,目的在于OpenVPN连通后使其能访问各自的子网,实现互通. 2.主要以iptables为主,这个是关键点,并且这种方式配置iptables十分复杂,最后加入了 ...

  9. HDU 4704 Sum (2013多校10,1009题)

    Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Submi ...

  10. 每天进步一点点——关于SSD写入放大问题

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/29812433 1. 关于SSD的写入放大     之前在SSD(Solid State Dr ...