Windows phone toolkit aug 2011 in depth v1

Lập trình wp7

Silverlight for Windows

Phone Toolkit

In Depth

by Boryana Miloshevska

About the Author

Boryana Miloshevska is a software developer with more than 6 years of professional experience with

.NET technologies She is a co-founder of www.windowsphonegeek.com - one of the biggest windows

phone development communities She is also working as a consultant in the areas of Silverlight and

Windows Phone application development

What else?

- Active blogger and tech enthusiast trying to contribute to the windows phone development

community in various ways Author of more than 300 development articles, tutorials and guides

related to Silverlight and Windows Phone 7 technology most of which published on

www.windowsphonegeek.com

- MCTS, MCPD Web and Desktop development

- Winner of the Microsoft “Engineering Excellence Achievement” Award

- MSc Computer Science

- MSc Technology Entrepreneurship (UCL , London UK)

Table of Contents

About the Author 3

Introduction 10

Who is this book for? 10

What this book covers? 10

How is this book structured? 11

Source code 12

What else? 12

Why did I decide to write this FREE e-book? 12

Introduction to Silverlight for Windows Phone 14

Introduction to Silverlight for Windows Phone Toolkit 17

Components included in the Silverlight for Windows Phone Toolkit 17

What's included in the source code? 18

Suggestions? Features? Questions? 18

Official Blogs & Tweets 19

What else will you need? 19

Getting Started with the Silverlight for Windows Phone Toolkit 20

Option1: Install the Windows Phone Toolkit msi 21

Option2: Download the “Silverlight for Windows Phone Toolkit Source & Sample - Aug 2011.zip” 24

Option3: Download only the XAP file 26

Option4: Install Windows Phone Toolkit using NuGet 26

How to use unofficial builds 27

How to use Windows Phone Toolkit in Visual Studio 30

How to add Windows Phone Toolkit Controls to the Visual Studio Toolbox 33

How to use Windows Phone Toolkit in Expression Blend 38

AutoCompleteBox 42

Overview 42

Getting Started 42

Key Properties 44

Key Events 50

Key Methods 52

Data Binding AutoCompleteBox 53

Data Binding AutoCompleteBox via ValueMemberBinding 57

ContextMenu 59

Overview 59

Getting Started 59

Key Properties 60

Key Events 62

MenuItem 63

MenuItem Key Properties 63

MenuItem Key Events 64

Populating ContextMenu with MenuItems 64

Data Binding ContextMenu 66

Using ContextMenu inside ListBox ItemTemplate (DataTemplate) 67

DatePicker 71

Overview 71

Getting Started 71

Key Properties 73

Key Events 74

Customizing the full-screen picker page 75

ExpanderView 78

Overview 78

Getting Started 78

Key Properties 79

Key Events 81

Data Binding ExpanderView 82

ExpandAll and CollapseAll Example 88

GestureService and GestureListener 89

Overview 89

What is GestureService? 90

What is GestureListener? 91

Getting Started 91

GestureListener Key Events 93

Examples 99

HubTile 101

Overview 101

Getting Started 101

Key Properties 103

HubTileService 104

Data Binding HubTile 106

Freezing and Unfreezing tiles 109

ListPicker 112

Overview 112

Getting Started 112

Key Properties 114

Key Events & Methods 117

Data Binding ListPicker 117

Working with ListPicker SelectedItem 120

LockablePivot 125

Overview 125

Getting Started 125

Key Properties 126

Example 126

LoopingSelector 130

Overview 130

Getting Started 130

Key Properties 136

Key Events 136

ILoopingSelectorDataSource 137

Implementing a generic LoopingSelectorDataSource 137

LoopingSelector with Double Data 141

LoopingSelector with Int Data 142

LoopingSelector with String Data 143

LoopingSelector with DateTime Data 144

Advanced Data Binding using IComparable<T> 145

Advanced Data Binding using a separate Comparer 148

LongListSelector 151

Overview 151

Visual structure 151

Getting Started 153

Key Properties 154

Key Events 159

Key Methods 162

Data Binding LongListSelector 163

Customizing LongListSelector group popup 170

Animating LongListSelector group items using transitions 171

Dynamically Insert, Update and Delete data in a data bound LongListSelector 175

MultiselectList 181

Overview 181

Getting Started 181

Key Properties 182

Key Events 183

MultiselectItem 184

MultiselectItem Key Properties & Events 184

Data Binding MultiselectList 185

PhoneTextBox 193

Overview 193

Getting Started 193

Key Properties 194

