HTML and CSS Support HTML 和 CSS 支持

GoTo DevExpress Data Grid 数据网格

HTML and CSS Support HTML 和 CSS 支持

在这里插入图片描述

HTML和CSS支持允许您创建完全自定义的UI元素，并消除使用基于属性的UI自定义和CustomDraw事件。您可以构建 HTML 格式的 UI，并使用 CSS 样式自定义 UI 元素的外观设置、大小、填充和布局选项。

主要功能包括：

  • 通过阴影、闪亮、圆角、鼠标悬停/单击等效果增强 DevExpress WinForms 控件的视觉外观。
  • 使用 CSS 创建响应式 UI。
  • 在 HTML 标记中指定数据绑定表达式以显示数据源中的值。
  • 处理事件以响应 HTML UI 元素上的鼠标操作。
  • DirectX 硬件加速以获得更好的性能。
  • HTML和CSS模板编辑器集成到Visual Studio IDE中。

以下DevExpress WinForms控件内置了HTML和CSS支持：

  • Accordion
  • Alert Controls and XtraMessageBox
  • Data Grid (ItemsView, TileView, WinExplorerView)
  • DirectX Form
  • Listbox and ComboBox
  • Gantt Control
  • HTML Content and Popup
  • Scheduler
  • TreeList

Best Practices 最佳实践

阅读以下主题，了解使用 DevExpress HTML/CSS 模板时的重要建议：HTML/CSS 最佳实践。

HTML-CSS Markup HTML-CSS 标记

HTML 和 CSS 感知控件和组件从模板呈现其 UI。控件模板的 HTML 标记指定控件的内容（UI 元素），而模板的 CSS 代码指定应用于 UI 元素的样式、显示和布局设置。

使用控件的 HtmlTemplate 属性指定模板。在设计时，您可以在 HTML 模板编辑器中创建模板。
在这里插入图片描述
此编辑器支持语法突出显示、IntelliSense（代码完成辅助工具）和预览窗格。预览窗格允许您检查视觉元素 - 当您将鼠标悬停在元素上时找到 HTML 标记。

Reusable HTML & CSS Templates 可重复使用的 HTML 和 CSS 模板

HTML模板编辑器允许您从DevExpress HTML和CSS模板库中加载预先设计的模板。这些模板基于我们的 WinForms 演示应用程序中使用的模板。您可以“按原样”使用这些模板，也可以根据需要进行自定义。

在这里插入图片描述
您可以创建一个HTML和CSS模板，将模板保存到画廊中，并在需要时在任何WinForms项目中使用它。

Example 例

下面的示例演示一个 HtmlContentControl，它从分配的 HTML-CSS 模板呈现 UI。该控件绑定到 Employee 对象的列表。模板的 HTML 代码包含用于显示数据源中的值的数据绑定表达式。

在这里插入图片描述

