如何给wp(Windows phone)中搜索关键字加亮？

问题来源

最近在群里看到群友讨论在wp中有个搜索功能，要求搜索关键字在搜索结果内容中加亮(即加颜色),由于wp中没有自带这样的控件，于是大家各抒自见，有人说用第三方控件，有人说用richtextbox，也有人说用textblock和run！那究竟哪种实现比较好呢？个人看法，当然是用textblock和run实现起来是最方便的！

实现要求

1、给出关键字(如：我,购物,菜鸟,技术),关键字可以一个或者多个，多个用英文逗号隔开

2、能在搜索结果中对关键字进行加亮

3、能自定义加亮的颜色

4、要求复用性高

实现思路

如果要实现上面三点需求，首先我们想到是使用用户控件实现起来最好了，第一，二，三点分别用一个依赖属性表示，而第四点，既然是用户控件，作为一个控件，当然复用性强！

所以使用用户控件是再适合不过了！

材料准备

首先当然是在vs中新建一个wp的项目，然后添加一个用户控件的页面，这个估计不用我多说了，大家都会的了！在这里我新增一个HighlightControl的用户控件页面，在界面上添加一个TextBlock，命名为tbResult，打开codebehind，分别添加三个依赖属性，分别是TextProperty(搜索结果),HighlightWordProperty(关键字),HighlightWordColorProperty(加亮颜色)，然后添加对应的包装属性，再添加回调方法！这些应该不用详解吧，学过wpf或者silverlight对这些应该很了解了！如果不懂可以评论问问！

 

