Silverlight for Windows Phone toolkit in depth (4)

Silverlight for Windows Phone toolkit in depth (1)

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

 

Note: Since the second version of the original book has been released, subsequent chapters are translated based on the second version of the original book. The first version is not much different from the second version, the modified part has been corrected and marked in red.

 

Contextmenu

 

Overview

Contextmenu is a dynamic control that is displayed when you click and hold it down. It is often used in image applications.ProgramThe list is the same as the "fixed to the Start Screen" and "unmount" options you can see after you click and hold an application.

 

Preparation

To start using contextmenu, you must first Add a reference to Microsoft. Phone. Controls. toolkit. dll in 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 a contextmenu instance in XAML or C #/VB.

• Define contextmenu 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 a contextmenu control instance in C #/Vb

 

Main attributes

 

Isopen

Isopen bool type attribute. Obtain or set the value indicating whether the contextmenu is visible.

 

Isfadeenabled

Isfadeenabled bool type attribute, which is used to obtain or set whether the background is gradually imported when the contextmenu is opened. This option takes effect only when iszoomenabled must be set to true.

Example:

 

Iszoomenabled

Iszoomenabled bool type attribute, which is used to obtain or set whether the background is reduced when the contextmenu is opened.

Example:

 

Itemcontainerstyle

Itemcontainerstyle type attribute, which is used to obtain or set the container element style of each item.

Example:

 

Regionofinterest

Regionofinterest rect? It is used to obtain or set the areas of interest that use the Root View coordinate system. contextmenu tries to position itself outside the area of interest. If it is null, the zone of interest is determined by the bound control.

 

Verticaloffset

Verticaloffset double type attribute, which is used to obtain or set the vertical distance between the target and the pop-up layer.

Example:

 

Major event closed

Triggered when the contextmenu instance is disabled

Example:

Opened

Triggered when the contextmenu instance is enabled

Example:

 

Menuitem

Menuitem is an optional item in the contextmenu.

Note: contextmenu contains a set of menuitem objects. In contextmenu, select a menuitem and set the isselected attribute to true. By binding the data source to the itemssource attribute of contextmenu, You can bind menuitem to Data.

 

Main menuitem attributes

 

Command

Command icommand type attribute to obtain or set commands associated with menu items.

Commandparameter

Commandparameter object type attribute to obtain or set the parameters passed to the menuitem command.

Header

The header object type attribute to obtain or set the items that identify the control. The default value is null. Note that this attribute is used when you fill in the contextmenu using the menu item set instead of using data binding.

Example:

Headertemplate

Headertemplate datatemplate type attribute to obtain or set the data template of the control header content

Itemcontainerstyle

Itemcontainerstyle type attribute, which is used to obtain or set the container element style of each item.

Owner

Owner dependencyobject type attribute to obtain or set the object to which the contextmenu belongs

 

Main menuitem events

 

Click

Triggered when a menuitem is clicked.

Example

 

Use menuitems to fill the contextmenu

The following example shows the simplest method. Use menuitems to fill the data in the contextmenu.

When you click and hold the "opencontextmenu" button, three options are displayed. After you select an item, the MessageBox for the selected item is displayed.

The result is as follows:

 

Contextmenu Data Binding

The following example shows how to bind a contextmenu to populate the data. We need an itemcontainerstyle to change the background color of the menu item.

• Define data sources

We create a simple string collection.

• Contextmenu Data Binding

We will add a button control that contains the data-bound contextmenu.

Step 1: Define the contextmenu instance in the button control, and then add the following itemcontainerstyle

Step 2: Fill in the sample data to contextmenu through the itemssource attribute

The running result is as follows:

 

Use contextmenu (datatemplate) in ListBox itemtemplate)

The following example shows how to add a contextmenu in ListBox itemtemplate (when there is data that needs to be bound to ListBox)

• Define data sources

Follow these steps to create a data source:

Step 1: define business/data types:

First, we need to define the data class. We have defined the "sampledata" class containing the following attributes.

Step 2: Create a new images folder and add the desired image to it (the build action of the image is set to content)

Step 3: create a set of "sampledata" types

• ListBox control data binding

Step 1: Define a ListBox and place the contextmenu in its itemtemplate. Contextmenu is composed of two menuitems (the "click" RESPONSE event is "menuitem_click.

Step 2: Use the itemssource attribute to fill in data for ListBox

Step 3: Go to the backgroundCode, Add the "menuitem_click" handler

Through the following contextmenu click processing method, you can highlight the selected items in The ListBox, or get the reference of the clicked items

Step 4: Compile and run the project

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

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