[WPF]用HtmlTextBlock实现消息对话框的内容高亮和跳转

wpf,htmltextblock · 浏览次数 : 0

小编点评

本文介绍了在WPF中实现消息对话框中局部文字内容高亮和部分内容交互性的方法。首先,我们可以使用WPF的HtmlTextBlock控件来显示带有高亮的文字。但是,这个控件无法满足部分内容需要跳转到指定页面的需求。为了解决这个问题,我们可以使用一个更强大的控件——HtmlView。 HtmlView是一个WPF控件,它允许我们在WPF应用程序中嵌入HTML内容。通过使用HtmlView,我们可以实现以下功能: 1. 部分关键字高亮:我们可以在HTML内容中使用``标签并添加样式属性来高亮显示关键字。 2. 跳转链接:我们可以通过在HTML内容中使用``标签并设置`href`属性来实现链接跳转。 下面是一个简单的示例,演示了如何在WPF消息对话框中使用HtmlView控件实现局部文字内容高亮和部分内容交互性。 1. 在XAML文件中添加HtmlView控件: ```xml ``` 2. 在C#代码中实现消息对话框的功能: ```csharp using System; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; namespace MessageDialogExample { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void ShowAlertDialog(AlertDialogMode mode, AlertDialogType type, string content, string yesButtonText, string noButtonText, object parent) { var dialog = new AlertDialog { Mode = mode, Type = type, Content = content, YesButtonText = yesButtonText, NoButtonText = noButtonText, Parent = parent as IInputElement }; dialog.ShowDialog(); if (dialog.Result == true) { // Do something when the user clicks thePositiveButton } } } } ``` 3. 在用户界面中调用消息对话框: ```csharp private void Button_Click(object sender, RoutedEventArgs e) { ShowAlertDialog(AlertDialogMode.Normal, AlertDialogType.Info, "打开[a href=https://www.chinadaily.com.cn/]中国日报[/a]网站", "确定", "取消", this); } ``` 在这个示例中,我们创建了一个简单的消息对话框,其中包含一个HtmlView控件用于显示HTML内容。当用户点击按钮时,会触发`ShowAlertDialog`方法,并传入相应的参数以显示消息对话框。在消息对话框中,我们可以使用`HtmlView`控件来显示带有高亮的文字和链接。

正文

