DevExpress Winform 如何使用Html样式来实现更加漂亮的界面以及...

rzt_tao · 发表于 2020-6-6 21:43:07

DevExpress的Winform控件中有不少控件是支持HtmlDraw的，就是类似html的便签设置文本部分的字体粗细大小、颜色、背景色、文本中带图片、斜体、下划线、删除线和链接等，这是一个用来实现界面多样化效果的一个不错的功能，除了官网的帮助文档，网上目前很少有这一块的资料介绍，本着造福DevExpress开发人员的心态写这一篇文章，如要转载请标注清楚，发现盗版我的文章，必追究其责任。

先用LabelControl做一个简单的演示效果：

一、支持的控件介绍（来自DevExpress的官网帮助文档）

目前，下表中列出的控件支持HTML格式。请注意，为了使某些控件允许HTML格式化，必须启用相应的布尔属性

Suite/Controls

HTML formatting is supported for...

Property that enables HTML formatting

ChartControl

text in a Title (Title.Text) and TextAnnotation (TextAnnotation.Text and TextAnnotation.Lines).

n/a

Editors Library

text in a LabelControl (LabelControl.Text).

LabelControl.AllowHtmlString

text in the CheckEdit and ToggleSwitch controls.

RepositoryItem.AllowHtmlDraw

text in the SimpleButton control (SimpleButton.Text).

SimpleButton.AllowHtmlDraw

ButtonEdit子类控件的文本（当RepositoryItemButtonEdit.TextEditStyle设置为TextEditStyles.DisableTextEditor时）。
RepositoryItem.AllowHtmlDraw

ButtonEdit后代中嵌入按钮中显示的文本。
RepositoryItem.AllowHtmlDraw

items in the ListBoxControl and CheckedListBoxControl controls.

BaseListBoxControl.AllowHtmlDraw

items in the ComboBoxEdit, ImageComboBoxEdit and CheckedComboBoxEdit controls.

RepositoryItem.AllowHtmlDraw

the GroupControl's text (GroupControl.Text).

GroupControl.AllowHtmlText

the RatingControl's text (RatingControl.Text)

RepositoryItemRatingControl.AllowHtmlDraw

GridControl

column captions (GridColumn.Caption).

GridOptionsView.AllowHtmlDrawHeaders

band captions (GridBand.Caption).

GridOptionsView.AllowHtmlDrawHeaders

单元格文本.

可以通过以下方式将HTML标记合并到单元格中。

直接进入底层数据源中的编辑值。

通过创建未绑定列并处理ColumnView.CustomUnboundColumnData事件。

通过ColumnView.CustomColumnDisplayText事件。

通过GridView.CustomDrawCell事件。

Use RepositoryItemHypertextLabel as an in-place editor. This editor has the HTML text formatting feature enabled by default (see RepositoryItem.AllowHtmlDraw). Text editing is disabled.

分组行文本.

HTML标记可以通过GridView.CustomDrawGroupRow事件合并到组行中。

GridOptionsView.AllowHtmlDrawGroups

TileView的编辑表单中的列标题（GridColumn.Caption）
TileViewOptionsEditForm.AllowHtmlCaptions

WinExplorerView中的Items文本
WinExplorerViewOptionsView.AllowHtmlText

TreeList

column and band captions (TreeListColumn.Caption, TreeListBand.Caption).

TreeListOptionsView.AllowHtmlDrawHeaders

单元格文本.

可以通过以下方式将HTML标记合并到单元格中。

直接进入底层数据源中的编辑值。

通过创建未绑定列并处理TreeList.CustomUnboundColumnData事件。

通过TreeList.CustomColumnDisplayText事件。

通过TreeList.CustomDrawNodeCell事件。

Use RepositoryItemHypertextLabel as an in-place editor. This editor has the HTML text formatting feature enabled by default (see RepositoryItem.AllowHtmlDraw). Text editing is disabled.

PivotGridControl (see PivotGridControl)

text in the field headers - use the PivotGridFieldBase.Caption property

PivotGridOptionsView.AllowHtmlDrawHeaders

text in the field values - handle the PivotGridControl.FieldValueDisplayText event and use the PivotFieldDisplayTextEventArgs.DisplayText property.

PivotGridOptionsView.AllowHtmlDrawFieldValues

VGridControl, PropertyGridControl

row captions.

BaseOptionsView.AllowHtmlText, VGridOptionsRow.AllowHtmlText, CustomDrawRowHeaderCellEventArgs.AllowHtmlText

单元格文本：.

可以通过以下方式将HTML标记合并到单元格中。

直接进入基础数据源中的编辑值..

通过创建未绑定的行并处理VGridControl.CustomUnboundData事件。

通过VGridControl.CustomColumnDisplayText事件。

通过VGridControlBase.CustomDrawRowValueCell事件。

