×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

Well, the official Windows Phone Developer Tools are out!  Go get them. (warning likely some caching issues..direct installer here.)

The awesome Silverlight toolkit team is at it again, this time for Windows Phone 7.  The team is releasing a series of controls/libraries to help WP7 developers fill some gaps and simply make things easier and more consistent.  The initial set includes the following:

These controls are available for download including the source code.  Here’s a quick synopsis of them for you to enjoy.  Note that the “toolkit” prefix on the controls is declared in the app as:

   1: xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" 
   2: xmlns:toolkitPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls.Toolkit"

after adding a reference to the Microsoft.Phone.Controls.Toolkit assembly.

ContextMenu

In WP7 there is a notion of a context menu, where when the user holds down an item (tap and hold) it pops up a menu in-line with some options.  This is used in areas like the application list, where if you tap and hold an application you get the option to pin it to the start menu, uninstall, etc.  For the toolkit control this is implemented as a ContextMenu service.  For example, if I wanted to enable a context menu on my canvas I would use this markup:

   1: <Canvas HorizontalAlignment="Left" VerticalAlignment="Top" Width="345" Height="91" Margin="0,50,0,0">
   2:     <toolkit:ContextMenuService.ContextMenu>
   3:         <toolkit:ContextMenu>
   4:             <toolkit:MenuItem Header="pin to start menu" Click="OnMenuClicked" Tag="START_MENU" />
   5:             <toolkit:MenuItem Header="delete" Click="OnMenuClicked" Tag="DELETE" />
   6:             <toolkit:MenuItem Header="share" Click="OnMenuClicked" Tag="SHARE" />
   7:         </toolkit:ContextMenu>
   8:     </toolkit:ContextMenuService.ContextMenu>
   9:     <Rectangle Fill="#FFF4F4F5" Height="91" Stroke="Black" Width="345"/>
  10:     <TextBlock TextWrapping="Wrap" Text="Tap and Hold (zoom)" Foreground="Black" Canvas.Left="71" Canvas.Top="27"/>
  11: </Canvas>

And the result would look like:

ContextMenu control

There is an option to disable ‘zoom’ of the context menu, which follows the UI consistency of the device itself and is the default.  Additionally you could implement the actual command using ICommand on the particular item.

DatePicker and TimePicker

These are two controls I’ve seen attempted to create to mimic the actual device controls in the WP7 OS itself.  Some implementations have been better than others.  Here the UI is matched with the semantics of the device.  When using the control, it will automatically provide you with a TextBox input and when the user selects it, the picker will display.  The markup is very simple:

   1: <toolkit:DatePicker />

to produce the user experience when the user clicks on the input area:

WP7 Toolkit pickers

While shown above is the DatePicker, the TimePicker operates in similar fashion.

For the pickers you may notice that in my screenshot above I have the checkmark and the “x” icons in the ApplicationBar.  If you didn’t read the code comments in the toolkit you likely have “x” icon placeholders and are wondering why.  The toolkit provides the necessary icons for these, but you have to bring them into your application.  Once installed, look for them in the SDK folder and then add them using this well-known path:

WP7 toolkit icon layout

Once you have the PNG files there, be sure to mark them as Content so they are included correctly and then you should be good!

ToggleSwitch

If you notice areas in WP7 that have simple on/off settings you may want to provide a consistent look in your application.  The ToggleSwitch control does just that, providing not only the actual ToggleButton, but also the area for label/etc.  This area could be templated as well so if you needed more than just a single text heading listing.  The code:

   1: <toolkit:ToggleSwitch Header="my setting name" Height="118" Margin="0,0,-24,-34" Width="480"/>

and the resulting UI:

ToggleSwitch control

GestureHelper

Wish you had a library that made it easier to know when a ‘flick’ or ‘pinch’ gesture happened?  Enter GestureHelper.  Using this on elements like this:

   1: <Image x:Name="GesturedImage" Source="dividbyzero.jpg" HorizontalAlignment="Center" VerticalAlignment="Center" Width="450" 
   2:     RenderTransformOrigin="0.5,0.5">
   3:     <Image.RenderTransform>
   4:         <ScaleTransform x:Name="ImageScaling" ScaleX="1" ScaleY="1" />
   5:     </Image.RenderTransform>
   6:     <toolkit:GestureService.GestureListener>
   7:         <toolkit:GestureListener PinchDelta="OnPinchDelta" />
   8:     </toolkit:GestureService.GestureListener>
   9: </Image>

enables you to respond to these events when they happen and react accordingly:

   1: private void OnPinchDelta(object sender, PinchGestureEventArgs e)
   2: {
   3:     ImageScaling.ScaleX = e.DistanceRatio;
   4:     ImageScaling.ScaleY = e.DistanceRatio;
   5: }

Very helpful library!!  NOTE: the above sample is actually not goot ‘pinch’ scaling for an image, but merely here to demonstrate a quick point.

WrapPanel

The WrapPanel has been specifically ported for WP7.  Using the similar syntax:

   1: <toolkit:WrapPanel Orientation="Horizontal">
   2:     <Rectangle Fill="Blue" Width="100" Height="100" Stroke="Black" />
   3:     <Rectangle Fill="Red" Width="100" Height="100" Stroke="Black" />
   4:     <Rectangle Fill="Green" Width="100" Height="100" Stroke="Black" />
   5:     <Rectangle Fill="Gray" Width="100" Height="100" Stroke="Black" />
   6:     <Rectangle Fill="Yellow" Width="100" Height="100" Stroke="Black" />
   7:     <Rectangle Fill="Orange" Width="100" Height="100" Stroke="Black" />
   8:     <Rectangle Fill="Teal" Width="100" Height="100" Stroke="Black" />
   9:     <Rectangle Fill="White" Width="100" Height="100" Stroke="Black" />
  10:     <Rectangle Fill="Pink" Width="100" Height="100" Stroke="Black" />
  11:     <Rectangle Fill="Magenta" Width="100" Height="100" Stroke="Black" />
  12: </toolkit:WrapPanel>

