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

DevExpress技術交流群6：600715373      歡迎一起進群討論