public class Employee {public string DisplayName { get; set; }public string FullName { get; set; }public SvgImage Photo { get; set; }
}
//...
Employee emp = new Employee();
emp.DisplayName = "Leah Test Coordinator";
emp.FullName = "Leah Simpson";
SvgImageCollection imageCollection = new SvgImageCollection();
imageCollection.Add("photo", "image://svgimages/icon builder/business_businesswoman.svg");
emp.Photo = imageCollection["photo"];
List<Employee> list = new List<Employee>();
list.Add(emp);
htmlContentControl1.DataContext = list;
//...
void OnButtonClick(object sender, DxHtmlElementMouseEventArgs args) {if(args.ElementId == "uploadBtn") {//...}if (args.ElementId == "removeBtn") {//...}XtraMessageBox.Show("Button " + args.ElementId + " clicked");
}

Specify HTML-CSS Templates Dynamically 动态指定 HTML-CSS 模板

许多控件使用 HTML-CSS 模板来呈现其项。例如，ItemsView 从 ItemsView.HtmlTemplate 属性指定的默认模板生成其所有项（记录）。

这些控件具有用于将模板分配给项的事件，从而动态覆盖默认模板：

  • ItemsView.QueryItemTemplate
  • WinExplorerView.QueryItemTemplate
  • GanttControl.QueryItemTemplate
  • TileView.CustomItemTemplate
Example 例

以下 ItemsView.QueryItemTemplate 事件处理程序根据项的类型（IsOwnMessage 设置）将不同的模板分配给不同的项。

您可以在以下演示中找到此示例的完整代码：聊天客户端。

void OnQueryItemTemplate(object sender, QueryItemTemplateEventArgs e) {var message = e.Row as DevAV.Chat.Model.Message;if(message == null)return;if(message.IsOwnMessage)Styles.MyMessage.Apply(e.Template);elseStyles.Message.Apply(e.Template);//...
}

Customize Items Dynamically 动态自定义项目

从模板生成其项的控件还具有用于动态自定义每个项的事件：

  • ItemsView.CustomizeItem
  • WinExplorerView.CustomizeItem
  • GanttControl.CustomizeItem
  • TileView.ItemCustomize

在控件中的每个项显示在屏幕上之前，这些事件都会触发该事件。它们允许您访问将要呈现的单个 HTML 元素，并自定义其可见性和样式设置。

Example 例

以下示例根据自定义逻辑更改 HTML 元素的可见性。

您可以在以下演示中找到此示例的完整代码：聊天客户端。

//CustomizeItem event handler:
void OnCustomizeItem(object sender, CustomizeItemArgs e) {//...if(message.IsLiked) {var btnLike = e.Element.FindElementById("btnLike");var btnMore = e.Element.FindElementById("btnMore");if(btnLike != null && btnMore != null) {btnLike.Hidden = false;btnMore.Hidden = true;}}if(message.IsFirstMessageOfBlock)return;if(!message.IsOwnMessage) {var avatar = e.Element.FindElementById("avatar");if(avatar != null)//Display an empty region instead of the 'avatar' element.avatar.Style.SetVisibility(Utils.Html.Internal.CssVisibility.Hidden);}
//...
}

Data Binding 数据绑定

如果控件绑定到数据源，则可以在 HTML 标记中使用以下语法来显示数据源字段的值：

${FieldName}

“$”字符指定后面的文本是控件需要计算的表达式。表达式可以包含静态文本和到多个字段的数据绑定：

  • $text{FieldName}text
  • ${FieldName1}text{FieldName2}text

例如，以下 HTML 代码显示控件数据源中 “UserName” 字段的值：

<div class='contactName'>${UserName}</div>

以下示例在用户名前添加 ‘Welcome’ 字符串：

<h1>$Welcome {UserName}!</h1>

External Controls and In-place Editors 外部控件和在位编辑器

标记允许您向基于 HTML 的 UI 添加就地编辑器或外部控件。以下控件支持该标签：

HtmlContentControl- 使用 标记作为要在布局中显示的外部控件和存储库项目（就地编辑器）的占位符。

数据网格视图（ItemsView、TileView 和 WinExplorerView）

使用 标记作为存储库项目（就地编辑器）的占位符。不能使用此标记在 Data Grid 视图中显示外部控件。
在这里插入图片描述

<input name="textEditEmail" class="field-input"/>
<input name="repositoryItemPictureEdit1" value="${ImageData}" class="editor"/>

Buttons 按钮

请按照以下步骤呈现按钮：

  • 定义呈现按钮的 HTML 元素。指定元素的类（例如，将类名设置为 “button”）。
  • 在 CSS 代码中，定义 “button” 类以指定元素的显示属性。
  • 此外，定义 button 类的悬停状态，以便在将元素悬停时突出显示该元素。

以下示例使用

标记来定义按钮： 

<div id="uploadBtn" class="centered button">Upload</div>
<div id="removeBtn" class="centered button">Remove</div>

Images 图像

使用 HTML 标签显示图像。将图像源分配给标签的 src 属性。image source 可以是以下值之一：

  • 控件的 HtmlImages 集合中目标图像的名称或索引（例如 HtmlContentControl.HtmlImages）。
svgImageCollection1.Add("employee", "image://svgimages/icon builder/business_businesswoman.svg");
htmlContentControl1.HtmlImages = svgImageCollection1;

  • 一个绑定表达式 （${FieldName}），用于定义控件数据源中存储图像数据的字段。请注意，目标字段必须存储字符串（图像名称）或图像（Bitmap 或 SvgImage 对象）。不支持 ImageURL 和字节数组。

    HTML 模板检查数据字段是否包含 SVG 图形或位图。如果不是，模板将在分配给控件的 HtmlImages 属性的 SvgImageCollection 中查找具有指定名称的图像。

<img src="${LargePhoto}" width="100" height="100">

HTML-CSS-aware Controls 可识别 HTML-CSS 的控件

Html内容控件

HtmlContentControl 是一个图面，您可以在其中从 HTML-CSS 标记构建 UI。

在这里插入图片描述

Html内容弹出窗口

HtmlContentPopup 是 HtmlContentControl 的弹出版本。此组件从 HTML-CSS 代码生成 UI，并将其显示为浮出控件或模式窗口。
在这里插入图片描述

网格控件的项视图

新的 ItemsView 没有默认的数据表示形式。它仅从您使用属性指定的 HTML-CSS 模板或使用事件动态呈现其项目（数据记录）。

在这里插入图片描述

网格控件的平铺视图

TileView 从模板生成其项 （磁贴）。您可以在常规模板和基于 HTML-CSS 的模板之间进行选择。

在这里插入图片描述

GridControl 的 WinExplorer视图

WinExplorerView 支持 HTML-CSS 模板来构建卡片布局。您可以手动为每个显示样式指定 HTML-CSS 模板（ExtraLarge、Large、Medium、List、Tiles 等），也可以使用事件动态指定。

在这里插入图片描述

GanttControl 甘特图控制

GanttControl 允许您使用 HTML-CSS 标记来呈现许多元素：

  • 任务、摘要和里程碑
  • 常规任务进度和摘要任务进度
  • 常规任务基线、摘要任务基线和里程碑任务基线
  • Text Labels 文本标签
  • Interaction Tooltips 交互工具提示
  • Split Tasks 拆分任务

在这里插入图片描述

有关详细信息，请参阅以下主题：甘特图控件中的 HTML 模板。

Scheduler Control 调度程序控制

您可以在 SchedulerControl 中使用基于 HTML-CSS 的模板来呈现约会。
在这里插入图片描述

TreeList 树列表

WinForms TreeList 控件支持 HTML/CSS 模板，并允许您为节点及其空白区域生成唯一的自定义布局。使用以下 API 创建和应用 HTML 模板：

  • NodeHtmlTemplate - 指定节点的默认 HTML-CSS 模板。
  • EmptyTreeHtmlTemplate - 为空 TreeList 控件指定默认 HTML-CSS 模板。
  • HtmlTemplates - 可基于条件应用于 TreeList UI 元素的 HTML 模板集合。
  • QueryNodeTemplate - 允许您根据条件应用 HtmlTemplates 集合中的模板。
  • CustomizeNodeTemplate - 允许您自定义模板化节点。

在这里插入图片描述

DirectX Form DirectX 表格

标准 Visual Studio 表单的替代项，为其子控件启用 DirectX 硬件加速，并支持基于 HTML-CSS 的模板。

在这里插入图片描述

Alert Controls 警报控件

AlertControl 的模板允许您呈现现代应用程序通知。

在这里插入图片描述
请参阅使用 HTML 模板的警报窗口。

Listbox Controls and ComboBox Editor 列表框控件和组合框编辑器

您可以使用基于 HTML-CSS 的模板来呈现以下控件中的项：

在这里插入图片描述

Accordion Control 折叠控制

AccordionControl 允许您使用 HTML-CSS 模板来呈现其 UI 元素：

  • Items and groups 项和组
  • Footer elements 页脚元素
  • Elements in the minimized state, etc. 处于最小化状态的元素等。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/474291.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

掌握Golang中的数据竞争检测：runtime/race包全面教程

掌握Golang中的数据竞争检测：runtime/race包全面教程

掌握Golang中的数据竞争检测&#xff1a;runtime/race包全面教程 引言数据竞争问题概述数据竞争的定义数据竞争对程序的影响常见数据竞争场景 Golang runtime/race包概述runtime/race包简介启用数据竞争检测使用 go run使用 go build使用 go test 基本用法与示例单元测试中的使…
阅读更多...
Ascend C算子性能优化实用技巧05——API使用优化

Ascend C算子性能优化实用技巧05——API使用优化

Ascend C是CANN针对算子开发场景推出的编程语言&#xff0c;原生支持C和C标准规范&#xff0c;兼具开发效率和运行性能。使用Ascend C&#xff0c;开发者可以基于昇腾AI硬件&#xff0c;高效的实现自定义的创新算法。 目前已经有越来越多的开发者使用Ascend C&#xff0c;我们…
阅读更多...
【HCIP]——OSPF综合实验

