WPF使用TextBlock实现查找结果高亮显示.docx

第

WPF使用TextBlock实现查找结果高亮显示

在应用开发过程中，经常遇到这样的需求：通过关键字查找数据，把带有关键字的数据显示出来，同时在结果中高亮显示关键字。在web开发中，只需在关键字上加一层标签，然后设置标签样式就可以轻松实现。

在WPF中显示文本内容通常采用TextBlock控件，也可以采用类似的方式，通过内联流内容元素Run达到同样的效果：

TextBlockFontSize=20

RunText=Hel/RunForeground=RedText=lo/RunText=Word/

/TextBlock

需要注意的是每个Run之间不要换行，如果换行的话，每个Run之间会有间隙，看起来像增加了空格。

通过这种方式实现查找结果中高亮关键字，需要把查找结果拆分成三部分，然后绑定到Run元素的Text属性，或者在后台代码中使用TextBlock的Inlines属性添加Run元素

textBlock1.Inlines.Add(newRun(hel));

textBlock1.Inlines.Add(newRun(lo){Foreground=newSolidColorBrush(Colors.Red)});

textBlock1.Inlines.Add(newRun(world));

这种方法虽然可以达到效果，但显然与MVVM的思想不符。接下来本文介绍一种通过附加属性实现TextBlock中指定内容高亮。

技术要点与实现

通过TextEffect的PositionStart、PositionCount以及Foreground属性设置字符串中需要高亮内容的起始位置、长度以及高亮颜色。定义附加属性允许TextBlock设置需要高亮的内容位置以及颜色。

首先定义类ColoredLettering(并不要求继承DependencyObject)。

在ColoredLettering中注册自定义的附加属性，注册附加属性方式与注册依赖属性类似，不过附加属性是用DependencyProperty.RegisterAttached来注册。

给附加属性注册属性值变化事件，事件处理逻辑中设置TextEffect的PositionStart、PositionCount以及Foreground实现内容高亮。

publicclassColoredLettering

publicstaticvoidSetColorStart(TextBlocktextElement,intvalue)

textElement.SetValue(ColorStartProperty,value);

publicstaticintGetColorStart(TextBlocktextElement)

return(int)textElement.GetValue(ColorStartProperty);

//UsingaDependencyPropertyasthebackingstoreforColorStart.Thisenablesanimation,styling,binding,etc...

publicstaticreadonlyDependencyPropertyColorStartProperty=

DependencyProperty.RegisterAttached(ColorStart,typeof(int),typeof(ColoredLettering),newFrameworkPropertyMetadata(0,OnColorStartChanged));

privatestaticvoidOnColorStartChanged(DependencyObjectd,DependencyPropertyChangedEventArgse)

TextBlocktextBlock=dasTextBlock;

if(textBlock!=null)

if(e.NewValue==e.OldValue)return;

if(e.NewValueisint)

intcount=GetColorLength(textBlock);

Brushbrush=GetForeColor(textBlock);

if((int)e.NewValue=0||count