动手写一个简单的消息对话框一文介绍了如何实现满足常见应用场景的消息对话框。但是内容区域的文字仅仅起到信息展示作用,对于需要部分关键字高亮,或者部分内容有交互性的场景(例如下图提示信息中的“what's the risk?”需要跳转)则无能为力了。本文将介绍如何在WPF中灵活的实现消息对话框中局部文字内容高亮或者支持跳转。
image

HtmlTextBlock的使用

在WPF中,可以采用<Run>或者TextEffect实现文字中部分关键字高亮,但无法同时满足部分内容支持链接跳转功能 。如果能直接使用HTML,问题就迎刃而解了,但是在消息对话框的内容区域放一个webbrowser或cef浏览器有点太臃肿了。WPF HTML Supported TextBlock分享了一个支持有限HTML标签的WPF控件。该控件可以支持<b>,<u>,<i>,<a>,<br>,<font>标签,派生自TextBlock控件,并新增了一个依赖属性HtmlProperty接收需要展现的html内容,使用时需要把html内容字符串中的<>[]代替。

Content="[font color=red]红色[/font]文字高亮";

<toolkit:HtmlTextBlock Margin="0,0,0,0" FontSize="18"
					   HorizontalAlignment="Center" VerticalAlignment="Center" 
					   Html="{Binding Content}" />

需要注意的是,用Html绑定的内容中如果包含成对的英文方括号[]都会被当做标签处理,无论是否是上述支持的六种标签,都不会显示出来。中文方括号【】或者单个的英文方括号则会作为内容直接显示出来。如果用Text绑定内容则全部当成内容显示出来。

修改消息对话框

动手写一个简单的消息对话框中内容区域是使用可选中文本的控件SelectableTextBlock显示内容,只需全部替换为HtmlTextBlock,并用依赖属性HtmlProperty绑定内容即可。调用的时候只需把内容改为带标签的内容即可。例如:

 ShowAlertDialog(AlertDialogMode.Normal, AlertDialogType.Info, "打开[a href=https://www.chinadaily.com.cn/]中国日报[/a]网站", yesbuttonText: "确定", nobuttonText: "取消", parent: this);

但在使用<a>标签实现链接跳转时并没有用浏览器打开指定页面,调试过程中发现以下关键代码,可以看到HtmlTextBlock是把<a>转换为Hyperlink控件,并把href中的url赋值给NavigateUri达到跳转效果。

private Inline UpdateElement(HtmlTag aTag)
{
  Inline retVal = null;

  switch (aTag.Name)
  {
    case "text" :
      retVal = new Run(aTag["value"]);
      if (currentState.Bold) retVal = new Bold(retVal);
      if (currentState.Italic) retVal = new Italic(retVal);
      if (currentState.Underline) retVal = new Underline(retVal);
      break;
    case "br" :
      retVal = new LineBreak();
      break;
  }

  if (currentState.HyperLink != null && currentState.HyperLink != "")
  {
    Hyperlink link = new Hyperlink(retVal);
    link.NavigateUri = new Uri(currentState.HyperLink);
    retVal = link;
  }
   return retVal;
}

然而,只有 Hyperlink的直接或间接父级为导航宿主时,Hyperlink才能导航到NavigateUri属性的值,导航宿主包括System.Windows.Navigation.NavigationWindowSystem.Windows.Controls.Frame或任何可承载 XBAP 的浏览器(包括 Internet Explorer 7、Microsoft Internet Explorer 6 和 Firefox2.0 以上版本)。因此,需要对这段代码稍作修改。

if (currentState.HyperLink != null && currentState.HyperLink.Length > 0)
{
	Hyperlink link = new Hyperlink(retVal);
	try
	{
		link.Click += new RoutedEventHandler((s, e) =>
		{
			Process.Start(new ProcessStartInfo((s as Hyperlink).NavigateUri.AbsoluteUri));
			e.Handled = true;
		});
	}
	catch(Exception ex)
	{
		.....
	}
	retVal = link;
}

与[WPF]用HtmlTextBlock实现消息对话框的内容高亮和跳转相似的内容:

[WPF]用HtmlTextBlock实现消息对话框的内容高亮和跳转

动手写一个简单的消息对话框一文介绍了如何实现满足常见应用场景的消息对话框。但是内容区域的文字仅仅起到信息展示作用,对于需要部分关键字高亮,或者部分内容有交互性的场景(例如下图提示信息中的“what's the risk?”需要跳转)则无能为力了。本文将介绍如何在WPF中灵活的实现消息对话框中局部文字

WPF使用Shape实现复杂线条动画

看到巧用 CSS/SVG 实现复杂线条光效动画的文章,便也想尝试用WPF的Shape配合动画实现同样的效果。ChokCoco大佬的文章中介绍了基于SVG的线条动画效果和通过角向渐变配合 MASK 实现渐变线条两种方式。WPF中的Shape与SVG非常相似,因此这种方式也很容易实现。但WPF中仅有的两

WPF实现类似ChatGPT的逐字打印效果

###背景 前一段时间ChatGPT类的应用十分火爆,这类应用在回答用户的问题时逐字打印输出,像极了真人打字回复消息。出于对这个效果的兴趣,决定用WPF模拟这个效果。 >真实的ChatGPT逐字输出效果涉及其语言生成模型原理以及服务端与前端通信机制,本文不做过多阐述,重点是如何用WPF模拟这个效果。

在WPF中使用WriteableBitmap对接工业相机及常用操作

写作背景 写这篇文章主要是因为工业相机(海康、大恒等)提供的.NET开发文档和示例程序都是用WinForm项目来说明举例的,而在WPF项目中对图像的使用和处理与在WinForm项目中有很大不同。在WinForm中用System.Drawing.Bitmap来处理图像,而在WPF中是用System.W

【.NET深呼吸】用代码写WPF控件模板

这一次咱们来探究一下怎么用纯代码写 WPF 模板。模板有个共同基类 FrameworkTemplate,数据模板、控件模板等是从此类派生的,因此,该类已定义了一些通用成员。 用代码构建模板,重要的成员是 VisualTree 属性,它的类型是 FrameworkElementFactory。可见,模

5款开源、美观、强大的WPF UI组件库

前言 经常看到有小伙伴在DotNetGuide技术社区交流群里提问:WPF有什么好用或者好看的UI组件库?,今天大姚给大家分享5款开源、美观、强大、简单易用的WPF UI组件库。 WPF介绍 WPF 是一个强大的桌面应用程序框架,用于构建具有丰富用户界面的 Windows 应用。它提供了灵活的布局、

WPF使用AppBar实现窗口停靠,适配缩放、全屏响应和多窗口并列(附封装好即开即用的附加属性)

在吕毅大佬的文章中已经详细介绍了什么是AppBar: WPF 使用 AppBar 将窗口停靠在桌面上,让其他程序不占用此窗口的空间(附我封装的附加属性) - walterlv 即让窗口固定在屏幕某一边,并且保证其他窗口最大化后不会覆盖AppBar占据的区域(类似于Windows任务栏)。 但是在我的

Simple WPF: WPF实现一个MINIO等S3兼容对象存储上传文件的小工具

之前在阿里云ECS 99元/年的活动实例上搭建了一个测试用的MINIO服务,以前都是直接当基础设施来使用的,这次准备自己学一下S3兼容API相关的对象存储开发,因此有了这个小工具。目前仅包含上传功能,后续计划开发一个类似图床的对象存储应用。

循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(5) -- 树列表TreeView的使用

在我们展示一些参考信息的时候,有所会用树形列表来展示结构信息,如对于有父子关系的多层级部门机构,以及一些常用如字典大类节点,也都可以利用树形列表的方式进行展示,本篇随笔介绍基于WPF的方式,使用TreeView来洗实现结构信息的展示,以及对它的菜单进行的设置、过滤查询等功能的实现逻辑。

你们眼睛干涩,胀痛吗?C# WPF 久坐提醒桌面小程序 - 内附 眼肌运动、远视力表高清图

目录说明设置提醒时间,及休息时间久坐提醒倒计时休息提醒倒计时休息到计时代码说明主窗体设置工作到计时休息倒计时源码高清图 久坐提醒桌面小程序: 干这行职业病比较多,之前用爱丽(即:玻璃酸钠滴眼液),用的时候挺舒服,缓解吧,不过治标不治本。 注意休息,加强锻炼非常有必要,每工作1小时,休息10分钟(程序