Key Events 197

PerformanceProgressBar 198

Overview 198

Getting Started 199

Key Properties 200

Transitions 201

Overview 201

Key concepts 201

Getting Started 204

Page Transition 206

UIElement Transition 207

Custom Transitions 208

TiltEffect 215

Overview 215

Getting Started 215

Key Properties 217

How to Enable TiltEffect globally 217

How to Suppress TiltEffect 218

Adding more controls to TiltableItems 219

Adding TiltEffect to data bound ListPicker Items 219

TimePicker 221

Overview 221

Getting Started 221

Key Properties 223

Key Events 225

Customizing the full-screen picker page 225

ToggleSwitch 228

Overview 228

Getting Started 228

Key Properties 229

Key Events 231

Dynamically Changing ToggleSwitch Content depending on the current State 232

WrapPanel 234

Overview 234

Getting Started 234

Key Properties 236

Horizontal WrapPanel 236

Vertical WrapPanel 237

WrapPanel as ItemsPanel 237

Additional Components 239

RecurringDaysPicker 239

HeaderedItemsControl 240

DateTimeConverters 240

LocalizedResources 244

Introduction

Who is this book for?

The target audience of this book is anyone who is interested in Silverlight for Windows Phone

development It covers all controls from the Microsoft Silverlight for Windows Phone Toolkit 7.1

- Aug 2011 SDK (Mango)

This book contains all the information necessary to get you started with the Silverlight for

Windows Phone Toolkit It is suitable for both beginners and advanced developers

Before you begin you will need to have a basic understanding of:

 Silverlight principles

 Windows Phone principles

 C# programming

What this book covers?

The book covers “in depth” all controls from the Microsoft Silverlight for Windows Phone

o TiltEffect

o TimePicker

o ToggleSwitch

Furthermore the first two chapters make a quick introduction to the main concepts related to

Silverlight and Windows Phone application development and how to get started using external

libraries like the “Silverlight for Windows Phone Toolkit”

How is this book structured?

In this book you will learn how to use the different controls that the “Silverlight for Windows

Phone Toolkit” offers

Chapter1 is a brief introduction to the main Silverlight and Windows Phone concepts You will

learn the key concepts that you need to know in order to get started with Windows Phone

application development

Chapter2 is focused on getting started with the “Silverlight for Windows Phone Toolkit” It gives

you all the necessary information from start to finish including:

 What is in the toolkit?

 System requirements

 Installing

 Windows Phone Toolkit and Visual Studio

 Visual Studio Toolbox integration

 Expression Blend integration

 Unofficial builds

 Issue Tracker

