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

2022-11-24 0 590

DevExpress WinForm保有180+模块和UI库,能为Windows Forms网络平台建立具有声望的销售业务软件系统。DevExpress WinForm能随心所欲构筑简洁、耐用且更易采用的应用程序,不论是Office艺术风格的介面,还是分析处置批量的销售业务统计数据,它都能随心所欲独当一面!

特别注意:目前如前所述HTML & CSS的命令行正在积极主动研制中,能作为技术自动更新提供,如果须要采用请浏览正式版模块新体验哦~

DevExpress WinForms Subscription非官方正式版完全免费浏览试玩,历史版浏览,新浪网文件文件格式和Olonzac浏览-慧都网

几组命令行和模块容许开发者构筑HTML文件格式的UI,并采用CSS式样自订UI原素的外形增设、大小不一、充填和产业布局快捷键,无须须要处置自订绘出该事件或更动大批特性来修正命令行以相匹配UI规范化,能采用HTML和CSS记号的科学知识为图形介面插件构筑产业布局。

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

主要机能包括:

在HTML记号中选定数据存取函数,以表明源自下层管理工具的值。采用CSS建立积极主动响应式UI——当使用者滑鼠操作符滑翔在或空格键某一原素上后加进效用。向UI加进内部命令行(比如,类型信息)。处置命令行该事件来积极主动响应UI原素滑鼠姿势。投入使用DirectXAGP来获得更快的操控性。

HTML-CSS记号

全力支持HTML和CSS的命令行和模块从模版呈现出它的UI,命令行模版的HTML记号选定命令行的文本(UI原素),而模版的CSS标识符选定应用于UI原素的式样、表明和产业布局增设。

采用命令行的HtmlTemplate特性来选定模版,在设计时,开发者能在HTML Template Editor(HTML模版编辑器)中建立模版。

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

该编辑器全力支持语法高亮表明、智能感知(一种标识符完成辅助工具)和自动更新面板,自动更新面板容许开发者检查可视原素——将滑鼠滑翔在原素上后定位的HTML记号。

示例

下面的示例演示了一个HtmlContentControl从选定的HTML-CSS模版呈现一个UI,该命令行被存取到Employee对象的列表。模版的HTML标识符包含统计数据存取函数,用于表明源自管理工具的值。

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

C#

public class Employee { public stringDisplayName {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 =newList<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; }

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务