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

DevExpress WinForm拥有180组件和UI库能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForm能完美构建流畅、美观且易于使用的应用程序无论是Office风格的界面还是分析处理大批量的业务数据它都能轻松胜任DevExpress新旧版本帮助文档下载可进QQ qun获取169725316注意目前基于HTML CSS的控件正在积极研发中可以作为技术预览提供。一组控件和组件允许开发人员构建HTML格式的UI并使用CSS样式自定义UI元素的外观设置、大小、填充和布局选项不再需要处理自定义绘制事件或更改大量属性来修改控件以匹配UI规范可以使用HTML和CSS标记的知识为桌面应用程序构建布局。在上文中我们为大家介绍了HTML-CSS标记的一些基础概念本文将继续为大家介绍如何动态指定HTML-CSS模板、动态自定义项目等欢迎持续关注这个系列的文章哦~HTML-CSS标记动态指定HTML-CSS模板许多控件使用HTML-CSS模板来呈现它们的项例如ItemsView从ItemsView.HtmlTemplate 属性指定的默认模板中生成它的所有项(记录)。这些控件具有将模板分配给项的事件从而动态覆盖默认模板ItemsView.QueryItemTemplateWinExplorerView.QueryItemTemplateGanttControl.QueryItemTemplateTileView.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.NETPrivate 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.CustomizeItemWinExplorerView.CustomizeItemGanttControl.CustomizeItemTileView.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.NETPrivate 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”字段的值HTMLdiv classcontactName${UserName}/div下面的示例在用户名之前添加 Welcome 字符串HTMLh1$Welcome {UserName}!/h1