界面控件DevExpress WinForm——如何实现基于HTML&CSS的桌面UI（三）

DevExpress WinForm拥有180+组件和UI库，能为Windows Forms平台创建具有影响力的业务解决方案。

一组控件和组件允许开发人员构建HTML格式的UI，并使用CSS样式自定义UI元素的外观设置、大小、填充和布局选项，不再需要处理自定义绘制事件或更改大量属性来修改控件以匹配UI规范，可以使用HTML和CSS标记的知识为桌面应用程序构建布局。

HTML-CSS标记

HtmlContentControl

Data Grid Views (ItemsView, TileView和 WinExplorerView)

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.ElementMouseClickIf e.ElementId = "btnSend" Then'...End IfEnd 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 ViewModelPublic Sub Phone()'...End SubEnd Class'...

HTML

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

DevExpress技术交流群6：600715373      欢迎一起进群讨论