code学习

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

作者:慧都科技

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

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

DevExpress WinForms Subscription官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网

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

在上文中(点击这里回顾:用DevExpress实现基于HTML&CSS的桌面应用程序的UI(一)),我们为大家介绍了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>           

继续阅读