Silverlight for Windows Phone toolkit in depth (3)

ArticleDirectory

• Populatecomplete ()

Silverlight for Windows Phone Tookit in depth (1)

Previous Article: Silverlight for Windows Phone Tookit in depth (2)

 

Autocompletebox

 

Overview

Autocompletebox is a control that gives the corresponding matching items in the drop-down list when the user inputs it. It is composed of a text input box and a drop-down list. A wide range of Attribute Sets support customization, template display, data binding, and automatic completion logic.

 

Preparation

To start using autocompletebox, you must first add the reference Microsoft. Phone. Controls. toolkit. DLL to your project.

Note: After installing toolkit, you can find Microsoft. Phone. Controls. toolkit. dll in the following path.

For 32-bit systems:

C: \ Program Files \ microsoft sdks \ WINDOWS

Phone \ v7.1 \ toolkit \ aug11 \ bin \ Microsoft. Phone. Controls. toolkit. dll

For 64-bit systems:

C: \ Program Files (x86) \ microsoft sdks \ WINDOWS

Phone \ v7.1 \ toolkit \ aug11 \ bin \ Microsoft. Phone. Controls. toolkit. dll

Or if you download "Silverlight for Windows Phone toolkit Source & sample-Aug 2011.zip", you can directly download the ".. \ Silverlight for Windows Phone Toolkit

Find

You can create an autocompletebox control instance in XAML or C #/VB.

• Define autocompletebox in XAML: you must first Add the following namespace

Note: Make sure that the "toolkit" namespace is included in your page declaration! You can use Visual Studio toolbox, expression blend designer, or manually add them.

• Create an autocompletebox instance in C:

You need to add the followingCode

The next step is to assign values to the itemsource attribute and fill in autocompletebox with sample data

 

Main attributes

 

Filtermode

Filtermode is a dependency attribute of the autocompletefiltermode type. It is used to filter the itemssource set in the specified way for display in the drop-down list. The default value is autocompletefiltermode. startswith.

Note: Use the filtermode attribute to specify how to filter possible matches. For example, you can filter data in a predefined or custom manner. If you set the itemfilter attribute, the retrieval method is automatically set to custom.

Example:

For example, if you want to implement case-insensitive search, you need to set the filtermode attribute as follows:

In the first example, we enter a lowercase letter without any matching results. In the second example, we enter an uppercase letter, and the matching items are automatically displayed.

 

Itemfilter

Itemfilter is a dependency attribute of the autocompletefilterpredicate <Object> type. Its value is a custom method for filtering project sets using text input by the user. It is empty by default.

Note: If you set the itemfilter attribute, the retrieval method is automatically set to custom. Use itemfilter to filter sets by custom objects or use textfilter to filter custom texts.

Autocompletebox uses this method to determine the text that may be matched. If true is returned, the item is the matching result; otherwise, the fasle is returned.

• Search-string type, used as a matched character
• Item-used to compare with the "Search" parameter
• T-it can be string or object type

Example:

If we match the last letter, refer to the following code.

When "S" is input, all matching items ending with "S" are displayed. Similarly, you can add custom matching methods to meet your needs.

 

Textfilter

Textfilter is a dependency attribute of the autocompletefilterpredicate <string> type. Its value is a custom method used to filter the project set of text input, so that it can be displayed in the drop-down list.

Note: If you set the textfilter attribute, the retrieval method is automatically set to custom. Textfilter allows you to filter sets by using custom text or itemfilter to filter custom objects.

Example: To achieve matching by character length, refer to the following code

As shown in the preceding example, items with more than 6 characters will appear in the drop-down list.

 

Minimumpopulatedelay

Minimumpopulatedelay is a dependency attribute of the int type. The default value is 0, which is used to obtain or set the minimum latency (the time before the user inputs are completed until the autocompletebox drop-down item is filled in the matching result)

 

Minimumprefixlength

Minimumprefixlength is an int-type dependency attribute. The default value is 1. It is used to obtain or set the minimum response length.

Note: If you set minimumprefixlength to-1, autocompletebox will not display any matching results, it does not have the maximum value. If the value of minimumprefixlength is set too large, autocompletebox will not be able to provide possible matching.

Example:

If you want to implement a response after entering 2 characters, you can refer to the following code:

In the first example, if you enter a character, no result is displayed. In the second example, after entering two characters, the matching result is displayed.

 

Searchtext

Searchtext is an attribute used to retrieve text. It is used to filter the itemssource set.

Note: The value of searchtext is the same as that of text, but its value is assigned before the populating event after the textchanged event.

 

Textboxstyle

Textboxstyle is used to obtain or set the style of the input box. It is empty by default.

 

Text

Text string type, representing the value of the autocompletebox control input box

 

Isdropdownopen