Use RepositoryItemHypertextLabel as an in-place editor. This editor has the HTML text formatting feature enabled by default (see RepositoryItem.AllowHtmlDraw). Text editing is disabled.

LayoutControl

item captions (BaseLayoutItem.Text).

LayoutControlItem.AllowHtmlStringInCaption

LayoutGroup.AllowHtmlStringInCaption

tooltips for items in the Layout Control

BaseLayoutItemOptionsToolTip.AllowHtmlString, BaseLayoutItemOptionsToolTip.IconAllowHtmlString, ToolTipController.AllowHtmlText

RibbonControl, Menus (BarManager) and Docking Library (DockManager)

the captions of Bar, Menu and Ribbon elements (BarItem.Caption, BarItem.Description)

BarItem.AllowHtmlText, BarItemLink.AllowHtmlText, BarManager.AllowHtmlText, RibbonControl.AllowHtmlText

通过AlertControl组件实现的警报窗口的标题和文本。
AlertControl.AllowHtmlText

item captions in the BackstageViewControl (BackstageViewItem.Caption).

BackstageViewItem.AllowHtmlString

item captions in the OfficeNavigationBar (NavigationBarItem.Text).

OfficeNavigationBar.AllowHtmlDraw

text of gallery items and gallery item groups (GalleryItem.Caption, GalleryItemGroup.Caption)

BaseGallery.AllowHtmlText

Windows UI and App UI Manager (DocumentManager)

WindowsUIButton's caption (WindowsUIButton.Caption)

WindowsUIButtonPanel.AllowHtmlDraw

Document headers (BaseDocument.Header).

IDocumentSelectorDefaultProperties.AllowHtmlDrawHeaders

IDocumentSelectorProperties.AllowHtmlDrawHeaders

Document captions (BaseDocument.Caption).

IDocumentGroupDefaultProperties.AllowHtmlDraw

IDocumentGroupProperties.AllowHtmlDraw

A Flyout's caption and description (UIActionPropertiesCore.Caption, UIActionPropertiesCore.Description).

IFlyoutDefaultProperties.AllowHtmlDraw, IFlyoutProperties.AllowHtmlDraw

Tile elements

ITileContainerDefaultProperties.AllowHtmlDraw

Overview screens of Content Containers

OverviewContainerDefaultProperties.AllowHtmlDraw

OverviewContainerProperties.AllowHtmlDraw

TileControl

TileBar

text in tiles

TileControl.AllowHtmlText, TileItem.AllowHtmlText

NavBarControl

text of items and groups (NavElement.Caption)

NavBarControl.AllowHtmlString, NavElement.AllowHtmlString

Navigation Frame, Tab Pane

and Navigation Pane controls

NavigationPage captions (NavigationPageBase.Caption) and tab headers (NavigationPageBase.Text)

NavigationPageDefaultProperties.AllowHtmlDraw

NavigationPageProperties.AllowHtmlDraw

NavigationPane.AllowHtmlDraw

AccordionControl

element header text (AccordionControlElementBase.Text).

AccordionControl.AllowHtmlText

GaugeControl

text of labels.

Label.AllowHTMLString

MapControl

text of MapCallout or MapCustomElement.

MapCallout.AllowHtmlText, MapCustomElement.AllowHtmlText

XtraDialog and XtraMessageBox

the captions of the XtraDialog and XtraMessageBox

XtraDialog.AllowHtmlText, XtraMessageBox.AllowHtmlText

WizardControl

text in the WizardControl's pages

WizardControl.AllowHtmlText

All Controls

regular tooltips and SuperToolTips for controls.

ToolTipController.AllowHtmlText, SuperToolTip.AllowHtmlText, ToolTipItem.AllowHtmlText

regular tooltips (BaseControl.ToolTip) for BaseControl descendants.

BaseControl.AllowHtmlTextInToolTip

the caption of an XtraForm.

n/a

使用XtraForm.HtmlText属性使用HTML标记格式化表单的标题。

the ContextButton's text (ContextButtonBase.Caption).

ContextButtonBase.AllowHtmlText

the ValidationHint's text (ValidationHintBaseDefaultProperties.Text, ValidationHintBaseProperties.Text).

ValidationHintBaseDefaultProperties.AllowHtmlDrawText, ValidationHintBaseProperties.AllowHtmlDrawText

二、支持的标签

由上面的表格我们看出，我们常用的控件中有不少控件都是支持HtmlFormating的设置的，这应该让人比较兴奋的，不过，DevExpress的HtmlFormating又有点区别于普通的Html标签，关于Dev的Html标签，请看以下表格：

标签包含“ < ”和“ > ”符号，通常具有相应的结束标记。如果标记与其结束副本不匹配，则标记后面的所有文本都将相应地格式化。

Tag