下面贴出用户控件codebehind相应代码

 

  1  public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(HighlightControl), new PropertyMetadata(new PropertyChangedCallback(HighlightControl.OnTextChanged)));
  2         public static readonly DependencyProperty HighlightWordProperty = DependencyProperty.Register("HighlightWord", typeof(string), typeof(HighlightControl), new PropertyMetadata(new PropertyChangedCallback(HighlightControl.OnHighlightWordChanged)));
  3         public static readonly DependencyProperty HighlightWordColorProperty = DependencyProperty.Register("HighlightWordColor", typeof(SolidColorBrush), typeof(HighlightControl), new PropertyMetadata(new SolidColorBrush(Color.FromArgb(255, 0, 155, 227)), new PropertyChangedCallback(HighlightControl.OnHighlightWordColorChanged)));
  4 
  5         public string Text
  6         {
  7             get
  8             {
  9                 return (string)base.GetValue(HighlightControl.TextProperty);
 10             }
 11             set
 12             {
 13                 base.SetValue(HighlightControl.TextProperty, value);
 14             }
 15         }
 16 
 17         public SolidColorBrush HighlightWordColor
 18         {
 19             get
 20             {
 21                 return (SolidColorBrush)base.GetValue(HighlightControl.HighlightWordColorProperty);
 22             }
 23             set
 24             {
 25                 base.SetValue(HighlightControl.HighlightWordColorProperty, value);
 26             }
 27         }
 28 
 29         public string HighlightWord
 30         {
 31             get
 32             {
 33                 return (string)base.GetValue(HighlightControl.HighlightWordProperty);
 34             }
 35             set
 36             {
 37                 base.SetValue(HighlightControl.HighlightWordProperty, value);
 38             }
 39         }
 40 
 41 
 42         private static void OnTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
 43         {
 44             HighlightControl control = d as HighlightControl;
 45             if (e.NewValue == e.OldValue)
 46             {
 47                 return;
 48             }
 49             HighlightControl.UpdateHighlight(control);
 50         }
 51 
 52         private static void OnHighlightWordChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
 53         {
 54             HighlightControl control = d as HighlightControl;
 55             HighlightControl.UpdateHighlight(control);
 56         }
 57 
 58         private static void OnHighlightWordColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
 59         {
 60             HighlightControl control = d as HighlightControl;
 61             HighlightControl.UpdateHighlight(control);
 62         }
 63 
 64 
 65 
 66 
 67 
 68         private static void UpdateHighlight(HighlightControl control)
 69         {
 70             if (control == null)
 71             {
 72                 return;
 73             }
 74             TextBlock textBlock = control.tbResult;
 75             if (textBlock.Inlines.Count() > 0)
 76             {
 77                 textBlock.Inlines.Clear();
 78             }
 79             //如果高亮为空，直接显示
 80             if (string.IsNullOrEmpty(control.HighlightWord))
 81             {
 82                 Run run = new Run();
 83                 run.Text = control.Text;
 84                 textBlock.Inlines.Add(run);
 85                 return;
 86             }
 87             string text = control.Text;
 88             if (string.IsNullOrEmpty(text))
 89             {
 90                 return;
 91             }
 92             TextBlock tempTextBlock = new TextBlock();//中间变量，方便run交换
 93             string[] hightwordArray = control.HighlightWord.Split(',');
 94             List<Run> listHightRun = new List<Run>();//添加已经加亮的run，方便判断
 95             for (int i = 0; i < hightwordArray.Length; i++)
 96             {
 97                 if (hightwordArray[i] == "") continue;//这个是放在关键字中有""，导致死循环
 98 
 99                 if (i == 0)
100                 {
101                     for (int num = text.IndexOf(hightwordArray[i], 0); num != -1; num = text.IndexOf(hightwordArray[i], 0))
102                     {
103                         //  MessageBox.Show(num.ToString());
104                         if (num != 0)
105                         {
106                             Run run2 = new Run();
107                             run2.Text = text.Substring(0, num);
108                             // textBlock.Inlines.Add(run2);
109                             tempTextBlock.Inlines.Add(run2);
110 
111                         }
112                         Run run3 = new Run();
113                         run3.Text = text.Substring(num, hightwordArray[i].Length);
114                         run3.Foreground = control.HighlightWordColor;
115                         listHightRun.Add(run3);
116                         //textBlock.Inlines.Add(run3);
117                         tempTextBlock.Inlines.Add(run3);
118                         text = text.Substring(num + hightwordArray[i].Length);
119                         // MessageBox.Show(text);
120                     }
121                     if (!string.IsNullOrEmpty(text))
122                     {
123                         Run run4 = new Run();
124                         run4.Text = text;
125                         tempTextBlock.Inlines.Add(run4);//剩下没有被加亮的文字，加到一个run
126                     }
127 
128                 }
129                 else
130                 {
131                     // text = control.Text;
132                     //  MessageBox.Show("要遍历textBlock长度：" + textBlock.Inlines.Count.ToString());
133                     for (int j = 0; j < textBlock.Inlines.Count; j++)
134                     {
135                         if (listHightRun.Any(h => h.Equals((textBlock.Inlines[j] as Run))))//如果是一个加亮的run，那就不需要遍历了
136                         {
137                             // MessageBox.Show("jin" + (textBlock.Inlines[j] as Run).Text);
138                             Run runExist = (textBlock.Inlines[j] as Run);
139                             textBlock.Inlines.Remove(textBlock.Inlines[j]);
140                             tempTextBlock.Inlines.Add(runExist);
141                             j--;
142                             //  MessageBox.Show("移除元素后textBlock长度：" + textBlock.Inlines.Count + "  j： " + j);
143                             continue;
144                         }
145                         string tempStr = (textBlock.Inlines[j] as Run).Text;
146                         for (int num = tempStr.IndexOf(hightwordArray[i], 0); num != -1; num = tempStr.IndexOf(hightwordArray[i], 0))
147                         {
148                             //MessageBox.Show("要遍历的字符串："+tempStr);
149                             //MessageBox.Show("关键字是否存在:"+num.ToString());
150                             //MessageBox.Show("关键字："+hightwordArray[i]);
151                             if (num != 0)
152                             {
153                                 Run run2 = new Run();
154                                 run2.Text = tempStr.Substring(0, num);
155 
156                                 tempTextBlock.Inlines.Add(run2);
157                             }
158                             Run run3 = new Run();
159                             run3.Text = tempStr.Substring(num, hightwordArray[i].Length);
160                             run3.Foreground = control.HighlightWordColor;
161                             listHightRun.Add(run3);
162                             tempTextBlock.Inlines.Add(run3);
163                             tempStr = tempStr.Substring(num + hightwordArray[i].Length);
164                             // (textBlock.Inlines[j] as Run).Text = (textBlock.Inlines[j] as Run).Text.Substring(num + hightwordArray[i].Length);
165                         }
166                         if (!string.IsNullOrEmpty(tempStr))//剩下没有被加亮的文字，加到一个run
167                         {
168                             Run run4 = new Run();
169                             run4.Text = tempStr;
170                             tempTextBlock.Inlines.Add(run4);
171                         }
172                     }
173                 }
174                 textBlock.Inlines.Clear();
175 
176                 int k = 0;
177                 while (k < tempTextBlock.Inlines.Count)
178                 {
179                     Run tempRun = tempTextBlock.Inlines[k] as Run;
180                     tempTextBlock.Inlines.Remove(tempTextBlock.Inlines[k]);
181                     textBlock.Inlines.Add(tempRun);
182                     k = 0;
183 
184                 }
185 
186                 //tempTextBlock.Inlines.Clear();
187 
188             }
189 
190 
191 
192         }

 

测试页面代码

 

 1    <!--LayoutRoot 是包含所有页面内容的根网格-->
 2     <Grid x:Name="LayoutRoot" Background="Transparent">
 3         <Grid.RowDefinitions>
 4             <RowDefinition Height="Auto"/>
 5             <RowDefinition Height="*"/>
 6         </Grid.RowDefinitions>
 7 
 8     
 9 
10         <!--TitlePanel 包含应用程序的名称和页标题-->
11         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
12             <TextBlock Text="我的应用程序" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
13             <TextBlock Text="页面名称" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
14         </StackPanel>
15 
16         <!--ContentPanel - 在此处放置其他内容-->
17         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
18             
19             <control:HighlightControl Text="这是一个显示加亮在搜索结果中的关键字的用户控件" HighlightWord="高,的,这是,测试,亮,段" HighlightWordColor="Red">
20                 
21             </control:HighlightControl>
22 
23         </Grid>
24 
25        
26     </Grid>

 


整个实现大概就是这样，最后截一张图给大家看看。

 

 

总结

问题总有解决的方法的，很多你看似是比较困难的事情，其实都是由最基础的知识去一步步分解出来解决的，所以善于思考，举一反三，才是快速解决问题的根本途径！

posted @ 2014-12-13 10:24  技术_菜鸟  阅读(1379)  评论(2)  编辑  收藏  举报