Isdropdownopen bool type, used to obtain or set whether the drop-down is enabled.

 

Istextcompletionenabled

Istextcompletionenabled bool type, used to obtain or set whether to automatically fill the input box when the first match exists ). The default value is false.

 

Inputscope

Inputscope type, which determines the input range of the autocompletebox Text Template, that is, numbers, passwords, text, etc.

Note: Although autocompletebox is not an itemscontrol control, it still has some itemscontrol attributes, such as itemcontainerstyle, itemtemplate, and itemssource!

 

Itemcontainerstyle

Itemcontainerstyle, which is used to determine the style of the selected items in the drop-down list.

 

Itemtemplate

You can use the itemtemplate attribute to make the drop-down item data object display more beautiful. If you bind a set to autocompletebox and do not use datatemplate to provide a special display method, each item is a character.

 

Itemssource

Obtains or sets the project set used to generate the drop-down list.

 

Selecteditem

Get or set the currently selected items in the drop-down list

Note: For autocompletebox data binding, use the valuememberbinding and valuememberpath attributes.

 

Event populated

This function is triggered when autocompletebox fills the matching result in the drop-down list based on the text entered by the user.

Example:

Populating

This function is triggered when autocompletebox fills in the drop-down items based on the text entered by the user.

Example:

Note: If the cancel attribute is true by setting the populatingeventargs cancellation event, autocompletebox will not automatically fill in the drop-down list. Based on this situation, if you still want to display matching results, you must provide the filling logic by yourself.

Textchanged

Triggered when input in the autocompletebox input box

Example:

Dropdownopening

Triggered when isdropdownopen is changed to true and autocompletebox is not displayed

Example:

Dropdownopened

Triggered when autocompletebox is displayed and isdropdownopen is changed to true

Example:

Dropdownclosing

Triggered when isdropdownopen is changed to false and autocompletebox is still displayed

Example:

Dropdownclosed

Triggered when autocompletebox is disabled and isdropdownopen is changed to false

Example:

Selectionchanged

Triggered when the selected items in the drop-down list change

Example:

 

Main method: populatecomplete ()

Notification autocompletebox. The itemssource attribute has been set and the data can be matched and displayed in the drop-down list.

Note: When you provide custom drop-down item filling logic, call this method to notify the control that you have completed the filling process. Maybe, when the filling process is very long, you call populatecomplete () and you want to cancel the built-in filtering. In this case, you can handle populated events and set populatingeventargs. cancel is true. when this long filling is completed, you can call populatecomplete () to indicate that the drop-down item has been filled.

Autocompletebox Data Binding

The following example demonstrates how to fill in the autocompletebox control through data binding. Based on the above example, we can show the pictures and descriptions of different mobile phones in the drop-down list.

Define data sources

Follow these steps to create a data source:
Step 1: define business/Data Types

First define the data class, for example, create the following "wp7phone" data class

Note: It is important to override the tostring () method, because we will implement a custom text filtering method to filter the string returned by the tostring method of the wp7phone object. The custom filtering method returns the name of the matched wp7phone, that is, the value displayed in the textbox.

Step 2: Create an images folder and add an image to it (set the build action of the added image to content). The image is displayed in the autocompletebox drop-down list.

Step 3: Create a wp7phone Sample Set

Bind data

Step 1: Define autocompletebox in XAML

We will define an autocompletebox and set filtermode to M (custom), because we want to display custom wp7phone data. Then, we customize an itemtemplate, bind the image attribute of the wp7phone class to the image, and bind the name attribute to the textblock. The Code is as follows:

Step 2: assign values to the itemssource attribute

Step 3: add custom itemfilter

We will add a custom delegate named searchphones to retrieve possible matching results (that is, items starting with input characters) based on the characters entered by the user)

Step 4: Compile and run the project. The running result is as follows:

Let's enter "HTC" in the input box. As you can see, two results are provided in the drop-down list. If "HTC audio art" is selected, the input box is displayed as "selected Phone: HTC audio art" (note: this character is returned by the tostring () method that is rewritten in the wp7phone class)

 

Bind autocompletebox through valuememberbinding

Maybe you don't want to use a custom filtering method and don't think it is necessary to rewrite the tostring () method in your data class. You can use valuememberbinding instead. The following is an example (we use the same data as the previous one. The only difference is that we didn't use any custom filtering method)

Data Source

The Code is as follows:

Data Binding

The following shows how to bind data.

Result

The final result is as follows:

 

Statement: I have a limited level of English. I still want to correct some improper translations. All translations are comprehension translations, which are not necessarily consistent with the original one. If incorrect translations occur, the original one shall prevail, it is recommended that you read the original English version directly (not too difficult). The copyright belongs to the original author. Repost this article to indicate the source and author of the article.

Http://www.windowsphonegeek.com/WPToolkitBook2nd