【HCIP]——OSPF综合实验

题目 实验需求 根据上图可得&#xff0c;实验需求为&#xff1a; 1.R5作为ISP&#xff1a;其上只能配置IP地址&#xff1b;R4作为企业边界路由器&#xff0c;出口公网地址需要通过PPP协议获取&#xff0c;并进行CHAP认证。&#xff08;PS&#xff1a;因PPP协议尚未学习&#…
阅读更多...
深入理解Redis（七）----Redis实现分布式锁

深入理解Redis（七）----Redis实现分布式锁

基于Redis的实现方式 1、选用Redis实现分布式锁原因&#xff1a; &#xff08;1&#xff09;Redis有很高的性能&#xff1b; &#xff08;2&#xff09;Redis命令对此支持较好&#xff0c;实现起来比较方便 2、使用命令介绍&#xff1a; &#xff08;1&#xff09;SETNX SETNX …
阅读更多...
Python-简单病毒程序合集(一)

Python-简单病毒程序合集(一)

前言&#xff1a;简单又有趣的Python恶搞代码&#xff0c;往往能给我们枯燥无味的生活带来一点乐趣&#xff0c;激发我们对编程的最原始的热爱。那么话不多说&#xff0c;我们直接开始今天的编程之路。 编程思路&#xff1a;本次我们将会用到os,paltform,threading,ctypes,sys,…
阅读更多...
Web3浪潮下的区块链应用：从理论到实践的全面解析

