Windows phone toolkit aug 2011 in depth v1

Silverlight for Windows Phone Toolkit in Depth

Silverlight for Windows
Phone Toolkit

In Depth
by Boryana Miloshevska

www.windowsphonegeek.com

2


Silverlight for Windows Phone Toolkit in Depth

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)

www.windowsphonegeek.com

3


Silverlight for Windows Phone Toolkit in Depth

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

www.windowsphonegeek.com

4


Silverlight for Windows Phone Toolkit in Depth

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

www.windowsphonegeek.com

5

Silverlight for Windows Phone Toolkit in Depth

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

www.windowsphonegeek.com

6


Silverlight for Windows Phone Toolkit in Depth

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

www.windowsphonegeek.com

7


Silverlight for Windows Phone Toolkit in Depth

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

www.windowsphonegeek.com

8


Silverlight for Windows Phone Toolkit in Depth

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

www.windowsphonegeek.com

9

Silverlight for Windows Phone Toolkit in Depth

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
Toolkit including:
o
o
o
o
o
o
o
o
o

o
o
o
o
o
o
o
o
o

AutoCompleteBox
ContextMenu
DatePicker
DateTimeConverters
ExpanderView
Gestures
HeaderedItemsControl
HubTile
ListPicker
LocalizedResources
LockablePivot
LoopingSelector
LongListSelector
MultiselectList
Page Transitions
PerformanceProgressbar

PhoneTextBox
WrapPanel

www.windowsphonegeek.com

10


Silverlight for Windows Phone Toolkit in Depth

o
o
o

TiltEffect
TimePicker
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
less examples with source code and detailed explanation.

www.windowsphonegeek.com

11


Silverlight for Windows Phone Toolkit in Depth

Source code
The full source code mentioned in this book can downloaded from here:
/>All sample projects from this book target Windows Phone 7.1 (Mango).
The following conventions are used regarding the source code (XAML and C#):
XAML
//XAML code here

C#
//C# code here

NOTE: Important things here!

What else?
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:
/>
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

www.windowsphonegeek.com

12


Silverlight for Windows Phone Toolkit in Depth

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.

www.windowsphonegeek.com

13


Silverlight for Windows Phone Toolkit in Depth

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

www.windowsphonegeek.com

14


Silverlight for Windows Phone Toolkit in Depth






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

www.windowsphonegeek.com

15


Silverlight for Windows Phone Toolkit in Depth

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.

www.windowsphonegeek.com

16


Silverlight for Windows Phone Toolkit in Depth

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























AutoCompleteBox
ContextMenu
DatePicker
DateTimeConverters
ExpanderView
Gestures
HeaderedItemsControl
HubTile
ListPicker
LocalizedResources
LockablePivot
LoopingSelector
LongListSelector
MultiselectList
Page Transitions
PerformanceProgressbar
PhoneTextBox
WrapPanel
TiltEffect
TimePicker
ToggleSwitch

www.windowsphonegeek.com

17

Silverlight for Windows Phone Toolkit in Depth

What's included in the source code?
The source package includes:


Complete C# source code
o Open Source Microsoft Public License
 Sample application
o AutoCompleteBox
o ContextMenu
o DatePicker
o DateTimeConverters
o ExpanderView
o Gestures
o HeaderedItemsControl
o HubTile
o ListPicker
o LocalizedResources
o LockablePivot
o LoopingSelector
o LongListSelector
o MultiselectList
o Page Transitions
o PerformanceProgressbar
o PhoneTextBox
o WrapPanel
o TiltEffect

o TimePicker
o ToggleSwitch

Suggestions? Features? Questions?



You can ask questions in the App Hub forums.
You can add bugs or feature requests to the Issue Tracker:

www.windowsphonegeek.com

18


Silverlight for Windows Phone Toolkit in Depth

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:



The Windows Phone Developer Tools

Optional Visual Basic / VB tools download

www.windowsphonegeek.com

19


Silverlight for Windows Phone Toolkit in Depth

Getting Started with the Silverlight for Windows
Phone Toolkit
In order to get started using Silverlight for Windows Phone Toolkit, just go to
(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 Aug 2011.zip)
 Download only the XAP file (Silverlight for Windows Phone Toolkit Sample Application - Aug
2011.xap)
 Install the Silverlight for Windows Phone Toolkit using NuGet

www.windowsphonegeek.com

20