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

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

獲取DevExpress 最新版下載

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

在上文中（點擊這里回顧>>)，我們為大家介紹了HTML-CSS標記的動態自定義項目、數據綁定等，本文將繼續為大家介紹如何使用外部控件和就地編輯器、按鈕的使用等，歡迎持續關注這個系列的文章哦~

HTML-CSS標記

外部控件和就地編輯器

<input>標記允許開發者向基于HTML的UI添加就地編輯器或外部控件，標簽支持以下控件：

使用<input>標記作為想要在布局中顯示的外部控件和存儲庫項(就地編輯器)的占位符。

Data Grid Views (, 和 )

使用<input>;標記作為Repository Items(就地編輯器)的占位符，不能使用此標記在數據網格視圖中顯示外部控件。

HTML

<input name="textEditEmail" class="field-input"/>
<input name="repositoryItemPictureEdit1" value="${ImageData}" class="editor"/>

按鈕

按照下面的步驟渲染一個按鈕：

• 定義一個呈現按鈕的HTML元素，指定元素的類(例如，將類名設置為“button”)。
• 在CSS代碼中，定義“button”類來指定元素的顯示屬性。
• 還為按鈕類定義懸停狀態，以便在元素懸停時突出顯示元素。

下面的示例使用<div> 標記來定義一個按鈕：

HTML

<div id="uploadBtn" class="centered button">Upload</div>
<div id="removeBtn" class="centered button">Remove</div>

CSS

.centered{
align-self:center;
}
.button {
width: 70px;
height: 20px;
min-width: 20px;
padding: 8px;
margin-left: 2px;
opacity: 0.5;
}
.button:hover {
border-radius: 4px;
background-color: #F2F2F2;
}

UI元素鼠標操作

開發者可以再控制級、HTML標記級和使用Fluent API時響應HTML UI元素上的鼠標操作。

控件的鼠標事件

支持HTML的控件公開可以處理的事件，以響應HTML UI元素上的鼠標動作，這些事件通常被稱為：

• ElementMouseClick
• ElementMouseDown
• ElementMouseMove
• ElementMouseOut
• ElementMouseOver
• ElementMouseUp

C#

void htmlContentControl1_ElementMouseClick(object sender, DevExpress.Utils.Html.DxHtmlElementMouseEventArgs e) {
if(e.ElementId == "btnSend") {
//...
}
}

VB.NET

Sub HtmlContentControl1_ElementMouseClick(sender As Object, e As DevExpress.Utils.Html.DxHtmlElementMouseEventArgs) Handles HtmlContentControl1.ElementMouseClick
If e.ElementId = "btnSend" Then
'...
End If
End Sub

HTML鼠標事件

HTML標記中支持以下鼠標事件：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove和onmouseout，開發者可以通過以下方式訂閱這些事件：

• 用下面的簽名在代碼后面定義一個方法：

C#

void <MethodName>(object sender, DxHtmlElementMouseEventArgs args)

VB.NET

Sub <MethodName>(ByVal sender As Object, ByVal args As DxHtmlElementMouseEventArgs)

• 在HTML代碼中，將元素的事件設置為已定義方法的名稱。

HTML

<img onclick="<MethodName>" ... />

示例:

C#

void OnPhoneClick(object sender, DxHtmlElementMouseEventArgs args) {
XtraMessageBox.Show("Phone!");
}

VB.NET

Sub OnPhoneClick(ByVal sender As Object, ByVal args As DxHtmlElementMouseEventArgs)
XtraMessageBox.Show("Phone!")
End Sub

HTML

<div class='buttonPanel'>
<img onclick="OnPhoneClick" src="PhoneCall" class="button" />
</div>

Fluent API

開發者可以使用Fluent API訂閱元素的鼠標單擊事件。

C#

var fluent = context.OfType<ViewModel>();
fluent.BindCommandToElement(htmlContentControl, "btnPhone", x => x.Phone);
//...
public class ViewModel {
public void Phone() {
//...
}
//...
}

VB.NET

Dim fluent = context.OfType(Of ViewModel)()
fluent.BindCommandToElement(htmlContentControl, "btnPhone", Sub(x) x.Phone())
'...
Public Class ViewModel
Public Sub Phone()
'...
End Sub
End Class
'...

HTML

<img id="btnPhone" src="PhoneCall" class="button" />

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