在本文中，我們將詳細介紹HTML & CSS模板引擎即將發生的新變化——官方技術團隊期望在v22.2發布周期中實現的新功能。

DevExpress WinForms v22.1正式版下載

CSS樣式選擇器

使用 v22.2，您將能夠為同一元素指定多種樣式，并根據給定屬性的值選擇活動樣式。例如，以下標記復制自"HTML Demo | WinExplorer View模塊。在此標記中，外部 <div> 元素用作多個數據綁定元素的容器，并使用靜態 item_info-outer 樣式設置樣式。

<div class="item_info_outer">
<div class="name">${TrademarkName} {Name}</div>
<!--Other data-bound elements-->
</div>

.item_info_outer { background-color: @HighlightAlternate/0.2; ... }

在v22.2中，您將能夠使用dx-class屬性來指定CSS選擇條件。 在下面的示例中，外部容器根據Modification字段值選擇一個CSS類，因此對于“SUV”、“Truck”、“Car”和其他值，整個項目塊將呈現不同的方式。

<div dx-class="{Modification}">
<div class="name">${TrademarkName} {Name}</div>
<!--Other data-bound elements-->
</div>

.SUV { background-color: @Red/0.2; ... }
.Car { background-color: @Blue/0.2; ... }
.Truck { background-color: @Green/0.2; ... }

對于此示例，您將需要名稱與"Modification" 枚舉的值匹配CSS類，如果選擇器屬性是不同的類型，則 dx-class 屬性語法可能不同。 例如，下面的代碼說明了如何根據布爾屬性值選擇樣式。

<div dx-class="{InStock: item-instock, item-outofstock}">${InStock}</div>

.item-instock { color: @ControlText; }
.item-outofstock { color: @DisabledText; }

您將能夠同時使用 class 和 dx-class 屬性，標準類指定默認項目樣式，如果滿足 dx-class 條件，則應用上面的條件樣式。

可重用的自定義元素

在 v22.2 中，您將能夠創建封裝特定功能的自定義 HTML 標簽，并將這些標簽作為子元素包含在模板中。

這種機制還將允許DevExpress發布自定義標簽，具體來說，可用于可視化數據集合的標簽，例如分配給網格卡的員工集合。

<div class="card">
<div class="title">{Title}</div>
<!--other child elements-->
<avatars-box
Items="${Owners}"
ImageMember="Avatar"
Initials="FullName">
</avatars-box>
</div>

由于沒有開箱即用的 HTML 元素來呈現此類子集合，因此您需要處理控件的 CustomizeHtmlTemplate 事件并即時修補模板 - 根據數量添加或刪除 <div> 元素 的集合項目。這種方法遠非受本地 Web 啟發的設計，一旦您擁有 WebComponents 就可以解決。

元素對齊

官方技術團隊期望支持position 和 top/bottom/left/right 屬性，您可以使用這些屬性的組合在其父元素內對齊元素，并設置與所需邊框的偏移量。

position: absolute;
bottom: 0;
right: 0;

文本選擇

下一個主要更新將附帶一個高度要求的與模板相關的功能，從 HTML 模板中選擇和復制文本的功能。

DevExpress WinForm | 下載試用

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

更多產品正版授權詳情及優惠，歡迎咨詢

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