DevExpress WinForm擁有180+組件和UI庫，能為Windows Forms平臺創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForm能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！

注意：目前基于HTML & CSS的控件正在積極研發(fā)中，可以作為技術(shù)預(yù)覽提供，如果需要使用請下載最新版組件體驗(yàn)哦~

獲取DevExpress 最新版下載

一組控件和組件允許開發(fā)人員構(gòu)建HTML格式的UI，并使用CSS樣式自定義UI元素的外觀設(shè)置、大小、填充和布局選項(xiàng)，不再需要處理自定義繪制事件或更改大量屬性來修改控件以匹配UI規(guī)范，可以使用HTML和CSS標(biāo)記的知識為桌面應(yīng)用程序構(gòu)建布局。

主要功能包括：

• 在HTML標(biāo)記中指定數(shù)據(jù)綁定表達(dá)式，以顯示來自底層數(shù)據(jù)源的值。
• 使用CSS創(chuàng)建響應(yīng)式UI——當(dāng)用戶鼠標(biāo)指針懸停在或單擊特定元素上時添加效果。
• 向UI添加外部控件(例如，文本框)。
• 處理控件事件來響應(yīng)UI元素鼠標(biāo)動作。
• 啟用DirectX硬件加速來獲得更好的性能。

HTML-CSS標(biāo)記

支持HTML和CSS的控件和組件從模板呈現(xiàn)它們的UI，控件模板的HTML標(biāo)記指定控件的內(nèi)容(UI元素)，而模板的CSS代碼指定應(yīng)用于UI元素的樣式、顯示和布局設(shè)置。

使用控件的HtmlTemplate屬性來指定模板，在設(shè)計(jì)時，開發(fā)人員可以在HTML Template Editor（HTML模板編輯器）中創(chuàng)建模板。

該編輯器支持語法高亮顯示、智能感知(一種代碼完成輔助工具)和預(yù)覽面板，預(yù)覽面板允許開發(fā)人員檢查可視元素——將鼠標(biāo)懸停在元素上時定位的HTML標(biāo)記。

示例

下面的示例演示了一個HtmlContentControl從指定的HTML-CSS模板呈現(xiàn)一個UI，該控件被綁定到Employee對象的列表。模板的HTML代碼包含數(shù)據(jù)綁定表達(dá)式，用于顯示來自數(shù)據(jù)源的值。

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;
}

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論