本文介绍了DevExpress的Winform控件中支持HtmlDraw的功能，可设置文本字体、颜色等多样化效果。文中介绍了支持的控件、标签，还给出多个示例，如图片标签设置、给提示框内容加链接、利用链接打开窗体等，目前网上相关资料较少。
DevExpress的Winform控件中有不少控件是支持HtmlDraw的，就是类似html的便签设置文本部分的字体粗细大小、颜色、背景色、文本中带图片、斜体、下划线、删除线和链接等，这是一个用来实现界面多样化效果的一个不错的功能，除了官网的帮助文档，网上目前很少有这一块的资料介绍，本着造福DevExpress开发人员的心态写这一篇文章，如要转载请标注清楚，发现盗版我的文章，必追究其责任。
先用LabelControl做一个简单的演示效果：
一、支持的控件介绍（来自DevExpress的官网帮助文档）
目前，下表中列出的控件支持HTML格式。请注意，为了使某些控件允许HTML格式化，必须启用相应的布尔属性
二、支持的标签
由上面的表格我们看出，我们常用的控件中有不少控件都是支持HtmlFormating的设置的，这应该让人比较兴奋的，不过，DevExpress的HtmlFormating又有点区别于普通的Html标签，关于Dev的Html标签，请看以下表格：
标签包含“ < ”和“ > ”符号，通常具有相应的结束标记。如果标记与其结束副本不匹配，则标记后面的所有文本都将相应地格式化。
| Tag | End Tag | 描述 |
|---|---|---|
| <br> | - | 插入一个换行符。要使用此标记，您应该通过相应外观对象的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> | 指定字体大小。 |
| <b> | </b> | 定义粗体文本。 |
| <i> | </i> | 定义斜体文本。 |
| <s> | </s> | 定义删除线文本。 |
| <u> | </u> | 定义带下划线的文本。 |
| <image=value> Examples: <image=UpArrow.png> <image=#LeftArrow> <image=DownArrow.png;size=20,20;align=top> | - | 插入绑定图像集合或项目资源中的图像。要从项目资源插入图像，图像的名称前面必须带有“＃”字符。从项目资源引用的图像不会在设计时出现，但会在运行时出现。 注意
项目资源图像只能从Entry Assembly（启动可执行文件）加载 。因此，如果在附加类库的资源中定义图像，则无法使用图像标记加载这些图像，即使是从此库代码中也是如此。
如果图像的名称前面没有“＃”，则暗示图像应该通过其名称从绑定的图像集合加载。使用控件的HtmlImages属性提供图像集合（ImageCollection或SvgImageCollection）。 支持图像标记的以下属性。 size - 设置图像的显示大小。 align - 指定图像相对于文本的垂直对齐方式。可能的值：顶部，底部和中心。 必须在标记的值之后指定属性，然后是“;” 字符。它们必须用“;”分隔，并指定不带空格。 下面列出了接受图像标记并提供HtmlImages属性的控件和组件。
|
| <href=value> Example: <href=www.devexpress.com>Our web site</href> | </href> | 显示超链接。的值字符串指定的超级链接源，以及打开和关闭标签之间的字符串是要被显示的文本。对于能够通过此标记显示超链接的控件，单击超链接将触发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<br>" +
"<b>粗体</b> <i>斜体</i> <u>下划线</u><br>" +
"<size=11>Size = 11<br>" +
"<image=#tao><br>"+//在Resource.resx里面添加图片资源
"<image=dev.png><br>"+//利用ImageCollection组件添加图片，并且labelcontrol的htmlImages属性绑定该ImageCollection
"<color=255, 0, 0>简单文本</color></size><br>" +
"<href=https://blog.youkuaiyun.com/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.youkuaiyun.com/u012097590>优快云博客</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;
}
}
}效果图：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
