问题来源
最近在群里看到群友讨论在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>
整个实现大概就是这样,最后截一张图给大家看看。
总结
问题总有解决的方法的,很多你看似是比较困难的事情,其实都是由最基础的知识去一步步分解出来解决的,所以善于思考,举一反三,才是快速解决问题的根本途径!