用DevExpress实现基于HTML&CSS的桌面应用程序的UI（二）

DevExpress WinForm拥有180+组件和UI库，能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForm能完美构建流畅、美观且易于使用的应用程序，无论是Office风格的界面，还是分析处理大批量的业务数据，它都能轻松胜任！

注意：目前基于HTML & CSS的控件正在积极研发中，可以作为技术预览提供，如果需要使用请下载最新版组件体验哦~

获取DevExpress 最新版下载(q技术交流：600715373)

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

在上文中（点击这里回顾>>)，我们为大家介绍了HTML-CSS标记的一些基础概念，本文将继续为大家介绍如何动态指定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);
else
Styles.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 Return
If message.IsOwnMessage Then
Styles.MyMessage.Apply(e.Template)
Else
Styles.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 Return
If message.IsLiked Then
Dim btnLike = e.Element.FindElementById("btnLike")
Dim btnMore = e.Element.FindElementById("btnMore")
If btnLike IsNot Nothing AndAlso btnMore IsNot Nothing Then
btnLike.Hidden = False
btnMore.Hidden = True
End If
End If

If message.IsFirstMessageOfBlock Then Return
If Not message.IsOwnMessage Then
Dim 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>