End Tag

描述

 

-

插入一个换行符。要使用此标记，您应该通过相应外观对象的TextOptions.WordWrap选项启用自动换行。

要在GridControl中使用此标记，请通过GridViewAppearances.HeaderPanel对象，GridColumn.AppearanceHeader对象，BandedViewAppearances.BandPanel对象或GridBand.AppearanceHeader对象启用自动换行。

要在TreeList中使用此标记，请通过TreeListAppearanceCollection.HeaderPanel对象或TreeListColumn.AppearanceHeader对象启用自动换行。

要在LabelControl中使用此标记，请通过LabelControl.Appearance对象启用自动换行。

要在CheckEdit控件中使用此标记，请通过CheckEdit.Properties.Appearance对象（RepositoryItem.Appearance）启用自动换行。

要在布局项标题中使用此标记，请通过项目或布局组的BaseLayoutItem.AppearanceItemCaption对象启用自动换行。

<color=value>

Examples:

<color=red>

<color=0,255,0>

<color=255,0,255,0>

<color=#0000FF>

</color>

指定文本颜色.

<backcolor=value>

Examples:

<backcolor=red>

<backcolor=0,255,0>

<backcolor=255,0,255,0>

<backcolor=#0000FF>

</backcolor>

指定背景颜色.

<size=value>

Examples:

<size=10>

<size=+4>

<size=-4>

</size>

指定字体大小。




定义粗体文本。




定义斜体文本。
<s>

</s>

定义删除线文本。




定义带下划线的文本。
<image=value>

Examples:

<image=UpArrow.png>

<image=#LeftArrow>

<image=DownArrow.png;size=20,20;align=top>

-

插入绑定图像集合或项目资源中的图像。要从项目资源插入图像，图像的名称前面必须带有“＃”字符。从项目资源引用的图像不会在设计时出现，但会在运行时出现。

注意

项目资源图像只能从Entry Assembly（启动可执行文件）加载。因此，如果在附加类库的资源中定义图像，则无法使用图像标记加载这些图像，即使是从此库代码中也是如此。

如果图像的名称前面没有“＃”，则暗示图像应该通过其名称从绑定的图像集合加载。使用控件的HtmlImages属性提供图像集合（ImageCollection或SvgImageCollection）。

支持图像标记的以下属性。

size - 设置图像的显示大小。

align - 指定图像相对于文本的垂直对齐方式。可能的值：顶部，底部和中心。

必须在标记的值之后指定属性，然后是“;” 字符。它们必须用“;”分隔，并指定不带空格。

下面列出了接受图像标记并提供HtmlImages属性的控件和组件。

BaseListBoxControl后代（ListBoxControl，ImageListBoxControl，CheckedComboBoxEdit） - 支持在项目中显示图像。
CheckEdit和ToggleSwitch - 支持在文本中显示图像。
ButtonEdit后代 - 支持在1）编辑框中显示图像，如果RepositoryItemButtonEdit.TextEditStyle设置为TextEditStyles.DisableTextEditor并且2）在嵌入式按钮中。
RepositoryItemHypertextLabel（请参阅RepositoryItemHypertextLabel） - 支持在容器控件（数据网格，TreeList等）的单元格中显示图像。您可以将图像集合分配给RepositoryItemHypertextLabel.HtmlImages属性或容器控件的HtmlImages属性（例如，Data Grid的BaseView.HtmlImages）。
GroupControl - 支持在控件标题中显示图像。
LabelControl - 支持在标签文本中显示图像。
GridControl - 支持在列标题，波段标题和组行中显示图像。可以使用RepositoryItemHypertextLabel显示单元格中的图像（请参阅RepositoryItemHypertextLabel）。
TreeList - 支持在列和波段头中显示图像。可以使用RepositoryItemHypertextLabel显示单元格中的图像（请参阅RepositoryItemHypertextLabel）。
PivotGridControl（参见PivotGridControl） - 支持在字段标题和字段值中显示图像。
VGridControl（请参阅VGridControl） - 支持在行标题中显示图像。可以使用RepositoryItemHypertextLabel显示单元格中的图像（请参阅RepositoryItemHypertextLabel）。
XtraForm - 支持在表单的标题中显示图像。
BarManager - 支持在项目标题中显示图像。
RibbonControl - 支持在项目标题中显示图像。
<href=value>

Example:

<href=www.devexpress.com>Our web site</href>

</href>

显示超链接。的值字符串指定的超级链接源，以及打开和关闭标签之间的字符串是要被显示的文本。对于能够通过此标记显示超链接的控件，单击超链接将触发HyperlinkClick事件。

LabelControl.HyperlinkClick
BarItem.HyperlinkClick
BarManager.HyperlinkClick
RibbonControl.HyperlinkClick
RepositoryItemCheckEdit.HyperlinkClick
ToolTipController.HyperlinkClick
<nbsp>

