Silverlight for Windows Phone toolkit in depth (5)

Silverlight for Windows Phone toolkit in depth (1)

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

 

Datepicker

 

Overview

Datepicker of Windows Phone toolkit is a UI element that automatically provides you with an input box. When you select it, the selector displays a form. You can use the infinite sliding mode to select another date, datepicker is a UX control that complies with Windows Phone Design Specifications.

 

Preparation

To start using datepicker, 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 datepicker instance in XAML or C #/VB.

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

Note: If you choose to use C #CodeTo add the datepicker control, do not forget to add datepicker to the page container, such as: This. contentpanel. Children. Add (datepicker );

Important: Use the ApplicationBar icon correctly in datepicker and timepicker. Create a folder named "toolkit. Content" under the root directory of the project and copy the icon file to the folder. Toolkit provides some basic Icon files, which can be found in the phonetoolkitsample project and copied to your project. They must be named "applicationbar.cancel.png" and "applicationbar.check.png ", and the build action must be set to "content "!

 

Main attribute Header

Header object type attribute, which is used to obtain or set the control's header

Example:

Headertemplate

Headertemplate datatemplate type attribute, get or set the template displayed in the control header

Pickerpageuri

Pickerpageuri URI type attribute, which is used to obtain or set a URI (used when you click the control to load the idatetimepickerpage instance). For more information and examples, see "Custom full screen selection page" below.

Value

Value datetime? Type attribute, get or set the time value

Example:

Valuestring

Valuestring string type attribute. obtains the character format of the currently selected value.

Example:

Valuestringformat

Valuestringformat string type attribute. When you convert the value attribute to a string type formatting character, you can access the msdn documentation for more information about formatting text.

Note: formatting characters must contain "{" and "}". Therefore, special characters must be escaped when used in XAML, such as valuestringformat = "{} {0: d }".

Note: The default valuestringformat of datepicker is "{} {0: d}", which means that it will be displayed as 15/12/2010 in American culture.

Main Event valuechanged

Triggered when the value attribute changes

Example:

 

Custom full screen selection page

In this way, you can customize the full screen selection page, set the datepicker. pickerpageuri or timepicker. pickerpageuri attribute, and navigate to a phoneapplicationpage that implements the idatetimepickerpage interface. Idatetimepickerpage is an interface designed for datepicker and timepicker to interact with the selected page. It only contains one attribute:

Let's create a simple solution. Use the custom page to reset the selected value of datepicker to datetime. Now. The steps are as follows:

Step 1: add the Windows Phone partial page in your project and rename it "custompage ".

Step 2: implement the idatetimepickerpage interface in the background Code. The Code is as follows:

Step 3: Add a button in "custompage"

Step 4: add some code to set the selected datepicker value to datetime. Now.

Step 5: Set pickerpageuri to "/datepickerdemo; component/custompage. XAML"

Step 6: running result

The above is a customized full screen selection page. If you run this example, you will find that when you select datepicker, the newly created mpmpage will appear. If you click the button, navigationservice. Goback () will be executed, and the datepicker value will be updated to the current time. In this simple way, you can customize the full screen selection page. Of course, you can add any method you like.

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