Web3浪潮下的区块链应用：从理论到实践的全面解析

随着Web3的兴起&#xff0c;区块链技术作为其核心支撑&#xff0c;正迎来前所未有的应用爆发。Web3不仅仅是技术的革新&#xff0c;更代表了一种去中心化、开放、透明的互联网愿景。在这一背景下&#xff0c;区块链技术的应用正从理论走向实践&#xff0c;推动着各行各业的数字…
阅读更多...
网络安全：我们的安全防线

网络安全：我们的安全防线

在数字化时代&#xff0c;网络安全已成为国家安全、经济发展和社会稳定的重要组成部分。网络安全不仅仅是技术问题&#xff0c;更是一个涉及政治、经济、文化、社会等多个层面的综合性问题。从宏观到微观&#xff0c;网络安全的重要性不言而喻。 宏观层面&#xff1a;国家安全与…
阅读更多...
鸿蒙北向开发环境安装指南

鸿蒙北向开发环境安装指南

境界一&#xff1a;昨夜西风凋碧树。独上高楼&#xff0c;望尽天涯路。----------王静安《人间词话》 单元一&#xff1a;鸿蒙开发工具的安装 学习目标 &#xff08;1&#xff09;完成鸿蒙开发工具Deveco Studio的安装。 任务1.1 下载DevEcoStudio 任务描述 DevEco Studi…
阅读更多...
51单片机基础01 单片机最小系统

51单片机基础01 单片机最小系统

目录 一、什么是51单片机 二、51单片机的引脚介绍 1、VCC GND 2、XTAL1 2 3、RST 4、EA 5、PSEN 6、ALE 7、RXD、TXD 8、INT0、INT1 9、T0、T1 10、MOSI、MISO、SCK 11、WR、RD 12、通用IO P0 13、通用IO P1 14、通用IO P2 三、51单片机的最小系统 1、供电与…
阅读更多...
golang开源框架：go开源验证框架validator

golang开源框架：go开源验证框架validator

