如何给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相应代码
public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(HighlightControl), new PropertyMetadata(new PropertyChangedCallback(HighlightControl.OnTextChanged)));
public static readonly DependencyProperty HighlightWordProperty = DependencyProperty.Register("HighlightWord", typeof(string), typeof(HighlightControl), new PropertyMetadata(new PropertyChangedCallback(HighlightControl.OnHighlightWordChanged)));
public static readonly DependencyProperty HighlightWordColorProperty = DependencyProperty.Register("HighlightWordColor", typeof(SolidColorBrush), typeof(HighlightControl), new PropertyMetadata(new SolidColorBrush(Color.FromArgb(, , , )), new PropertyChangedCallback(HighlightControl.OnHighlightWordColorChanged))); public string Text
{
get
{
return (string)base.GetValue(HighlightControl.TextProperty);
}
set
{
base.SetValue(HighlightControl.TextProperty, value);
}
} public SolidColorBrush HighlightWordColor
{
get
{
return (SolidColorBrush)base.GetValue(HighlightControl.HighlightWordColorProperty);
}
set
{
base.SetValue(HighlightControl.HighlightWordColorProperty, value);
}
} public string HighlightWord
{
get
{
return (string)base.GetValue(HighlightControl.HighlightWordProperty);
}
set
{
base.SetValue(HighlightControl.HighlightWordProperty, value);
}
} private static void OnTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
HighlightControl control = d as HighlightControl;
if (e.NewValue == e.OldValue)
{
return;
}
HighlightControl.UpdateHighlight(control);
} private static void OnHighlightWordChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
HighlightControl control = d as HighlightControl;
HighlightControl.UpdateHighlight(control);
} private static void OnHighlightWordColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
HighlightControl control = d as HighlightControl;
HighlightControl.UpdateHighlight(control);
} private static void UpdateHighlight(HighlightControl control)
{
if (control == null)
{
return;
}
TextBlock textBlock = control.tbResult;
if (textBlock.Inlines.Count() > )
{
textBlock.Inlines.Clear();
}
//如果高亮为空,直接显示
if (string.IsNullOrEmpty(control.HighlightWord))
{
Run run = new Run();
run.Text = control.Text;
textBlock.Inlines.Add(run);
return;
}
string text = control.Text;
if (string.IsNullOrEmpty(text))
{
return;
}
TextBlock tempTextBlock = new TextBlock();//中间变量,方便run交换
string[] hightwordArray = control.HighlightWord.Split(',');
List<Run> listHightRun = new List<Run>();//添加已经加亮的run,方便判断
for (int i = ; i < hightwordArray.Length; i++)
{
if (hightwordArray[i] == "") continue;//这个是放在关键字中有"",导致死循环 if (i == )
{
for (int num = text.IndexOf(hightwordArray[i], ); num != -; num = text.IndexOf(hightwordArray[i], ))
{
// MessageBox.Show(num.ToString());
if (num != )
{
Run run2 = new Run();
run2.Text = text.Substring(, num);
// textBlock.Inlines.Add(run2);
tempTextBlock.Inlines.Add(run2); }
Run run3 = new Run();
run3.Text = text.Substring(num, hightwordArray[i].Length);
run3.Foreground = control.HighlightWordColor;
listHightRun.Add(run3);
//textBlock.Inlines.Add(run3);
tempTextBlock.Inlines.Add(run3);
text = text.Substring(num + hightwordArray[i].Length);
// MessageBox.Show(text);
}
if (!string.IsNullOrEmpty(text))
{
Run run4 = new Run();
run4.Text = text;
tempTextBlock.Inlines.Add(run4);//剩下没有被加亮的文字,加到一个run
} }
else
{
// text = control.Text;
// MessageBox.Show("要遍历textBlock长度:" + textBlock.Inlines.Count.ToString());
for (int j = ; j < textBlock.Inlines.Count; j++)
{
if (listHightRun.Any(h => h.Equals((textBlock.Inlines[j] as Run))))//如果是一个加亮的run,那就不需要遍历了
{
// MessageBox.Show("jin" + (textBlock.Inlines[j] as Run).Text);
Run runExist = (textBlock.Inlines[j] as Run);
textBlock.Inlines.Remove(textBlock.Inlines[j]);
tempTextBlock.Inlines.Add(runExist);
j--;
// MessageBox.Show("移除元素后textBlock长度:" + textBlock.Inlines.Count + " j: " + j);
continue;
}
string tempStr = (textBlock.Inlines[j] as Run).Text;
for (int num = tempStr.IndexOf(hightwordArray[i], ); num != -; num = tempStr.IndexOf(hightwordArray[i], ))
{
//MessageBox.Show("要遍历的字符串:"+tempStr);
//MessageBox.Show("关键字是否存在:"+num.ToString());
//MessageBox.Show("关键字:"+hightwordArray[i]);
if (num != )
{
Run run2 = new Run();
run2.Text = tempStr.Substring(, num); tempTextBlock.Inlines.Add(run2);
}
Run run3 = new Run();
run3.Text = tempStr.Substring(num, hightwordArray[i].Length);
run3.Foreground = control.HighlightWordColor;
listHightRun.Add(run3);
tempTextBlock.Inlines.Add(run3);
tempStr = tempStr.Substring(num + hightwordArray[i].Length);
// (textBlock.Inlines[j] as Run).Text = (textBlock.Inlines[j] as Run).Text.Substring(num + hightwordArray[i].Length);
}
if (!string.IsNullOrEmpty(tempStr))//剩下没有被加亮的文字,加到一个run
{
Run run4 = new Run();
run4.Text = tempStr;
tempTextBlock.Inlines.Add(run4);
}
}
}
textBlock.Inlines.Clear(); int k = ;
while (k < tempTextBlock.Inlines.Count)
{
Run tempRun = tempTextBlock.Inlines[k] as Run;
tempTextBlock.Inlines.Remove(tempTextBlock.Inlines[k]);
textBlock.Inlines.Add(tempRun);
k = ; } //tempTextBlock.Inlines.Clear(); } }
测试页面代码
<!--LayoutRoot 是包含所有页面内容的根网格-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions> <!--TitlePanel 包含应用程序的名称和页标题-->
<StackPanel x:Name="TitlePanel" Grid.Row="" Margin="12,17,0,28">
<TextBlock Text="我的应用程序" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="页面名称" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel> <!--ContentPanel - 在此处放置其他内容-->
<Grid x:Name="ContentPanel" Grid.Row="" Margin="12,0,12,0"> <control:HighlightControl Text="这是一个显示加亮在搜索结果中的关键字的用户控件" HighlightWord="高,的,这是,测试,亮,段" HighlightWordColor="Red"> </control:HighlightControl> </Grid> </Grid>
整个实现大概就是这样,最后截一张图给大家看看。
总结
问题总有解决的方法的,很多你看似是比较困难的事情,其实都是由最基础的知识去一步步分解出来解决的,所以善于思考,举一反三,才是快速解决问题的根本途径!
如何给wp(Windows phone)中搜索关键字加亮?的更多相关文章
- Linux:从文件中搜索关键字并显示行数(cat,grep函数)
假如有test1.txt的格式如下图所示: 有test2.txt的内容如下: 现需将test2.txt含有的关键字的行搜索出来并显示行数 则可以用到命令: cat test1.txt | grep - ...
- Linux vi 中搜索关键字
当你用vi打开一个文件后,因为文件太长,如何才能找到你所要查找的关键字呢? 在vi里可没有菜单-〉查找 不过没关系,可以在命令模式下敲斜杆( / )这时在状态栏(也就是屏幕左下脚)就出现了 “/” 然 ...
- Jquery在表格中搜索关键字
<!DOCTYPE html><html><head> <title>ddd</title></head><body> ...
- linux中在某个目录下多个文件中搜索关键字
有四种方法: find 文件目录 -name '*.*' -exec grep 'xxx' {} + -n 或是 find 文件目录 -name '*.*' | xargs grep 'xxx' -n ...
- 在 Angular 中实现搜索关键字高亮
在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...
- LoadRunner如何获得参数化中每个关键字的搜索响应时间
LoadRunner如何获得参数化中每个关键字的搜索响应时间 在测试搜索引擎时我们一般采用大量的搜索关键字,有时有必要了解在并发访问的情况下每个关键字的响应时间,一般如果不对脚本进行处理的话你可以获得 ...
- Asp.net 中高亮显示搜索关键字简单方法
今天用到搜索时的高亮显示,百度了一下,如下面: 1.替换关键字,对字体变色. public static string ReplaceRed(string strtitle, stri ...
- 搜索sqlserver 存储过程中的关键字
搜索sqlserver 存储过程中的关键字 select * from sys.all_sql_modules where definition like '%SP_NAME%'
- react项目中实现搜索关键字呈现高亮状态(一)
最近有个需求,在一个react项目中,实现搜索关键字呈现高亮状态.这个在普通的html文件中还好操作些,在react项目中有点懵逼了,因为react项目中很少操作dom,有点无从下手.但最后还是实现了 ...
随机推荐
- MySQL LOCK TABLES 与UNLOCK TABLES
http://blog.csdn.net/zyz511919766/article/details/16342003 1语法 LOCK TABLES tbl_name[[AS] alias] lock ...
- unity3DGI
Realtime GI,实时全局光照, 1.构成 : 可实时更新的lightmap + 可实时更新的光照探头(light probe)+ 可实时更新的cubemap(Reflection probe) ...
- python第一类对象,闭包,迭代器
一.第一类对象 第一类对象 -> 函数名 -> 变量名 1.特征: 函数对象可以像变量一样进行赋值 还可以作为列表的元素进行使用 还可以作为返回值返回 还可 ...
- 2018.11.01 NOIP训练 cost数(搜索+容斥原理)
传送门 唉考试的时候忘记剪倍数的枝了666666分滚粗. 其实就是一直取lcmlcmlcm搜索,然后容斥原理统计就行了. 代码
- 2018.10.31 bzoj3339&&3585mex(主席树)
传送门 双倍经验 直接上主席树,每个叶节点维护这个值出现的最右区间,非叶子节点维护当前值域内所有最右区间的最小值. 查询的时候只用在以root[qr]root[qr]root[qr]为根的树上面二分. ...
- dex2jar 和 jd-gui 的安装与使用(转)
出处:https://blog.csdn.net/katrinawj/article/details/80016315 将APK直接解压(修改后缀名为.zip,然后解压)后,可以看到目录下包含一个cl ...
- python code(1)
from collections import UserList class MthChianList(UserList): def filter(self,predicste): return Mt ...
- TCP/IP协议(1):各层协议帧格式
一. 1.OSI与TCP/IP对应: TCP/IP各层功能: 链路层:包括操作系统的设备驱动程序和计算机的网卡,提供底层传输服务. 网络层:为数据选择路由,在众多计算机和网络设备组成的网络中选择一 ...
- Livelock
Unlike deadlock, livelocked packets continue to move through the network, but never reach their dest ...
- vue +bootstrap 写的小例子
最近vue挺火,最近也不是特别忙,就学习了下. vue和angular非常像都是MVVM.道理都是想通的,就是语法的差异 我觉得vue和angular区别: 1.vue更轻,更便捷,适用于移动开发 2 ...