Windows Phone 7(WP7)开发 AutoCompletedBox制作中文城市名称输入框

Toolkit里的AutoCompletedBox默认的功能已经很强大了，做一个英文城市或者英文单词的提示，可以直接指定FilterMode为AutoCompleteFilterMode.SartsWith（或者其它更合适的过滤器）。

对于自带的FilterMode，请参见MSDN：http://msdn.microsoft.com/zh-cn/library/system.windows.controls.autocompletefiltermode(VS.95).aspx

但是对于中文城市名称过滤来说，恐怕还需要进一步修改。原因如下，由于我们的用户使用的输入可能是中文键盘，举一个很简单的例子来说：用户想找“北京”的时候，他输入[beijing,bei,b,北]都是需要提示的，注意，最后那个是中文，这个时候，就需要亲手来写一些代码啦。

先上个效果图：

首先是Model类<喎?http://www.zzzyk.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPg0KCSZuYnNwOzwvcD4NCjxwPg0KCXB1YmxpYyBjbGFzcyBDaXR5TW9kZWw6QmFzZU1vZGVsPC9wPg0KPHA+DQoJezwvcD4NCjxwPg0KCXByaXZhdGUgc3RyaW5nIF9jaXR5TmFtZSA9ICZxdW90OyZxdW90Ozs8L3A+DQo8cD4NCglwcml2YXRlIHN0cmluZyBfcGlueWluID0gJnF1b3Q7JnF1b3Q7OzwvcD4NCjxwPg0KCXB1YmxpYyBzdHJpbmcgQ2l0eU5hbWU8L3A+DQo8cD4NCgl7PC9wPg0KPHA+DQoJZ2V0IHsgcmV0dXJuIF9jaXR5TmFtZTsgfTwvcD4NCjxwPg0KCXNldDwvcD4NCjxwPg0KCXs8L3A+DQo8cD4NCglfY2l0eU5hbWUgPSB2YWx1ZTs8L3A+DQo8cD4NCglPbk5vdGlmeVByb3BlcnR5Q2hhbmdlZCgmcXVvdDtDaXR5TmFtZSZxdW90Oyk7PC9wPg0KPHA+DQoJfTwvcD4NCjxwPg0KCX08L3A+DQo8cD4NCglwdWJsaWMgc3RyaW5nIFBpbnlpbjwvcD4NCjxwPg0KCXs8L3A+DQo8cD4NCglnZXQgeyByZXR1cm4gX3BpbnlpbjsgfTwvcD4NCjxwPg0KCXNldCB7IF9waW55aW4gPSB2YWx1ZTsgfTwvcD4NCjxwPg0KCX08L3A+DQo8cD4NCgl9PC9wPg0KPHA+DQoJTW9kZWzA4LrcvPK1paOsvs0yuPbK9NDUo6xDaXR5TmFtZc6q1tDOxMP7s8ajrFBpbnlpbqOo4MWjrMi3yrXKx8a00vQmaGVsbGlwOyZoZWxsaXA7o6nOqrPHytC1xMa00vTD+6GjPC9wPg0KPHA+DQoJJm5ic3A7PC9wPg0KPHA+DQoJJm5ic3A7PC9wPg0KPHA+DQoJzqrBy8q1z9bJz8281tBJdGVtc7XEz9TKvtCnufujrM7Sw8fQ6NKqttTG5MSjsOa9+NDQ0N64xKOsvt/M5VhBTUzI58/Co7o8L3A+DQo8cD4NCgkmbHQ7cGhvbmU6UGhvbmVBcHBsaWNhdGlvblBhZ2UuUmVzb3VyY2VzJmd0OzwvcD4NCjxwPg0KCSZsdDtEYXRhVGVtcGxhdGUgeDpLZXk9JnF1b3Q7QXV0b0l0ZW1UZW1wbGF0ZSZxdW90OyZndDs8L3A+DQo8cD4NCgkmbHQ7R3JpZCBXaWR0aD0mcXVvdDs0MDAmcXVvdDsgSGVpZ2h0PSZxdW90OzUwJnF1b3Q7Jmd0OzwvcD4NCjxwPg0KCSZsdDtUZXh0QmxvY2sgSG9yaXpvbnRhbEFsaWdubWVudD0mcXVvdDtMZWZ0JnF1b3Q7IFRleHRXcmFwcGluZz0mcXVvdDtXcmFwJnF1b3Q7IFRleHQ9JnF1b3Q7e0JpbmRpbmcgQ2l0eU5hbWV9JnF1b3Q7IGQ6TGF5b3V0T3ZlcnJpZGVzPSZxdW90O0hlaWdodCZxdW90Oy8mZ3Q7PC9wPg0KPHA+DQoJJmx0O1RleHRCbG9jayBIb3Jpem9udGFsQWxpZ25tZW50PSZxdW90O0xlZnQmcXVvdDsgTWFyZ2luPSZxdW90OzIwMCwwLDU3LDgmcXVvdDsgVGV4dFdyYXBwaW5nPSZxdW90O1dyYXAmcXVvdDsgVGV4dD0mcXVvdDt7QmluZGluZyBQaW55aW59JnF1b3Q7IGQ6TGF5b3V0T3ZlcnJpZGVzPSZxdW90O0hlaWdodCZxdW90Oy8mZ3Q7PC9wPg0KPHA+DQoJJmx0Oy9HcmlkJmd0OzwvcD4NCjxwPg0KCSZsdDsvRGF0YVRlbXBsYXRlJmd0OzwvcD4NCjxwPg0KCSZsdDsvcGhvbmU6UGhvbmVBcHBsaWNhdGlvblBhZ2UuUmVzb3VyY2VzJmd0OzwvcD4NCjxwPg0KCSZsdDt0b29sa2l0OkF1dG9Db21wbGV0ZUJveCB4Ok5hbWU9JnF1b3Q7VHh0VXNlcklucHV0JnF1b3Q7IE1hcmdpbj0mcXVvdDswLDgsMCwwJnF1b3Q7IEl0ZW1UZW1wbGF0ZT0mcXVvdDt7U3RhdGljUmVzb3VyY2UgQXV0b0l0ZW1UZW1wbGF0ZX0mcXVvdDsgVmFsdWVNZW1iZXJQYXRoPSZxdW90O0NpdHlOYW1lJnF1b3Q7IEhlaWdodD0mcXVvdDs3MyZxdW90OyBWZXJ0aWNhbEFsaWdubWVudD0mcXVvdDtUb3AmcXVvdDsgLyZndDs8L3A+DQo8cD4NCgkmbmJzcDsmbmJzcDsmbmJzcDsmbmJzcDsmbmJzcDsmbmJzcDsgyc/D5rXEWEFNTLT6wuvW0M6o0rvQ6NKqy7XD97XEvs3Kx0F1dG9Db21wbGV0ZUJveLXEVmFsdWVNZW1iZXJQYXRoyvTQ1KOs08nT2kl0ZW21xMr9vt3UtMrHQ2l0eU1vZGVswODQzbXEo6zI58nPzbyjrNXiyrHI57n708O7p7Xju/cmbGRxdW87sbG+qSZuYnNwOyZuYnNwOyZuYnNwOyBiZWlqaW5nJnJkcXVvO9XiuPbP7sS/yrGjrNTazsSxvr/y1tDKx8/Uyr4mcXVvdDuxsb6pJnF1b3Q7u/LV3yZxdW90O2JlaWppbmcmcXVvdDu+zcihvvbT2lZhbHVlTWVtYmVyUGF0aLXEyejWw8HLoaM8L3A+DQo8cD4NCgkmbmJzcDs8L3A+DQo8cD4NCgkmbmJzcDs8L3A+DQo8cD4NCgnU2lhBTUy1xENT0rPD5sDvo6zQ6NKqvfjSu7K91ri2qEF1dG9Db21wbGV0ZUJveLXEyv2+3dS0o6ixp8e4w7vT0NHPuPHKudPDTVZWTbDztqijrNXisrvKx9bYteOho6Gjo6k8L3A+DQo8cD4NCglwcml2YXRlIHZvaWQgUGhvbmVBcHBsaWNhdGlvblBhZ2VfTG9hZGVkKG9iamVjdCBzZW5kZXIsIFJvdXRlZEV2ZW50QXJncyBlKTwvcD4NCjxwPg0KCXs8L3A+DQo8cD4NCgl2aWV3TW9kZWwgPSBuZXcgSW5wdXRDaXR5TmFtZVZpZXdNb2RlbCgpOzwvcD4NCjxwPg0KCXRoaXMuRGF0YUNvbnRleHQgPSB2aWV3TW9kZWw7PC9wPg0KPHA+DQoJVHh0VXNlcklucHV0Lkl0ZW1zU291cmNlID0gdmlld01vZGVsLkxpc3RDaXRpZXM7PC9wPg0KPHA+DQoJVHh0VXNlcklucHV0LkZpbHRlck1vZGUgPSBBdXRvQ29tcGxldGVGaWx0ZXJNb2RlLkN1c3RvbTs8L3A+DQo8cD4NCglUeHRVc2VySW5wdXQuSXRlbUZpbHRlciA9IHZpZXdNb2RlbC5GaWx0ZXI7PC9wPg0KPHA+DQoJVHh0VXNlcklucHV0LkZvY3VzKCk7PC9wPg0KPHA+DQoJfTwvcD4NCjxwPg0KCVZpZXdNb2RlbMDvtcTSu9CpxNrI3aO6PC9wPg0KPHA+DQoJcHVibGljIGNsYXNzIElucHV0Q2l0eU5hbWVWaWV3TW9kZWwgOiBCYXNlVmlld01vZGVsPC9wPg0KPHA+DQoJezwvcD4NCjxwPg0KCXB1YmxpYyBJTGlzdCZsdDtDaXR5TW9kZWwmZ3Q7IExpc3RDaXRpZXMgPSBuZXcgTGlzdCZsdDtDaXR5TW9kZWwmZ3Q7KCk7PC9wPg0KPHA+DQoJcHVibGljIElucHV0Q2l0eU5hbWVWaWV3TW9kZWwoKTwvcD4NCjxwPg0KCXs8L3A+DQo8cD4NCglMb2FkQ2l0aWVzKCk7PC9wPg0KPHA+DQoJfTwvcD4NCjxwPg0KCXByaXZhdGUgdm9pZCBMb2FkQ2l0aWVzKCk8L3A+DQo8cD4NCgl7PC9wPg0KPHA+DQoJLy+2wcihs8fK0NDFz6I8L3A+DQo8cD4NCgl9PC9wPg0KPHA+DQoJcHVibGljIGJvb2wgRmlsdGVyKHN0cmluZyBzdHJJbnB1dCwgb2JqZWN0IHRvRmlsdGVyKTwvcD4NCjxwPg0KCXs8L3A+DQo8cD4NCglDaXR5TW9kZWwgbW9kZWwgPSAoQ2l0eU1vZGVsKXRvRmlsdGVyOzwvcD4NCjxwPg0KCWlmIChtb2RlbC5QaW55aW4uU3RhcnRzV2l0aChzdHJJbnB1dCkg"| model.CityName.StartsWith(strInput))

return true;

else

{

return false;

}

这里的关键就是Filter了，代码很简单，很容易看懂。

顺便再谈一个Bug的问题，AutoCompleteBox在Pivot里面的提示显示是不正常的，而且显示和触控是错位的，网上有大牛给出了变相的解决办法，但我一直认为那太复杂，个人比较懒。。前两天Bing了一下，突然眼前一亮，截图纪念一下：

粗略看了摘要之后（确实是粗略，因为中间有”…”我也没太注意），我当时以为随着Toolkit的新版的发布，这个问题已经解决了，但是点击进去一看，发现“Toolkit新版发布”和“AutoCompleteBox在Pivot的Bug的解决”这完全是两篇不同的文章…… 彻底崩溃。。

但是必须要在Pivot里面让用户输入城市名字的，这个怎么办。后来直接用了个笨点的办法，我把Pivot里面的AutoCompleteBox换成了TextBox，然后当Text获得焦点之后，跳转到一个新页面，空白页面上只有AutoCompleteBox，当用户输入完成之后再把值传递回去，算是个障眼法么。。不过我记得有很多时候在手机上都是这么做的——当用户点击输入框之后屏幕上只显示输入框和键盘及候选字，输入完之后再返回去。这样用户体验也不会太差，总比在Pivot上面硬生生的让用户直面Bug来得好，这也算是一个临时的解决办法吧，期待Toolkit的升级~

作者锦燕云

补充：移动开发 , Windows Phone ,