In Chapters 3 through Chapter 22 you will learn how to use each one of the toolkit`s controls

“in depth” Each chapter contains the following main sections:

“Overview”: a brief description of the main features

“Getting Started”: explains how to get started using the control in XAML and C#

“Key Properties”/ “Key Methods”/ “Key Events”: a full explanation of the available public API

(with short samples)

Examples: Depending on the importance and how complex the control is there are more or

Source code

The full source code mentioned in this book can downloaded from here:

http://www.windowsphonegeek.com/WPToolkitBook

All sample projects from this book target Windows Phone 7.1 (Mango)

The following conventions are used regarding the source code (XAML and C#):

Half of this book is based on the “21 WP7 Toolkit in Depth articles covering all controls” series

of articles that I wrote and published on WindowsPhoneGeek.com a while ago:

http://www.windowsphonegeek.com/articles/21-WP7-Toolkit-in-Depth-articles-covering-all-controls

However, I have added some new chapters that are not published anywhere else and a lot of

new examples, explanations, etc

Why did I decide to write this FREE e-book?

Here are my points why I decided to write this book for FREE:

Point1 First of all, because “Silverlight for Windows Phone Toolkit” is a FREE library with great

controls, provided by Microsoft

Point2 There is a lot of paid content on the web regarding Windows Phone development and

quite a few FREE one This was the reason why I founded www.windowsphonegeek.com about

a year ago: to create a FREE community with high quality and up to date windows phone

development content So having in mind that there is no documentation for the toolkit or any

books available, I decided to write and share a FREE one

Introduction to Silverlight for Windows

Phone

The Windows Phone Application Platform enables developers to create engaging consumer

experiences running on a Windows® Phone It is built upon existing Microsoft® tools and

technologies such as Visual Studio, Expression Blend®, Silverlight®, and the XNA Framework

Developers already familiar with those technologies and their related tools will be able to

create new applications for Windows Phone without a steep learning curve

The Windows Phone Application Platform offers large set of tools, a cohesive and well designed

managed API set, runtime services on devices that can be used to access web services in the

cloud such as Xbox LIVE®, Windows Azure, location, and notification services It also offers

developers a Windows Phone Marketplace to distribute their applications

Silverlight 4 is the application development platform for Windows Phone 7.1 (High performance

gaming is also supported through the XNA Framework.) Silverlight is an event driven

application and UI framework which has a lot of controls with awesome tool support for styling

them 3D graphics are supported through perspective effects using PlaneProjection transform

Use Silverlight for Windows Phone Development if:

 You want a XAML based, event driven application framework

 You want rapid creation of a Rich Internet Application-style user interface

 You want to use Windows Phone controls

 You want to embed video inside your application

 You want to use an HTML web browser control

Silverlight for Windows Phone supports core Silverlight capabilities in managed NET code with

XAML including:

 High quality video and audio using a wide range of codecs, DRM and IIS Smooth Streaming

 Deep Zoom for enhanced reading and photo browsing experiences

 Vector and Bitmap Graphics and animation

Silverlight can access the unique capabilities of the phone including:

 Hardware acceleration for video and graphics

 Accelerometer for motion sensing

 Multi-touch

 Camera and microphone

 Location awareness

 Push notifications

 Native phone functionality

Silverlight can also utilize the XNA Framework for Audio capture and playback, Media Library

Access, and even accessing Xbox LIVE

These capabilities are all exposed via managed code and can easily be targeted by adding

Windows Phone specific libraries to your existing Silverlight applications You can then utilize

this functionality directly within your application, for example to data bind a map UI to the

current location or host an XNA Game Studio based game

Developers build Silverlight applications and package them for submission to the Windows

Phone Marketplace where users can download them to run on the phone on a trial or purchase

basis Silverlight for Windows Phone supports a built-in try/buy API to simplify the process of

converting a trial to full version for both developer and end consumer

Developers can use the same tools they already use to develop for NET, XAML and Silverlight

as development and design for the Silverlight applications on Windows Phone is supported

through Visual Studio 2010 and Expression Blend 4 for Windows Phone In addition, existing

Silverlight and NET code, libraries and mark-up can easily be re-used in Windows Phone

Silverlight applications The Windows Phone Emulator is integrated with both Visual Studio and

Expression Blend 4 for Windows Phone and provides a means for deploying, debugging and

executing Silverlight applications without access to a physical device

The first thing to consider when starting development of Windows Phone applications

is Installing Windows Phone Developer Tools The package includes all necessary tools like:

 Visual Studio 2010 - Visual Studio is the IDE for building Windows Phone applications

Within it, developers can create Silverlight or XNA Framework programs that run on

Windows Phone For more information, see Visual Studio 2010 Express for Windows

Phone

 Expression Blend - In the same way that designers use Expression Blend to design Rich

Internet Applications for the desktop browser, they can also design creative and unique

Silverlight-based applications on a Windows Phone Expression Blend for Windows Phone

allows designers to create XAML-based interfaces for Windows Phone applications, whose

behaviors can then be implemented by developers in Visual Studio For more information,

see Expression Blend

 Windows Phone Emulator - A Windows Phone Emulator is integrated into Visual Studio

and Expression Blend to make the testing and debugging of applications easier and more

efficient The emulator fully supports application deployment, debugging, and application

execution It includes support for GPU emulation and orientation change For more

information, see Windows Phone Emulator

In addition to the built in controls you can also use some open source components/libraries

Here is a list of some good ones provided by Microsoft:

 Silverlight for Windows Phone Toolkit - it includes some very helpful controls

like AutoCompleteBox, ListPicker, LoopingSelector, LongListSelector, Page

Transitions, GestureService/GestureListener, ContextMenu, DatePicker, TimePicker,

ToggleSwitch, WrapPanel, PerformanceProgressBar, TiltEffect and more

 Coding4Fun Toolkit - it includes About Prompt, Input Prompt, Progress Overlay (+

ProgressBar), Round Button, Round Toggle Button, Memory Counter, TimeSpanPicker,

ColorPicker and more It also exposes some abstract classes, converters, binding helpers,

data helpers etc

Introduction to Silverlight for Windows

Phone Toolkit

Silverlight for Windows Phone Toolkit is a FREE Open Source Framework that offers developers

additional components for Windows Phone application development, designed to match the

rich user experience of the Windows Phone

NOTE: In Silverlight for Windows Phone 7.1 Toolkit all controls are distributed through

Windows Phone class library projects built into assemblies which provide a reusable set of

classes, components, controls, and user interface elements that can be incorporated into

Silverlight-based applications.

Components included in the Silverlight for

Windows Phone Toolkit

What's included in the source code?

The source package includes:

 Complete C# source code

o Open Source Microsoft Public License

Suggestions? Features? Questions?

 You can ask questions in the App Hub forums

 You can add bugs or feature requests to the Issue Tracker:

Official Blogs & Tweets

Official: Windows Phone Developer Blog

Executives: Scott Guthrie, Joe Belfiore

Evangelists: Jaime Rodriguez, Pete Brown

Developers, Designers, Geeks: David Anson, Dave Relyea, Jeff Wilcox, Shawn Oster, Tim Heuer

What else will you need?

Before getting started using the Windows Phone Toolkit, you also need to install the following

tools:

 Optional Visual Basic / VB tools download

Getting Started with the Silverlight for Windows

Phone Toolkit

In order to get started using Silverlight for Windows Phone Toolkit, just go to

http://silverlight.codeplex.com/releases/view/71550 (This is the currently official release of the

Silverlight for Windows Phone Toolkit - August 2011(7.1 SDK)) There you have several options:

 Installing the Silverlight for Windows Phone Toolkit - Aug 2011.msi

 Download the full Source Code zip (Silverlight for Windows Phone Toolkit Source & Sample -

Option1: Install the Windows Phone Toolkit msi

If you choose this option you will have to download the msi file and install it:

Step1 Download Silverlight for Windows Phone Toolkit - Aug 2011.msi

Step2 Just run the installer as demonstrated below:

Step3 Check the “Accept” checkbox and press install:

Step4 After you have successfully installed the Windows Phone Toolkit you will find the

following folder on your hard drive: “Aug11” folder - Depending on the type of your OS in:

Here is what is in there:

1. - here you can find more information about the API

2 – contains information related to the Microsoft Public License (Ms-PL)

3 - contains all necessary assemblies:

Option2: Download the “Silverlight for Windows

Phone Toolkit Source & Sample - Aug 2011.zip”

Alternatively, if you do not want to install the msi file you can download “Silverlight for

Windows Phone Toolkit Source & Sample - Aug 2011.zip” which contains a sample project as

well as all the necessary assemblies:

Step1 Download Silverlight for Windows Phone Toolkit Source & Sample - Aug 2011.zip

Step2 Extract the zip file

Step3 You will find the full source code of Windows Phone Toolkit as well as a sample project:

Step4 Open the PhoneToolkit.sln file to run the whole solution with all projects inside

After that you can rebuild “Microsoft.Phone.Controls.Toolkit” class library project and get the

generated assemblies from the “Bin” folder:

Option3: Download only the XAP file

One more option that you have is to download Silverlight for Windows Phone Toolkit Sample

Application - Aug 2011.xap file:

Option4: Install Windows Phone Toolkit using

NuGet

NuGet is a Visual Studio extension that makes it easy to install and manage libraries and tools in

Visual Studio projects When you use NuGet to install a package, it copies the library files to

your solution and automatically updates your project (add references, change config files, etc)

If you remove a package, NuGet reverses whatever changes it made so that no clutter is left

Windows Phone Toolkit Aug 2011 (SDK 7.1) is available on NuGet here:

http://nuget.org/List/Packages/SilverlightToolkitWP

How to use unofficial builds

As all open source projects published on CodePlex, the Silverlight for Windows Phone Toolkit is

updated regularly Basically there are two types of change sets:

 Official: this is the officially published stable version which is usually reliable, carefully

tested and recommended for application development

 Unofficial: unofficial change sets usually contain small bug fixes or rarely - new features

and breaking changes It is not recommended to use unofficial change sets when

developing your applications Use them only if necessary and if there is no other solution

of the problem

Here is how you can use an unofficial change set:

Step1 Go to “Source Code” tab (http://silverlight.codeplex.com/SourceControl/list/changesets)

and select the desired change set you want to use as demonstrated below:

Step2 You can view all changes made since the last change set by pressing the “view diff” link

or you can directly press the “Download” link to start downloading the code:

Step3 Download the selected change set:

Step4 After extracting the zip you will find the full source code + sample project In order to get

the updated assemblies just open the extracted “Aug 2011 Source and Samples” folder, open

the solution file and rebuild Microsoft.Phone.Controls.Toolkit project:

After rebuilding Microsoft.Phone.Controls.Toolkit a new Bin folder is generated in:

C:\ \Silverlight for Windows Phone Toolkit Source & Sample - Aug 2011

from where you can get the Microsoft.Phone.Controls.Toolkit.dll assembly

How to use Windows Phone Toolkit in Visual Studio

The most common way to use the Silverlight for Windows Phone Toolkit controls and helper

classes is by adding a reference to “Microsoft.Phone.Controls.Toolkit.dll” in Visual Studio after

creating your Windows Phone application project Here are the basic steps you need to follow:

Step1 Create a new Windows Phone 7.1 Application project in Visual Studio:

Step2 Go to “References” and select “Add Reference…”:

Step3 Select “Microsoft.Phone.Controls.Toolkit.dll” You can find this assembly either in (If you

have installed the msi):

Or you can select it directly from the “ \Silverlight for Windows Phone Toolkit Source &

Sample - Aug 2011\WindowsPhone7\Bin\” if you have downloaded the “Silverlight for Windows

Phone Toolkit Source & Sample - Aug 2011.zip” instead

Step4 Go to the XAML part of your page and include the “toolkit” namespace After that you

can add the desired controls like for example:

How to add Windows Phone Toolkit Controls to the

Visual Studio Toolbox

Visual Studio Toolbox support is important when you want to "drag" and "drop" controls into

the visual designer instead of writing any XAML code by hand Adding a control from the

toolbox also automatically includes the necessary namespaces (xmlns) to your page So as a

result you can write a simple Windows Phone application just with a few mouse clicks and “no

code” However Windows Phone Toolkit controls are not automatically added to the Visual

Studio Toolbox when you add a reference to Microsoft.Phone.Controls.Toolkit.dll assembly so

you will need to add them on your own

In short, instead of adding the “toolkit” namespace and the desired control on your own (as

described in the previous section) you could add all controls to the Visual Studio Toolbox and

use them via “Drag&Drop”

In order to add the Windows Phone Toolkit Controls to the toolbox just follow the steps:

Step1 Create a new Windows Phone application project

Step2 Open the “Toolbox” tool window, right click and select “Add Tab”

Step3 Give a name to the newly created Tab like for example “WPToolkit”:

Step4 Again press the mouse right button but this time select the “Choose Items…” option

from the context menu:

Step5 A new window will appear from where you can select all the controls that you want to

be visible in the Visual Studio Toolbox (Note that you can select all controls or only a part of

them):

Step6 Press OK and go back to the “Toolbox” section Now you should see all Windows Phone

Toolkit controls there:

Step7 After that you can simply drag and drop the desired control onto the design surface:

Example:

Let`s say that we have dragged/dropped a DatePicker control If you take a look at the

