Windows Phone 7 (WP7) Development autocompletedbox create Chinese city name input box

The default function of autocompletedbox in toolkit is already very powerful. For an English city or word prompt, you can directly specify filtermode as autocompletefiltermode. sartswith (or other more suitable filters ).

For built-in filtermode, see msdn: http://msdn.microsoft.com/zh-cn/library/system.windows.controls.autocompletefiltermode (vs.95). aspx

 

However, for Chinese city name filtering, I am afraid further modification is required. The reason is as follows: because our user may use a Chinese Keyboard, for example, when the user wants to find "Beijing", he inputs [BEIJING, Bei, B, note: The last one is Chinese. At this time, you need to write some code by yourself.

First:

The first is the model class.

 public class CityModel:BaseModel{private string _cityName = "";private string _pinyin = "";public string CityName{get { return _cityName; }set{_cityName = value;OnNotifyPropertyChanged("CityName");}}public string Pinyin{get { return _pinyin; }set { _pinyin = value; }}}

The model class is very simple. There are two attributes. cityname is the Chinese name and Pinyin (well, it is indeed pinyin ......) It is the pinyin name of the city.

 

 

To achieve the Display Effect of items, we need to modify its template. The specific XAML is as follows:

<phone:PhoneApplicationPage.Resources><DataTemplate x:Key="AutoItemTemplate"><Grid Width="400" Height="50"><TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding CityName}" d:LayoutOverrides="Height"/><TextBlock HorizontalAlignment="Left" Margin="200,0,57,8" TextWrapping="Wrap" Text="{Binding Pinyin}" d:LayoutOverrides="Height"/></Grid></DataTemplate></phone:PhoneApplicationPage.Resources><toolkit:AutoCompleteBox x:Name="TxtUserInput" Margin="0,8,0,0" ItemTemplate="{StaticResource AutoItemTemplate}" ValueMemberPath="CityName" Height="73" VerticalAlignment="Top" />

The only note in the above XAML code is the valuememberpath attribute of autocompletebox. Because the item data source is of the citymodel type, for example, if you click "Beijing, if "Beijing" or "Beijing" is displayed in the text box, it depends on the setting of valuememberpath.

 

 

On the CS page of XAML, You need to specify the autocompletebox data source (Sorry, mvvm binding is not strictly used. This is not the focus ..)

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e){viewModel = new InputCityNameViewModel();this.DataContext = viewModel;TxtUserInput.ItemsSource = viewModel.ListCities;TxtUserInput.FilterMode = AutoCompleteFilterMode.Custom;TxtUserInput.ItemFilter = viewModel.Filter;TxtUserInput.Focus();}

Some content in viewmodel:

Public class inputcitynameviewmodel: baseviewmodel {public ilist <citymodel> listcities = new list <citymodel> (); Public inputcitynameviewmodel () {loadcities ();} private void loadcities () {// read city information} public bool filter (string strinput, object tofilter) {citymodel model = (citymodel) tofilter; If (model. pinyin. startswith (strinput) | model. cityname. startswith (strinput) return true; else {return false ;}}}

The key here is filter. The code is very simple and easy to understand.

 

 

 

By the way, let's talk about a bug. The autocompletebox prompts in the deployment that the display is abnormal, and the display and touch are misplaced. On the internet, Daniel provided a disguised solution, but I always think that is too complicated, and I am relatively lazy .. The first two days of Bing, suddenly highlighted, to commemorate:

After reading the summary roughly (it is indeed rough, because there is "..." in the middle "..." I didn't pay too much attention). I thought that with the release of the new Toolkit version, this problem had been solved, but I clicked to see it, we found that "toolkit New Version release" and "solving autocompletebox bug in release" were two different articles ...... Crash ..

But the user must enter the city name in the region. What should I do. Later, I directly used a stupid method. I changed the autocompletebox in the notebook to a Textbox, and then when the text gets the focus, it jumps to a new page with only autocompletebox on the blank page, it is a blind way to pass the value back after the user input is complete .. However, I remember that this is often the case on mobile phones. When a user clicks the input box, only the input box, keyboard, and candidate words are displayed on the screen. After the input is complete, the user returns the result. In this way, the user experience will not be too bad. It is better than simply making the user face the bug in the pipeline. This is also a temporary solution. We look forward to the toolkit upgrade ~