validator 单个字段格式验证 先来一个单个字段格式的验证 目录结构 在main函数中 package mainimport "awesomeProject/validate"func main() {validate.SingleFieldValidate() }在validator.go中 package validateimport ("github.com/go-playground/val…
阅读更多...
计算机网络-MSTP基础实验一(单域多实例)

计算机网络-MSTP基础实验一(单域多实例)

前面我们已经大致了解了MSTP的基本概念和工作原理&#xff0c;但是我自己也觉得MSTP的理论很复杂不结合实验是很难搞懂的&#xff0c;今天来做一个配套的小实验以及一些配置命令。 一、网络拓扑 单域多实例拓扑 基本需求&#xff1a;SW1为VLAN10的网关&#xff0c;SW2为VLAN20的…
阅读更多...
智谱AI清影升级:引领AI视频进入音效新时代

智谱AI清影升级:引领AI视频进入音效新时代

前几天智谱推出了新清影,该版本支持4k、60帧超高清画质、任意尺寸&#xff0c;并且自带音效的10秒视频,让ai生视频告别了"哑巴时代"。 智谱AI视频腾空出世&#xff0c;可灵遭遇强劲挑战&#xff01;究竟谁是行业翘楚&#xff1f;(附测评案例)之前智谱出世那时体验了一…
阅读更多...
商业物联网详细指南：优势与挑战

商业物联网详细指南：优势与挑战

物联网是信息技术行业最具前景的领域之一。为什么它如此热门呢&#xff1f;原因在于全球连接性。设备可以像人群一样相互协作。正如我们所知&#xff0c;协作能显著提高生产力。 物联网对普通用户和企业都有益处。许多日常流程可以通过传感器、扫描仪、摄像头和其他设备实现自…
阅读更多...
css uniapp背景图宽度固定高度自适应可以重复

css uniapp背景图宽度固定高度自适应可以重复

page {height: 100%;background-image: url(https://onlinekc.a.hlidc.cn/uploads/20241115/350f94aaf493d05625a7ddbc86c7804e.png);background-repeat: repeat;background-size: contain;} 如果不要重复 把background-repeat: repeat;替换background-repeat: no-repeat;
阅读更多...
学习日志012--python中多进程，多线程

学习日志012--python中多进程，多线程

简简单单小练习 1.线程的并发执行 import threading import time# 创建要执行的两个函数 def print_hello():for _ in range(10):print("hello")time.sleep(1)def print_world():for _ in range(10):print("world")time.sleep(1)# 创建线程对象 注意这里…
阅读更多...
网络传输：网卡、IP、网关、子网掩码、MAC、ARP、路由器、NAT、交换机

网络传输：网卡、IP、网关、子网掩码、MAC、ARP、路由器、NAT、交换机

目录 网卡IP网络地址主机地址子网子网掩码网关默认网关 MACARPARP抓包分析 路由器NATNAPT 交换机 网卡 网卡(Network Interface Card&#xff0c;简称NIC)&#xff0c;也称网络适配器。 OSI模型&#xff1a; 1、网卡工作在OSI模型的最后两层&#xff0c;物理层和数据链路层。物…
阅读更多...
Ubuntu 22.04 上快速搭建 Samba 文件共享服务器

Ubuntu 22.04 上快速搭建 Samba 文件共享服务器

Samba 简介 Samba 是一个开源软件&#xff0c;它扮演着不同操作系统间沟通的桥梁。通过实现 SMB&#xff08;Server Message Block&#xff09;协议&#xff0c;Samba 让文件和打印服务在 Windows、Linux 和 macOS 之间自由流动。 以下是 Samba 的特点&#xff1a; 跨平台兼…
阅读更多...
stm32启动过程解析startup启动文件

stm32启动过程解析startup启动文件

1.STM32的启动过程模式 1.1 根据boot引脚决定三种启动模式 复位后&#xff0c;在 SYSCLK 的第四个上升沿锁存 BOOT 引脚的值。BOOT0 为专用引脚&#xff0c;而 BOOT1 则与 GPIO 引脚共用。一旦完成对 BOOT1 的采样&#xff0c;相应 GPIO 引脚即进入空闲状态&#xff0c;可用于…
阅读更多...
CVE-2024-2961漏洞的简单学习

CVE-2024-2961漏洞的简单学习

简单介绍 PHP利用glibc iconv()中的一个缓冲区溢出漏洞&#xff0c;实现将文件读取提升为任意命令执行漏洞 在php读取文件的时候可以使用 php://filter伪协议利用 iconv 函数, 从而可以利用该漏洞进行 RCE 漏洞的利用场景 PHP的所有标准文件读取操作都受到了影响&#xff1…
阅读更多...
视觉SLAM相机——单目相机、双目相机、深度相机

视觉SLAM相机——单目相机、双目相机、深度相机

一、单目相机 只使用一个摄像头进行SLAM的做法称为单目SLAM&#xff0c;这种传感器的结构特别简单&#xff0c;成本特别低&#xff0c;单目相机的数据&#xff1a;照片。照片本质上是拍摄某个场景在相机的成像平面上留下的一个投影。它以二维的形式记录了三维的世界。这个过程中…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023