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

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

獲取DevExpress 最新版下載

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

在上文中（點(diǎn)擊這里回顧>>)，我們?yōu)榇蠹医榻B了HTML-CSS標(biāo)記的動(dòng)態(tài)自定義項(xiàng)目、數(shù)據(jù)綁定等，本文將繼續(xù)為大家介紹如何使用外部控件和就地編輯器、按鈕的使用等，歡迎持續(xù)關(guān)注這個(gè)系列的文章哦~

HTML-CSS標(biāo)記

外部控件和就地編輯器

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

使用<input>標(biāo)記作為想要在布局中顯示的外部控件和存儲(chǔ)庫(kù)項(xiàng)(就地編輯器)的占位符。

Data Grid Views (, 和 )

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

HTML

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

按鈕

按照下面的步驟渲染一個(gè)按鈕：

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

下面的示例使用<div> 標(biāo)記來(lái)定義一個(gè)按鈕：

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元素鼠標(biāo)操作

開(kāi)發(fā)者可以再控制級(jí)、HTML標(biāo)記級(jí)和使用Fluent API時(shí)響應(yīng)HTML UI元素上的鼠標(biāo)操作。

控件的鼠標(biāo)事件

支持HTML的控件公開(kāi)可以處理的事件，以響應(yīng)HTML UI元素上的鼠標(biāo)動(dòng)作，這些事件通常被稱(chēng)為：

• 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鼠標(biāo)事件

HTML標(biāo)記中支持以下鼠標(biāo)事件：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove和onmouseout，開(kāi)發(fā)者可以通過(guò)以下方式訂閱這些事件：

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

C#

void <MethodName>(object sender, DxHtmlElementMouseEventArgs args)

VB.NET

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

• 在HTML代碼中，將元素的事件設(shè)置為已定義方法的名稱(chēng)。

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

開(kāi)發(fā)者可以使用Fluent API訂閱元素的鼠標(biāo)單擊事件。

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技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論