would produce the elements within the WrapPanel to be placed accordingly for you:

WP7 Toolkit WrapPanel

This will be helpful especially in areas of displaying items in storage locations (i.e., pictures, album art) I think.

Summary

These controls are being made available for you to freely consume in your applications.  Go to the Silverlight Toolkit site right now and download the Silverlight for Windows Phone Toolkit and begin incorporating them into your applications today.  Be sure to leave feedback on the Codeplex site with any issues you may find with your scenarios.

Be sure to visit the Silverlight Toolkit site for the bits and also ensure you subscribe to Jeff Wilcox and David Anson’s blogs for what likely will follow more detailed and useful information about the toolkit items!

Hope this helps!


This work is licensed under a Creative Commons Attribution By license.


9/16/2010 9:56 AM | # re: Silverlight Toolkit for Windows Phone 7
Great article Tim, these controls are certainly useful.
9/16/2010 10:35 AM | # re: Silverlight Toolkit for Windows Phone 7
Tim, can you give us a workaround to get this (the WP7 dev tools) installed on Win2008 and Win2008R2 boxes? Don't even care about the express version of VS, just want the tools, etc... in our existing VS2010 instances. Many web-devs use Server (with desktop experience) for good reason.
9/16/2010 10:42 AM | # re: Silverlight Toolkit for Windows Phone 7
Is there a direct download for the ISO somewhere? We have several dev machines to install the tools on. It would be better to download it once than having each one run the web setup and download them separately. Thanks!
9/16/2010 12:12 PM | # re: Silverlight Toolkit for Windows Phone 7
ISO Image for offline setup is available here http://go.microsoft.com/fwlink/?LinkId=201927
9/16/2010 1:53 PM | # And the full version is when?
is is possible for windows phone in the future to have the full version of silverlight working correctly? This watered down silverlight doesn't really do anything for me.
9/16/2010 2:00 PM | # Absolutely.
Yes it will be exciting for the phone to support the latest version of silverlight. I am wondering if netflix will work on the phone - that would be good. I am wondering if you could use Telerik's silverlight UI suite with the phone in the future - that would be good too. I am also wondering if wcf ria services will work in the future. That would be nice as well. Like I said, the phone is nice to toy around with but can it do anything that I really really want? ...I dont know yet it's not out. :P
9/16/2010 3:24 PM | # 
I just hate seeing really great silverlight desktop apps not show up as intended. And, I honestly think it is getting to the point where the phone form factors are bridging the gap between the mobile and desktop space. HTC Evo makes it glaringly obvious that phones are indeed mini Playstation Portables.

Microsoft is the under dog in the mobile phone market. I am extremely happy to see Microsoft continue to compete in this category. I place my time with Microsoft because their tooling is superior and I'd like to see that tooling work in the mobile space as well as it does in the desktop space.

That being said, yes, you can build some very cool mobile apps and it is great to see what you can do with windows phone 7 today.

Anyway, it is always a pleasure reading your blog posts. Keep up the good work.

Also, I
9/16/2010 3:28 PM | # 
Let me finish that sentence:

Also good luck on that dive shop in Cancun.
9/17/2010 3:56 AM | # re: Silverlight Toolkit for Windows Phone 7
Hi Tim,

Any advantages in using this Wrap Panel over the one in the standard Silverlight toolkit?

Cheers
Andy
9/17/2010 2:18 PM | # re: Silverlight Toolkit for Windows Phone 7
Thank you for this post :) i'm working on an WP7 application and it's really helpfull .
9/24/2010 1:47 AM | # re: Silverlight Toolkit for Windows Phone 7
Hello

It was briefly referred to above, but can we assume that the WP7 platform will be able to make http web service calls / WCF (e.g. WebClient) to a server side ?

Otherwise Great Platform, Tools and Phone.

My main gripe is that as a non professsional developer, I have to subscribe to £100 to MS MarketPlace every year just to unlock and deploy my onw Apps to test and play on my own phone. So my interest in WM7 has somewhat dimmed.
9/28/2010 1:28 AM | # re: Silverlight Toolkit for Windows Phone 7
Did anyone succeed to localize the DatePickePage Title ?

I couldn't find any tip on this ...
10/3/2010 9:21 PM | # Binding with <toolkit:DatePicker>
How can we bind textblock with datepicker.
or how can i get the value of datepicker in any variable.
Plz help.
10/4/2010 6:35 AM | # re: Silverlight Toolkit for Windows Phone 7
How can i check the values of < toolkit:datepicker> so that i can so some operations on tht.

Plz reply
1/30/2011 6:16 AM | # re: Silverlight Toolkit for Windows Phone 7
How do I apply the ContextMenu against Items within a ListBox. Surely that is the most common use of ContextMenu.
Can anyone point me to how to raise a 'Delete/Rename' Context Menu against items in a ListBox control?
10/1/2013 3:43 AM | # re: Silverlight Toolkit for Windows Phone 7
Its helpful, but How do I apply the ContextMenu against Items within a ListBox. Can anyone point me to how to raise a Delete Context Menu against items in a ListBox control?

 
Please add 1 and 7 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.