-

插入一个不间断的空格字符 (0xA0).

三、示例

示例1、

代码如下：其中要注意的是图片标签的设置问题，如果是在resource.resx中直接添加的资源，如下图这种方式，则image的标签必须图片名称前加“#”，不需要文件后缀名，如： <image=#tao>

如果采用的是ImageCollection组件添加控件的方式，并且绑定HtmlImages属性的话，则无需添加“#”，但必须添加文件后缀名，如：<image=dev.png>

private void Form1_Load(object sender, EventArgs e)
 {
 labelControl1.Text = @"<size=14>Size = 14 " +
 "粗体 斜体 下划线 " +
 "<size=11>Size = 11 " +
 "<image=#tao> "+//在Resource.resx里面添加图片资源
 "<image=dev.png> "+//利用ImageCollection组件添加图片，并且labelcontrol的htmlImages属性绑定该ImageCollection
 "<color=255, 0, 0>简单文本</color></size> " +
 "<href=https://blog.csdn.net/u012097590>涛神博客链接</href>";
 labelControl1.AllowHtmlString = true;//必须启动
 labelControl1.Appearance.TextOptions.WordWrap = DevExpress.Utils.WordWrap.Wrap;//允许文本可以换行，否则br换行标签无效
 labelControl1.Appearance.Options.UseTextOptions = true;//设置textoptions，就必须将usetextoptions设置为true才会生效
 labelControl1.AutoSizeMode = DevExpress.XtraEditors.LabelAutoSizeMode.Vertical;
 labelControl1.HyperlinkClick += labelControl1_HyperlinkClick;//注册链接的事件

 }
 private void labelControl1_HyperlinkClick(object sender, DevExpress.Utils.HyperlinkClickEventArgs e)
 {
 System.Diagnostics.Process.Start(e.Link);
 }
效果图：

示例2：

给simpleButton控件的提示框内容增加链接

代码示例：

using DevExpress.Utils;
using System.Diagnostics;

void SimpleButtonSupperTooltip()
 {
 ToolTipController defaultTooltipController = DevExpress.Utils.ToolTipController.DefaultController;
 SuperToolTip sTooltip = new SuperToolTip();
 SuperToolTipSetupArgs args = new SuperToolTipSetupArgs();
 args.Title.Text = "Header";
 args.Contents.Text = "关于DevExpress的学习和资源获取可以关注本人的<href=https://blog.csdn.net/u012097590>CSDN博客</href> 或者<href=http://www.dxper.net>开发者论坛";
 args.ShowFooterSeparator = true;
 args.Footer.Text = "Footer";
 sTooltip.Setup(args);
 sTooltip.AllowHtmlText = DefaultBoolean.True;
 defaultTooltipController.HyperlinkClick += defaultTooltipController_HyperlinkClick;
 simpleButton1.SuperTip = sTooltip;
 }
 void defaultTooltipController_HyperlinkClick(object sender, HyperlinkClickEventArgs e)
 {
 Process process = new Process();
 process.StartInfo.FileName = (e.Link);
 process.StartInfo.Verb = "open";
 process.StartInfo.WindowStyle = ProcessWindowStyle.Normal;
 try
 {
 process.Start();
 }
 catch { }
 }
效果图：

示例3：利用链接打开窗体（应用场景：比如对GridView的某列字段进行解释说明，如果需要更详细说明或者查看明细的数据，可以利用此方式打开指定的窗体，这样呈现效果和体验会更好）

private void ToolTipController1_HyperlinkClick(object sender, HyperlinkClickEventArgs e)
 {
 var f = GetType().Assembly.CreateInstance(e.Link) as Form;
 f.StartPosition = FormStartPosition.CenterScreen;
 f.Show();
 }

 private void ToolTipController1_GetActiveObjectInfo(object sender, ToolTipControllerGetActiveObjectInfoEventArgs e)
 {
 if (e.SelectedControl == gridControl1)
 {
 var view = gridView1;
 var info = view.CalcHitInfo(e.ControlMousePosition);
 if (info.InColumnPanel && info.Column == gridColumn2)
 {
 var tInfo=new ToolTipControlInfo();
 var sup=new SuperToolTip();
 tInfo.Object = info.Column;
 sup.AllowHtmlText = DefaultBoolean.True;
 sup.Items.AddTitle("根据窗体类名实例化窗体");
 sup.Items.Add($@"<href={typeof(Form2)}>打开窗体</href>");
 tInfo.SuperTip = sup;
 e.Info = tInfo;

 }
 }
 }
效果图：

DevilHero · 发表于 2022-1-7 14:30:43

学习一下，为什么看不到图呢？

		自动登录	找回密码
密码			注册 (请使用非IE浏览器)