当前位置: 首页 > news >正文

用DevExpress实现基于HTMLCSS的桌面应用程序的UI(一)

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

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

获取DevExpress 最新版下载

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

主要功能包括:

  • 在HTML标记中指定数据绑定表达式,以显示来自底层数据源的值。
  • 使用CSS创建响应式UI——当用户鼠标指针悬停在或单击特定元素上时添加效果。
  • 向UI添加外部控件(例如,文本框)。
  • 处理控件事件来响应UI元素鼠标动作。
  • 启用DirectX硬件加速来获得更好的性能。

HTML-CSS标记

支持HTML和CSS的控件和组件从模板呈现它们的UI,控件模板的HTML标记指定控件的内容(UI元素),而模板的CSS代码指定应用于UI元素的样式、显示和布局设置。

使用控件的HtmlTemplate属性来指定模板,在设计时,开发人员可以在HTML Template Editor(HTML模板编辑器)中创建模板。

该编辑器支持语法高亮显示、智能感知(一种代码完成辅助工具)和预览面板,预览面板允许开发人员检查可视元素——将鼠标悬停在元素上时定位的HTML标记。

示例

下面的示例演示了一个HtmlContentControl从指定的HTML-CSS模板呈现一个UI,该控件被绑定到Employee对象的列表。模板的HTML代码包含数据绑定表达式,用于显示来自数据源的值。

C#

public class Employee {
public string DisplayName { get; set; }
public string FullName { get; set; }
public SvgImage Photo { get; set; }
}
//...
Employee emp = new Employee();
emp.DisplayName = "Leah Test Coordinator";
emp.FullName = "Leah Simpson";
SvgImageCollection imageCollection = new SvgImageCollection();
imageCollection.Add("photo", "image://svgimages/icon builder/business_businesswoman.svg");
emp.Photo = imageCollection["photo"];
List<Employee> list = new List<Employee>();
list.Add(emp);
htmlContentControl1.DataContext = list;
//...
void OnButtonClick(object sender, DxHtmlElementMouseEventArgs args) {
if(args.ElementId == "uploadBtn") {
//...
}
if (args.ElementId == "removeBtn") {
//...
}
XtraMessageBox.Show("Button " + args.ElementId + " clicked");
}

VB.NET

Public Class Employee
Public Property DisplayName() As String
Public Property FullName() As String
Public Property Photo() As SvgImage
End Class
'...
Dim emp As Employee = New Employee()
emp.DisplayName = "Leah Test Coordinator"
emp.FullName = "Leah Simpson"
Dim imageCollection As SvgImageCollection = New SvgImageCollection()
imageCollection.Add("photo", "image://svgimages/icon builder/business_businesswoman.svg")
emp.Photo = imageCollection("photo")
Dim list As New List(Of Employee)()
list.Add(emp)
htmlContentControl1.DataContext = list
'...
Private Sub OnButtonClick(ByVal sender As Object, ByVal args As DxHtmlElementMouseEventArgs)
If args.ElementId = "uploadBtn" Then
'...
End If
If args.ElementId = "removeBtn" Then
'...
End If
XtraMessageBox.Show("Button " & args.ElementId & " clicked")
End Sub

HTML

<div class="container" id="container">
<div class="avatarContainer">
<img src="${Photo}" class="avatar">
<div id="uploadBtn" onclick="OnButtonClick" class="centered button">Upload</div>
<div id="removeBtn" onclick="OnButtonClick" class="centered button">Remove</div>
</div>
<div class="separator"></div>
<div class="avatarContainer ">
<div class="field-container">
<div class="field-header">
<b>Display name</b><b class="hint">Visible to other members</b>
</div>
<p>${DisplayName}</p>
</div>
<div class="field-container with-left-margin">
<div class="field-header">
<b>Full name</b><b class="hint">Not visible to other members</b>
</div>
<p>${FullName}</p>
</div>
</div>
</div>

CSS

.container{
background-color:@Window;
display:flex;
flex-direction: column;
justify-content: space-between;
border-radius: 20px;
padding: 0px 30px 16px 30px;
border-style:solid;
border-width:1px;
border-color:@HideSelection;
color: @ControlText;
}
.avatarContainer{
display: flex;
margin-top:16px;
margin-bottom:16px;
}
.avatar{
width: 100px;
height: 100px;
border-radius:100px;
border-style: solid;
border-width: 1px;
border-color: @HideSelection;
}
.field-container{
display:flex;
flex-direction:column;
justify-content: space-between;
flex-grow:1;
flex-basis: 150px;
padding-left:10px;
padding-right:10px;
}
.with-left-margin{
margin-left:10px;
}
.field-header{
display:flex;
justify-content: space-between;
}
.button{
display: inline-block;
padding: 10px;
margin-left: 10px;
color: gray;
background-color: @Window;
border-width: 1px;
border-style: solid;
border-color: @HideSelection;
border-radius: 5px;
text-align: center;
align-self:center;
width: 70px;
}
.hint{
color: @DisabledText;
font-size:7.5pt;
}
.button:hover {
background-color: @DisabledText;
color: @White;
border-color: @DisabledControl;
}
.separator{
width:100%;
height:1px;
background-color:@HideSelection;
}

相关文章:

  • Android OpenGL ES 3.0 PBO像素缓冲区对象
  • 腾讯T4级架构师用21个项目带你吃透379页深度学习TensorFlow实践pdf
  • Eureka服务注册发现原理
  • RK3399平台开发系列讲解(中断篇)中断控制器驱动初始化
  • 【Redis】Redis的持久化
  • LibreOJ_10010
  • 数据增强
  • 一文搞懂堆外内存(模拟内存泄漏)
  • 还在调API写所谓的AI“女友”,唠了唠了,教你基于python咱们“new”一个(深度学习)
  • Win7纯净版系统镜像64位介绍
  • Kali系统MSF模块暴力破解MySQL弱口令漏洞
  • [附源码]java毕业设计疫情环境下的酒店管理系统
  • kafka配置外网访问
  • java每一练(3)
  • Java学习----前端4
  • ABAP中 delete 语句的使用
  • cesium火箭发射,模型控制,模型动画,模型移动
  • http请求走私漏洞原理,利用,检测,防护
  • Docker学习(3)—— 将容器转化为新的镜像,并将新镜像发布到阿里云公共仓库或私有仓库
  • cpu天梯图2022年11月 cpu排行榜天梯图2022
  • Springboot魅力乡村管理系统srb4s计算机毕业设计-课程设计-期末作业-毕设程序代做
  • 【星球】【slam】 研讨会(5)VINS:Mono+Fusion 重点提炼
  • 机器学习笔记之受限玻尔兹曼机(三)推断任务
  • 【Linux网络编程】服务端编程初体验
  • 《人类简史》笔记四—— 想象构建的秩序
  • TIDB在centos7.9上通过docker-compose进行安装、备份
  • 锅炉烟气脱硫除尘器_燃煤锅炉
  • 卧式燃油锅炉_燃油锅炉 燃煤锅炉
  • 四川乐山乐锅锅炉有限公司_先锋锅炉制造有限公司招聘