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

DevExpress WinForm 已正式發布了重大版本v22.2，此版本全面升級了對HTML & CSS的支持、增強了儀表板功能等，歡迎下載最新版控件體驗！

DevExpress技術交流群7：674691612      歡迎一起進群討論

儀表板

支持DirectX

DevExpress WinForms Gauges（儀表板）控件現在在放置DirectX表單中時使用DirectX引擎渲染。

支持HTML & CSS

消息框和對話框的HTML & CSS模板

WinForms消息框和對話框組件現在支持HTML和CSS模板。

用于工具提示的HTML & CSS模板

新版本的WinForms ToolTips現在支持HTML & CSS模板。

Accordion - 支持HTML & CSS模板

WinForms Accordion控件現在支持業界首創的WinForms HTML & CSS模板引擎，HTML & CSS模板允許開發者在最短的時間內創建完全自定義的用戶界面，新的API幾乎可以為每個Accordion UI元素生成模板。

技術團隊創建了一個新的演示，展示如何將WinForms Accordion控件轉換為漂亮的Hamburger菜單。

HTML選擇

用戶現在可以選擇HTML模板顯示的文本，HTML選擇在HTML內容控件和WinForms Data Grid（數據網格）的ItemsView、TileView和WinExplorerView中提供，使用屬性來啟用這個功能。

新版本添加了一個新的SelectedText屬性來存儲選定區域的文本內容(包括文本、按鈕說明、圖像和其他HTML元素)。

SelectedTextChanged事件在選擇發生變化時發生，并允許開發者根據需要查看和更改所選文本。

自定義繪制HTML

開發者現在可以在Custom Draw事件處理程序中繪制HTML模板，事件參數包括e.DrawHtml方法，大多數DevExpress WinForm UI控件都引入了這種增強。

HTML

<div class="container">
<div class="cpu-name">${ProcName}</div>
<div>
<div class="label">${ProcBaseFrequency}</div>
<div class="label">${RamMemorySize}</div>
<div class="label">${VidTrademark} {VidMemorySize}</div>
</div>
<div class="price">${ModelPrice}</div>
<div id="btn-add" class="btn-add" dx-class="{Added:added}">${AddButtonCaption}</div>
</div>

CSS

.container {
text-align:center;
padding-top:18px;
}
.cpu-name {
font-size:14px;
font-weight:bold;
}
.label {
display:inline-block;
background-color:@DisabledText/0.3;
padding:4px;
border-radius:4px;
}
.price {
margin-top:6px;
margin-bottom:6px;
font-size:18px;
}
.btn-add {
display:inline-block;
background-color:@HighlightAlternate;
color:@White;
padding:8px;
border-radius:18px;
font-weight:bold;
cursor:pointer;
}
.added{
background-color:@Green;
}

C#

void OnCustomDrawRecordHeader(object sender, Events.CustomDrawRecordHeaderEventArgs e) {
// ...
e.DrawHtml(headerTemplate, htmlCtx, (args) => {
args.InteractivityKey = dataSourceRowIndex;
bool isAddedToCart = orders.Contains(dataSourceRowIndex);
args.SetFieldValue("Added", isAddedToCart);
args.SetFieldValue("AddButtonCaption", isAddedToCart ? "ADDED TO CART" : "ADD TO CART");
});
}

可視化數據收集

新的<dx-collection>標記為集合中的每個元素呈現一個模板。

HTML

<template id="member-template">
<div class="initials">${Initials}</div>
</template>
...
<dx-collection class="members" Items="${Members}" ItemTemplate="member-template"></dx-collection>

Html模板集合

技術團隊創建了一個新的 組件——一個外部模板存儲，添加到此集合的HTML和CSS模板可以被不同的UI控件使用。

CSS樣式選擇器

開發者現在可以有條件地直接在HTML標記中應用樣式，使用HTML標記比在后面的代碼中處理事件更容易、更快。

使用新的dx-class屬性來指定CSS選擇條件。

新版本支持以下語法選項：

HTML

<!-- Boolean data field -->
<div dx-class="{IsUrgent: urgent, normal}">
<!-- Applies the 'active' class if the IsActive property is set to true. -->
<img dx-class="{IsActive: active}" />

<!-- Hides the element if the IsVisible property is set to true. -->
<img dx-class="{IsVisible: , hidden}" />
</div>

<!--
Enumeration data field.
The 'red' class corresponds to the first element.
The 'green' class corresponds to the second element, and so on.
-->
<div dx-class="{Color: red, green, blue}">
...
</div>

<!--
Enumeration data field.
Class names should exactly match enumeration values.
-->
<div dx-class="{State}">
...
</div>

<!-- A string data field that matches the class name -->
<div dx-class="{ClassName}">
...
</div>

您可以在一個條件中應用多個類，當然也可以同時使用靜態類和多條件類。

HTML

<div class="task" dx-class="{IsUrgent: urgent highlight, normal}">
...
</div>

著色SVG - 'Fill' CSS屬性支持

<img>標記現在支持填充屬性，使用此屬性可為SVG圖像設置顏色，此設置覆蓋了表示屬性<path fill="#fff"…/>和內聯樣式(例如，<path style="fill: #fff;".．.= " " / >)。

CSS

img {
fill: Gray;
}
img:hover {
fill: Green;
}
img:active {
fill: LightGreen;
}

HTML

<img src="my-svg-image" />