DevExpress WinForms擁有180+組件和UI庫,能爲Windows Forms平臺創建具有影響力的業務解決方案。DevExpress WinForms能完美構建流暢、美觀且易於使用的應用程序,無論是Office風格的界面,還是分析處理大批量的業務數據,它都能輕鬆勝任!
在這篇文章中,我們將概述使用DevExpress WinForms HTML/CSS引擎/模板時重要的注意事項。如果您是DevExpress的新手或正在考慮使用我們的WinForms UI庫來開發即將到來的項目,並且尚未了解DevExpress WinForms HTML/CSS功能的潛力,請先花點時間查看以下在線內容:HTML & CSS Markup for WinForms UI | DevExpress
在上文中(點擊這裏回顧>>)我們主要爲大家介紹瞭如何使用HTML/CSS,本文將繼續介紹使用HTML/CSS的一些場景,請繼續關注我們哦~
高級場景
以下使用場景需要具備DevExpress WinForms UI控件和HTML/CSS的高級知識。
創建複雜的數據輸入表單(高級)
HTML/CSS模板允許您創建完全自定義的數據表單,如果DevExpress WinForms LayoutControl不能達到您的預期效果,那麼我們建議使用HTML/CSS模板。使用HTML/CSS從頭開始構建佈局可能很耗時,特別是對於具有多個字段的複雜表單。DevExpress的LayoutControl在構建時考慮了可訪問性,這包括適當的標籤、鍵盤導航支持以及與屏幕閱讀器的兼容性等特性。
使用CustomDraw顯示交互式元素~(高級)
並非所有的DevExpress WinForms UI控件都支持鼠標事件(出於性能原因),這個限制並不妨礙交互UI元素在DevExpress控件中顯示。儘管如此,它確實需要編寫更復雜的代碼:
DxHtmlPainterContext ctx = new DxHtmlPainterContext(); HtmlTemplate htmlTemplate = new HtmlTemplate( Loader.Load("ListBoxEmptyForeground.html"), Loader.Load("ListBoxEmptyForeground.css")); listControl.CustomDrawEmptyForeground += (s, e) => { e.DrawHtml(htmlTemplate, ctx); }; // Handles UI feedback (hover/cursor). listControl.MouseMove += (s, e) => { if(listControl.ItemCount == 0) { ctx.OnMouseMove(e); listControl.Cursor = ctx.GetCursor(e.Location); listControl.Invalidate(); } else listControl.Cursor = Cursors.Default; }; // Handles Click within the btnAdd element. var items = Enumerable.Range(1, 10) .Select(n => string.Format("Item #{0:d2}", n)) .ToArray(); listControl.MouseDown += (s, e) => { if(listControl.ItemCount == 0 && e.Button == MouseButtons.Left) { var clickInfo = ctx.CalcHitInfo(e.Location); if(clickInfo != null && clickInfo.HasId("btnAdd")) listControl.Items.AddRange(items); } };
使用CustomDraw顯示UI元素並綁定關聯狀態到數據~(高級)
與靜態模板不同,數據感知模板呈現需要編寫更多代碼(特別是需要從不同的源檢索數據時)。下面的示例在Grid單元格中繪製銷售徽章,折扣大小是從不同的數據源獲得的。
using DevExpress.XtraEditors; using DevExpress.XtraGrid.Views.Grid; using DevExpress.XtraGrid.Views.Base; using System.Collections.Generic; namespace DXApplication { public partial class Form1 : XtraForm { Dictionary<string, double> discounts = new Dictionary<string, double>() { { "A", 0.3 }, { "B", 0.45 }, { "C", 0.2 } }; public Form1() { InitializeComponent(); gridControl1.DataSource = new List<Product>() { new Product(){ Category = "A", Name = "AA", Price = 159.99}, new Product(){ Category = "A", Name = "AB", Price = 159.99}, new Product(){ Category = "B", Name = "BA", Price = 49.99}, new Product(){ Category = "B", Name = "BB", Price = 89.99}, new Product(){ Category = "C", Name = "CA", Price = 799.99}, }; gridView1.CustomDrawCell += GridView1_CustomDrawCell; } void GridView1_CustomDrawCell(object sender, RowCellCustomDrawEventArgs e) { e.DefaultDraw(); e.Handled = true; GridView view = sender as GridView; string category = view.GetRowCellValue(e.RowHandle, view.Columns["Category"]) as string; if (e.Column.FieldName == "Price" && discounts.ContainsKey(category)){ e.DrawHtml(htmlTemplateSaleBadge, args => { args.SetFieldValue("Discount", discounts[category].ToString("p0")); }); } } } public class Product { public string Name { get; set; } public string Category { get; set; } public double Price { get; set; } } }
使用HTML/CSS創建完全自定義UI控件(高級)
DevExpress WinForms HtmlContentControl是使用HTML-CSS標記構建WinForms UI的“表面”,WinForms HtmlContentPopup是它的彈出菜單版本。這些組件從HTML/CSS代碼生成一個WinForms界面,並允許您設計定製的WinForms UI控件。使用DevExpress組件和HTML/CSS創建自定義UI控件是一項高級技術,需要深入瞭解UI開發的兩種技術/細微差別。
可視化集合(高級)
數據源可能包括存儲項目集合的數據字段:列表、數組、數據集等。<dx-collection>標籤是一個唯一的DevExpress元素,它允許您爲需要可視化的項指定集合屬性(以及必須應用於這些項的模板)。使用自定義標記(如<dx-collection>)會對HTML模板施加特定的要求,以實現適當的功能。
使用DevExpress WinForms HTML & CSS引擎時不要做的事
- 不要創建複雜的嵌套flex佈局
(例如,3個或更多嵌套的flex面板) - 不要創建CSS動畫
- 在處理UI控件事件時不要修改HTML元素
- 不要在基於HTML元素的HTML模板中實現邏輯
最好在模型中創建一個單獨的屬性,並在模型中計算邏輯。 - 不要按原樣使用外部資源中預先編寫的HTML/CSS代碼
這樣的代碼可能無法工作,因爲不支持所有的HTML標籤/屬性。