DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:023-68661681

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

来源:   发布时间:2022-11-30   浏览:739次

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

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

获取DevExpress 最新版下载

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

在上文中(点击这里回顾>>),我们为大家介绍了HTML-CSS标记的一些基础概念,本文将继续为大家介绍如何动态指定HTML-CSS模板、动态自定义项目等,欢迎持续关注这个系列的文章哦~

HTML-CSS标记
动态指定HTML-CSS模板

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

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

示例

下面的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
动态自定义项目

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

在控件中的每个项显示在屏幕上之前触发这些事件,它们允许开发人员访问将要呈现的单个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>

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

更多DevExpress线上公开课、中文教程资讯请上中文网获取

慧都2022年终促销火热开启,欢迎选购
本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/3447.html

相关产品: DevExpress Universal Subscription,

在线
客服
微信
QQ 电话
023-68661681
返回
顶部