首页 > 其他分享 >DevExpress WinForms中文教程 - HTML & CSS支持的实战应用(二)

DevExpress WinForms中文教程 - HTML & CSS支持的实战应用(二)

时间:2024-05-23 09:40:17浏览次数:23  
标签:HTML DevExpress WinForms UI new CSS

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最新正式版下载

DevExpress技术交流群10:532598169      欢迎一起进群讨论

高级场景

以下使用场景需要具备DevExpress WinForms UI控件和HTML/CSS的高级知识。

创建复杂的数据输入表单(高级)

HTML/CSS模板允许您创建完全自定义的数据表单,如果DevExpress WinForms LayoutControl不能达到您的预期效果,那么我们建议使用HTML/CSS模板。使用HTML/CSS从头开始构建布局可能很耗时,特别是对于具有多个字段的复杂表单。DevExpress的LayoutControl在构建时考虑了可访问性,这包括适当的标签、键盘导航支持以及与屏幕阅读器的兼容性等特性。

DevExpress WinForms中文教程
使用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);
}
};
DevExpress WinForms中文教程
使用CustomDraw显示UI元素并绑定关联状态到数据~(高级)

与静态模板不同,数据感知模板呈现需要编写更多代码(特别是需要从不同的源检索数据时)。下面的示例在Grid单元格中绘制销售徽章,折扣大小是从不同的数据源获得的。

DevExpress WinForms中文教程
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开发的两种技术/细微差别。

DevExpress WinForms中文教程
可视化集合(高级)

数据源可能包括存储项目集合的数据字段:列表、数组、数据集等。<dx-collection>标签是一个唯一的DevExpress元素,它允许您为需要可视化的项指定集合属性(以及必须应用于这些项的模板)。使用自定义标记(如<dx-collection>)会对HTML模板施加特定的要求,以实现适当的功能。

DevExpress WinForms中文教程
使用DevExpress WinForms HTML & CSS引擎时不要做的事
  • 不要创建复杂的嵌套flex布局
    (例如,3个或更多嵌套的flex面板)
  • 不要创建CSS动画
  • 在处理UI控件事件时不要修改HTML元素
  • 不要在基于HTML元素的HTML模板中实现逻辑
    最好在模型中创建一个单独的属性,并在模型中计算逻辑。
  • 不要按原样使用外部资源中预先编写的HTML/CSS代码
    这样的代码可能无法工作,因为不支持所有的HTML标签/属性。

更多DevExpress线上公开课、中文教程资讯请上中文网获取

标签:HTML,DevExpress,WinForms,UI,new,CSS
From: https://www.cnblogs.com/AABBbaby/p/18207672

相关文章

  • 浏览器解析HTML过程
    1.script的加载与执行body标签后面的script标签的解析步骤:script标签资源的加载是并行的,等所有的script标签资源加载完毕后,再依次按顺序执行script代码<!--远程代码1--><scriptsrc="http://127.0.0.1:80/script1.js"></script><!--本地代码1--><script>console.l......
  • 界面组件DevExpress WPF v23.2新版亮点:富文本编辑器、电子表格组件升级
    DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。DevExpressWPF控件日前正式发布了近期的一个重大......
  • Python 将PowerPoint (PPT/PPTX) 转为HTML
    PPT是传递信息、进行汇报和推广产品的重要工具。然而,有时我们需要将这些精心设计的PPT演示文稿发布到网络上,以便于更广泛的访问和分享。本文将介绍如何使用Python将PowerPoint文档转换为网页友好的HTML格式。包含两个简单示例:Python将PowerPoint文档转为HTML格式Python将指定......
  • 如何免费将PDF转成HTML网页?
    HTML是网页的标准格式,具有良好的可读性和可访问性以及更强的可编辑性。与PDF相比,HTML文档更容易进行修改和更新。将PDF转换为HTML后,文档内容可以在各种浏览器和设备上自由查看,为用户提供更便捷的访问体验。另外将PDF转成HTML网页后也有助于提升信息的传播和分享效率,由于HTML文档......
  • HTML5画布-小球碰撞
    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解`HTML5画布-小球碰撞日期:2017-7-18阿珏HTML浏览:2465次评论:2条html5是万维网的核心语言、标准通用标记语言下的一......
  • HTML------⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?
    ⾏内元素有: a、b、span、img、input、select、strong;块级元素有:div、ul、ol、li、dl、dt、dd、h1、h2、h3、h4、h5、h6、p;空元素,即没有内容的HTML元素。空元素是在开始标签中关闭的,也就是空元素没有闭合标签:常⻅的有:<br>、<hr>、<img>......
  • html------拖拽属性draggable
    draggable用于定义元素是否可以拖拽,在拖拽过程中鼠标会变成禁止标志<imgdraggable="true"/>下面是一个简单的图片拖拽属性添加<!DOCTYPEhtml><html><head> <metacharset="UTF-8"> <title>draggable属性</title></head><body>......
  • FastReport Exporting to html
    https://fastreports.github.io/FastReport.Documentation/Exporting.htmlFastReportOpenSourcecansavedocumentsinHTML,BMP,PNG,JPEG,GIF,TIFF,EMF.ThefollowingisanexampleofexportingareportinJpegfile.usingFastReport;usingFastReport.Ut......
  • HTML 28 - Javascript
    Ascriptisasmallpieceofprogramthatcanaddinteractivitytoourwebsites.Forexample,ascriptcouldgenerateapop-upalertboxmessage,orprovideadropdownmenu.ThisscriptcouldbewrittenusingJavaScriptorVBScript.Nowadays,onlyJavaScr......
  • HTML 29 - Layouts
     TheHTMLLayoutsspecifiesthearrangementofcomponentsonanHTMLwebpage.Agoodlayoutstructureofthewebpageisimportanttoprovideauser-friendlyexperienceonourwebsite.Ittakesconsiderabletimetodesignawebsite'slayoutwithag......