generated XAML code you will notice the following namespace:

olkit"

This means that Visual Studio has automatically included the necessary namespace as well as an

instance of the DatePicker control (all the necessary XAML code has been automatically

generated):

You can now customize the DatePicker control either by changing its properties directly in code

(XAML or C#/VB) or by using the Visual Studio Properties tool window If “Properties Window”

is not visible by default you can open it either by pressing “Ctrl+W,P” or through the View tab

by selecting “View->Properties Window”:

How to use Windows Phone Toolkit in Expression

Blend

Expression Blend 4 for Windows Phone is automatically installed when installing the Windows

Phone Developer Tools Basically Microsoft Expression Blend is a user interface design tool with

lots of capabilities Key components of Expression Blend, including Behaviors, Visual State

Manager, transition effects, and SketchFlow (Expression Blend 4 includes SketchFlow in the

Expression Studio 4 Ultimate product only), coupled with the speed and flexibility of this

modern workflow, challenge you to push boundaries and work beyond the limits of what you

thought possible.(for more information visit the official web page:

In order to get started using the Windows Phone Toolkit Controls in Expression Blend

just follow the steps below:

Step1: Open Expression Blend 4 and go to “New Project” Here you can choose between several

Windows Phone application types:

 Windows Phone Application

 Windows Phone Database Application

 Windows Phone Panorama Application

 Windows Phone Pivot Application

 Windows Phone Control Library

Step2 Create a new Windows Phone application project and go to the “References” section,

right click and select “Add Reference…” to select “Microsoft.Phone.Controls.Toolkit.dll” as

demonstrated below:

Step3 After you have added the reference to “Microsoft.Phone.Controls.Toolkit.dll”, just go to

the “Assets” tab then “Controls” and you will see all controls there:

Step4 In order to use the Toolkit`s controls just “Drag and Drop” the desired control onto the

design surface: