界面控件DevExpress WinForm——如何实现基于HTML&CSS的桌面UI（二）

DevExpress WinForm拥有180+组件和UI库，能为Windows Forms平台创建具有影响力的业务解决方案。

一组控件和组件允许开发人员构建HTML格式的UI，并使用CSS样式自定义UI元素的外观设置、大小、填充和布局选项，不再需要处理自定义绘制事件或更改大量属性来修改控件以匹配UI规范，可以使用HTML和CSS标记的知识为桌面应用程序构建布局。

HTML-CSS标记

动态指定HTML-CSS模板

许多控件使用HTML-CSS模板来呈现它们的项，例如ItemsView从ItemsView.HtmlTemplate 属性指定的默认模板中生成它的所有项(记录)。

这些控件具有将模板分配给项的事件，从而动态覆盖默认模板：

• ItemsView.QueryItemTemplate
• WinExplorerView.QueryItemTemplate
• GanttControl.QueryItemTemplate
• TileView.CustomItemTemplate

示例

下面的ItemsView.QueryItemTemplate事件处理程序根据项的类型(IsOwnMessage设置)为不同的项分配不同的模板。

C#

void OnQueryItemTemplate(object sender, QueryItemTemplateEventArgs e) {var message = e.Row as DevAV.Chat.Model.Message;if(message == null)return;if(message.IsOwnMessage)Styles.MyMessage.Apply(e.Template);elseStyles.Message.Apply(e.Template);//...}

VB.NET

Private Sub OnQueryItemTemplate(ByVal sender As Object, ByVal e As QueryItemTemplateEventArgs)Dim message = TryCast(e.Row, DevAV.Chat.Model.Message)If message Is Nothing Then ReturnIf message.IsOwnMessage ThenStyles.MyMessage.Apply(e.Template)ElseStyles.Message.Apply(e.Template)End If'...End Sub

动态自定义项目

从模板生成项的控件也有事件来动态自定义每个项：

• ItemsView.CustomizeItem
• WinExplorerView.CustomizeItem
• GanttControl.CustomizeItem
• TileView.ItemCustomize

在控件中的每个项显示在屏幕上之前触发这些事件，它们允许开发人员访问将要呈现的单个HTML元素，并自定义它们的可见性和样式设置。

示例

下面的示例根据自定义逻辑更改HTML元素的可见性。

开发人员可以在下面的演示中找到这个示例的完整代码：Chat Client。

C#

//CustomizeItem event handler:void OnCustomizeItem(object sender, CustomizeItemArgs e) {//...if(message.IsLiked) {var btnLike = e.Element.FindElementById("btnLike");var btnMore = e.Element.FindElementById("btnMore");if(btnLike != null && btnMore != null) {btnLike.Hidden = false;btnMore.Hidden = true;}}if(message.IsFirstMessageOfBlock)return;if(!message.IsOwnMessage) {var avatar = e.Element.FindElementById("avatar");if(avatar != null)//Display an empty region instead of the 'avatar' element.avatar.Style.SetVisibility(Utils.Html.Internal.CssVisibility.Hidden);}//...}

VB.NET

Private Sub OnCustomizeItem(ByVal sender As Object, ByVal e As CustomizeItemArgs)Dim message = TryCast(e.Row, DevAV.Chat.Model.Message)If message Is Nothing Then ReturnIf message.IsLiked ThenDim btnLike = e.Element.FindElementById("btnLike")Dim btnMore = e.Element.FindElementById("btnMore")If btnLike IsNot Nothing AndAlso btnMore IsNot Nothing ThenbtnLike.Hidden = FalsebtnMore.Hidden = TrueEnd IfEnd IfIf message.IsFirstMessageOfBlock Then ReturnIf Not message.IsOwnMessage ThenDim avatar = e.Element.FindElementById("avatar")'Display an empty region instead of the 'avatar' element.If avatar IsNot Nothing Then avatar.Style.SetVisibility(Utils.Html.Internal.CssVisibility.Hidden)End If'...End Sub

数据绑定

如果控件绑定到数据源，可以在HTML标记中使用以下语法来显示数据源字段的值：

${FieldName}

‘ $ ‘字符指定后面的文本是控件需要求值的表达式，表达式可以包含静态文本和绑定到多个字段的数据：

• $text{FieldName}text
• ${FieldName1}text{FieldName2}text

例如，下面的HTML代码显示了来自控件数据源的“UserName”字段的值：

HTML

<div class='contactName'>${UserName}</div>

下面的示例在用户名之前添加’ Welcome ‘字符串：

HTML

<h1>$Welcome {UserName}!</h1>

DevExpress技术交流群6：600715373      欢迎一起进群讨论