Silverlight for Windows Phone toolkit in depth (6)

Silverlight for Windows Phone toolkit in depth (1)

Previous Article: Silverlight for Windows Phone toolkit in depth (5)

 

Expanderview

 

Overview

Expanderview is a control composed of headers and foldable drop-down items. When you click the header, the expanderview is folded or opened. Expanderview is a simple headereditemscontrol. It provides a large number of attributes and events to control the open and collapse functions of the drop-down items.

 

Preparation

To start using expanderview, 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 \ oct11 \ bin \ Microsoft. Phone. Controls. toolkit. dll

For 64-bit systems:

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

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

Or if you download "Silverlight for Windows Phone toolkit Source & sample-Nov 2011.zip", you can find it in the "... \ source and sample \ bin \" directory.

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

• Define expanderview in XAML: You need to 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 expanderview control instance in C #/vB:Code

 

Main attribute expander

Expander object type attribute to get or set an expander object

Example:

Folding on the left and opening on the back

Expandertemplate

Expandertemplate datatemplate type attribute, get or set the template of the control expander

Hasitems

Hasitems bool type attribute. Obtain or set a bool value. This value indicates whether expanderview contains sub-projects.

Isexpanded

Isexpanded bool type attribute. Get or set a bool value, which indicates whether expanderview is enabled.

Isnonexpandable

Isnonexpandable bool type attribute. Get or set a bool value, which indicates whether expanderview is non-extended.

Nonexpandableheader

Nonexpandableheader object type attribute. Obtain or set the object displayed in the header when the expanderview is not extended.

Example:

Nonexpandableheadertemplate

Nonexpandableheadertemplate datatemplate type attribute. Obtain or set the data template in the header when the expanderview is not extended.

 

Main Event expanded

Triggered when expanderview opens the display content

Example:

Collapsed

Triggered when expanderview is folded and hidden

Example:

 

Expanderview Data Binding

The following example shows how to use data binding to fill expanderview. We will implement a simple foldable menu for the pizza store to display different types of pizza in the folding state, display detailed ingredient information in the open status

Define data sources

Follow these steps to create a data source:

Step 1: Define data/Business Classes

First, define a data class named "custompizza", which includes the following attributes:

The pizzaoption class is as follows:

Step 2: create an image folder and add images

Step 3: create a set of items of the custompizza type

 

Expanderview Data Binding

First, we need to add necessary data templates to the page resources.

Step 1: Define relativetimeconverter in page resources. We use it to convert the "addeddate" value to a proper character (for example, 08/08/2011 will be converted to "one month ago ")

Step 2: Define a custom headertemplate in the page Resource

Step 3: Define a custom expandertemplate in the page Resource

Step 4: Define a custom itemtemplate in the page Resource

Step 5: Define a custom nonexpandableheadertemplate in the page Resource

Step 6: Add a ListBox in XAML to display the custompizza object set using the expanderview control. Bind custompizza to expanderview in itemtemplate. The Code is as follows:

Step 7: Set the itemssource attribute of ListBox

The final running result is as follows:

Example of opening/folding all

This example shows how to open/collapse all expanderviews in the preceding example. Note that each item in ListBox is expanderviews.

Step 1: Add two buttons to open/collapse all items

Step 2: Add the following method to enable/hide expanderviews

Step 3: In the background code, add "btnexpand" and click the event

Step 4: Add "btncollapse" in the background code and click the event

 

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, please noteArticleSource and author.

English (second edition): http://www.windowsphonegeek.com/WPToolkitBook2nd

 

Thanks: many friends in the school gave encouragement and support during the translation process. Thank you very much! Your encouragement and support are the greatest motivation for my translation. If you have any comments, you can directly post them in the comments. I will reply carefully! Thank you again!