Category Archives: Windows Phone

WP8 XAML App Development @ Build 2012

I gave my Build 2012 talk this week and it was all around WP8 XAML app development showing off some of cool new features in the XAML platform that you can incorporate into your apps.

A huge thanks to all the people that showed up, gave feedback and asked questions! I know a few people asked me questions via e-mail & twitter and if I missed your question apologies, I’ll be more than happy to answer any remaining ones now that things have calmed down a little. I wasn’t able to go into deep detail on everything I wanted to so if there was something you want to see more of just drop me a comment.

The talk, like all the other great Build talks, was recorded and is available to watch directly from channel9 or you can download it and watch it offline.  I’ve also posted the source for my demo and the deck itself.  Some parts of the source may look a little different from the demo and that’s because I cleaned it up and streamlined it some, I have a hard time sometimes leaving code as is, especially if I see a way to make it better.

Download Source + Deck for WP8 XAML App Development (hosted on Azure!)

Windows Phone Toolkit - September 2012 Release

A few astute people (@Patric68@scottisafool) have noticed that we pushed out the September 2012 release of the Windows Phone Toolkit.  This was a soft launch, quietly pushed out because we’ve been going like crazy with bug fixes, prepping for Build and doing a whole host of things and I really wanted to get a build out that had the latest fixes and improvements without blocking on all the paperwork. That’s agile baby!

What’s New


It’s now just the “Windows Phone Toolkit”.  Honestly “Silverlight for Windows Phone Toolkit” was too much of a mouthful and new developers targeting Windows Phone often don’t know of the Silverlight underpinnings.  We’re slowly transitioning all branding in the source to the shorter version.


Sample CustomMessageBox Image

CustomMessageBox is a new control that makes it easy to create, well, custom message boxes that look and feel just like the default ones on the phone.  I did a little write-up of it last week in my blog post, “Welcome CustomMessageBox to the Windows Phone Toolkit”.


Sample Rating Control Image

Rating is another new control that does exactly what it says, provides a rating control that matches the Windows Phone UI.  Expect a blog post on using it soon but it as always you can see it in action by downloading the sample application from CodePlex.

Transition Effects

There are new transition effects that make it even easier to match the Windows Phone UX.

  • SlideInEffect – Ever notice when you’re in a Pivot or Panorama on the phone in one of the native experiences , say the People Hub, how the items in a list slide in on a separate animation as you swipe back and forth?  It’s subtle but adds a nice level of polish to the whole experience and now it’s super easy to add to your application as well.  There is a new attached property, toolkit:SlideInEffect that you set on each item in your DataTemplate that controls the order in which elements slide in:
        <StackPanel Margin="0,0,0,17" Width="432">
            <TextBlock Text="{Binding LineOne}" 
                       Style="{StaticResource PhoneTextExtraLargeStyle}"/>
            <TextBlock Text="{Binding LineTwo}" 
                       Style="{StaticResource PhoneTextAccentStyle}"
            <TextBlock Text="{Binding LineTwo}" 
                       Style="{StaticResource PhoneTextSubtleStyle}"
  • FeatherTransition – Another common effect seen on Windows Phone is a “feathering” in of the controls on a page such as when you launch the mail app.  Notice how the items on the page feather in from top to bottom.
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="{StaticResource ApplicationTitle}" 
                    Style="{StaticResource PhoneTextNormalStyle}"
        <TextBlock Text="turnstilefeathereffect" 
                    Style="{StaticResource PhoneTextTitle1Style}"

Distribution / Installation

We’ve taken a new approach to distribution this time and gone “all-in” on NuGet as the official way to install the toolkit.  We’ll no longer be supporting an MSI-based installer as it’s not very maintainable or discoverable.  NuGet is built into Visual Studio 2012 and is fast becoming the de-facto standard for installing packages and if you haven’t already installed the plug-in for Visual Studio 2010 I highly recommend it.

As always you can still either download the source as a zip or from the source control on CodePlex and compiling the assembly yourself.

Bug Fixes

No release is complete without bug fixes and we have roughly 25 of the top user voted bugs fixed in this release.


As always we love feedback, bug reports, creative uses and ideas.  We have more plans for the toolkit in the near future as well so stay tuned!

Welcome CustomMessageBox to the Windows Phone Toolkit

A big welcome to CustomMessageBox, a new control to the toolkit which is exactly what it sounds like, a customizable, Windows Phone-UI compliant, easy to use message box offering the following features:

  • Native look & feel including font sizes, layout, alignment and animations
  • Ability to display full screen or to only consume as much space as needed
  • Very simple “basic” mode with ability to easily extend it to complex scenarios
  • Customizable buttons without needing to re-template

Here is what it looks like, from the basic (a message and some buttons) to the complex (a full screen message box with an embedded Pivot):


Getting Started

As of today (9/30/2012) you’ll need to download the latest source from CodePlex and recompile the toolkit assembly to use it but we’ll soon have an updated NuGet package for your convenience. As usual add a reference to the Microsoft.Phone.Controls.Toolkit.dll to your project and add the toolkit XML namespace to the top of your XAML:


Basic Usage

The basic usage is very similar to the default MessageBox and how you’re probably used to using dialogs in other UI platforms; set some properties, call Show(), handle the event that is raised when the user returns from the dialog.

Possible values to customize are:

  • Caption – sets the title caption of the message box
  • Message – the actual message to display to the user
  • LeftButtonContent, RightButtonContent – the buttons that appear on the bottom of the dialog, if you omit the text then the button won’t be shown.

To handle the user’s selection hook up the Dismissed() event and look at the e.Result value which is of type CustomMessageBoxResult indicating which, if any, button was tapped. If the user presses the back button vs. making a selection the result will be None.

Finally to kick-off the whole process call Show(). Show() is non-blocking so be aware that any code you put after the Show() call will run before the user has made a selection.

By default the the message box only takes up as much space as required but you can force it to full-screen by setting the property IsFullScreen to true.

Simple Example

To recreate the first message box in the screen shot do the following in code-behind:

CustomMessageBox messageBox = new CustomMessageBox()
    Caption = "Do you like this sample?",
    Message = "There are tons of things you can do using custom message boxes. To learn more, be sure to check out the source code at CodePlex.",
    LeftButtonContent = "yes",
    RightButtonContent = "no"
messageBox.Dismissed += (s1, e1) =>
        switch (e1.Result)
            case CustomMessageBoxResult.LeftButton:
                // Do something.
            case CustomMessageBoxResult.RightButton:
                // Do something.
            case CustomMessageBoxResult.None:
                // Do something.

The title caption, message and buttons are configured, the Dismissed() event is assigned a handler and finally the Show() method is called to kick off the party.

Taking It Up A Notch

That’s all well and good but where is the real “custom” part of the CustomMessageBox? That comes in with the Content property where you insert your own content into the overall layout. You can define your extra content in either code-behind or as a XAML resource and then set it to the Content of the CustomMessageBox.

The content area exists below where the Message is displayed yet right above the buttons.

Let’s say we want to recreate this dialog:


Via Code-Behind

One way to go about it would be to create all the custom content inline at the time of invocation:

HyperlinkButton hyperlinkButton = new HyperlinkButton()
    Content = "Privacy Statement",
    Margin = new Thickness(0, 28, 0, 8),
    HorizontalAlignment = HorizontalAlignment.Left,
    NavigateUri = new Uri("", UriKind.Absolute)
TiltEffect.SetIsTiltEnabled(hyperlinkButton, true);
CustomMessageBox messageBox = new CustomMessageBox()
    Caption = "Allow this application to access and use your location?",
    Message = "Sharing this information helps us provide and improve the location-based services offered for this phone. We won't use the information to identify or contact you.",
    Content = hyperlinkButton,
    LeftButtonContent = "allow",
    RightButtonContent = "cancel"

The HyperlinkButton is created in code, tilt effect is set on the HyperlinkButton and to hook it together the HyperlinkButton is assigned to the Content property.


Another approach is to create it as a DataTemplate in either the page or application resources and when you configure the dialog set the ContentTemplate property which may prove easier for more complicated templates.

<DataTemplate x:Key="HyperlinkContentTemplate">
    <HyperlinkButton Content="Privacy Statement"
                        TargetName="_blank" />

Now the code-behind looks like this:

CustomMessageBox messageBox = new CustomMessageBox()
    Caption = "Allow this application to access and use your location?",
    Message = "Sharing this information helps us provide and improve the location-based services offered for this phone. We won't use the information to identify or contact you.",
    ContentTemplate = (DataTemplate)this.Resources["HyperlinkContentTemplate"],
    LeftButtonContent = "allow",
    RightButtonContent = "cancel"

More Samples

You can find more examples, including the source to the “What Can I Say?” screenshot I showed above, in the Toolkit Samples project which you can either get via downloading the latest source or looking at it directly on CodePlex.

As always feedback is appreciated via either comments here or on CodePlex. We review each piece of feedback and we do get to them, if sometimes a little later than we’d like. Our goal is to make it so you can focus on writing your application vs. having to recreate the UI you see on the phone.

How to make the Windows Phone Toolkit ToggleSwitch Header wrap

I’m going through the Windows Phone Toolkit bugs fixing some of the low hanging fruit and came across this bug where a ToggleSwitch with a long header is clipped.  The proper Metro behavior is that it should wrap which is easy enough to do on a TextBlock.  The rub though is that the Header is represented by a ContentControl, not a TextBlock.

ContentControl makes it easy to put whatever you’d like into the Header; images, other controls, buttons, etc. and is the standard Silverlight way of representing content.  This is great for an open-ended environment like the Silverlight plug-in where each app has it’s own UI but on the phone you want as close to the Metro UI as you can get.  In a perfect world (or just one with a time machine) we would have made Header a TextBlock with wrapping turned on but, well, we didn’t.  We’re still debating if we should just make the switch and deal with the fall out but until then here is a super simple way to ensure your Header text wraps when it needs to:

<toolkit:ToggleSwitch Header="This is an example of a really long description label for localization">
            <TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
                        FontSize="{StaticResource PhoneFontSizeNormal}"
                        Foreground="{StaticResource PhoneSubtleBrush}"
                        Text="{Binding}" />

Which gets you:


If you’re going to do any type of localization I recommend you make this change to all your ToggleSwitch controls.

Unable to Clear East Asian Text from a TextBox in Windows Phone (or always clear your TextBox focus)

We’ve received several reports of apps that don’t clear out their text even though the app author is setting the Text property to an empty string.  I did a little poking and it’s due to a combination of the application bar and IME.  The onscreen keyboard (SIP) enters a composition mode when working with East Asian languages that allows for quickly entering complex words and phrases and it ends once the SIP is dismissed.  If the text is modified programmatically while it’s in this mode it’ll behave unpredictably, the most obvious issue being that it doesn’t update to reflect the text you’ve set in your code behind.

You can tell if a TextBox is in this mode by the underline underneath the current character you’re editing:


Because the ApplicationBar isn’t drawn or managed by Silverlight focus won’t properly be taken away from the currently active control (the TextBox) and any attempt to change the text via the Text property will put the TextBox into the state I mentioned above.  The most common way this happens is performing some action on the text such as sending a message and then attempting to clear it out.

private void ApplicationBarIconButton_Click(object sender, EventArgs e)
    MessageTextBox.Text = "";

Luckily the work around is easy, force the SIP to be dismissed before clearing the Text property and everything will work as expected.  The most common/easiest way is to set focus to the page itself:

private void ApplicationBarIconButton_Click(object sender, EventArgs e)
    // Set focus to the page ensuring all TextBox controls are properly commited
    // and that the IME session has been correctly closed.
    MessageTextBox.Text = "";

I recommend putting this code anywhere you’re clearing out a TextBox as you never know what language your users will be typing in.

Using RestSharp with AgFx in your Windows Phone app

I’m using the excellent REST library RestSharp for all my REST and OAuth calls.  I’m also using the amazing data caching framework AgFx written by Shawn Burke which handles caching your web requests, something that goes from a nice to have to critical when writing high performance Windows Phone apps.

Out of the box AgFx handles all your requests so it can do it’s caching thing, getting in the front of each request to determine if it should give you a cached version instead of hitting the web, if it should invalidate the cache, if it should give you a cached version and then make a live request, etc.  This is how you want it but sometimes you want more control over how those live requests are made.  In my case I’m using OAuth and requesting protected resources that require OAuth access tokens and RestSharp has some very nice methods for both authenticating and making those pesky protected calls.  The question is how to slip RestSharp into the middle of the AgFx mechanism?

AgFx Out of the Box

Your basic AgFx call looks like this:

ZipCodeVm viewModel = DataManager.Current.Load<ZipCodeVm>(txtZipCode.Text);

Which eventually executes code like this (which you the developer has written):

public LoadRequest GetLoadRequest(ZipCodeLoadContext loadContext, Type objectType)
    // build the URI, return a WebLoadRequest.
    string uri = String.Format(ZipCodeUriFormat, loadContext.ZipCode);
    return new WebLoadRequest(loadContext, new Uri(uri));

AgFx will call GetLoadRequest() to get a LoadRequest which it’ll use when it needs to fetch live data.  This example is using the default WebLoadRequest which uses HttpWebRequest under the covers to fetch the data but as long as you return an object that descends from LoadRequest you can use whatever requesting mechanism you like.


That’s where RestSharp comes in.  Instead of hand-crafting HTTP requests including hand-crafting headers and building POST payloads I’m going to let RestSharp do the heavy lifting by creating a custom RestSharpLoadRequest.  It’s based heavily on the WebLoadRequest in AgFX, right down to the comments and took all of 15 minutes to code up.  It’s not that exciting of a class but you can download it and view it on github as a gist:

An AgFx LoadRequest that uses RestSharp to make the actual request, supports passing in OAuth tokens

Download it and drop it into your application as is (well, I’d probably change the namespace to something more appropriate).  Sorry about it being a tar.gz file, maybe I’ll ping Phil Haack now that he works there to offer up .zips for gists as well.

WOW, sorry folks, I didn’t realize I’d created the Gist as private, if you tried to view it before you should have better luck now.

RestSharpLoadRequest in Action

I’m going straight to a meaty example where I create a few parameters to throw on the URL and pass in all my OAuth token goodness:

public LoadRequest GetLoadRequest(ShelfLoadContext loadContext, Type objectType)
    var resource = BuildResource(
        new Dictionary()
            {"v", "2"},
            {"id", loadContext.UserId},
            {"page", loadContext.Page.ToString()},
            {"shelf", loadContext.Shelf}
    return new RestSharpLoadRequest(

Don’t worry about the BuildResource call, that’s simply building up your REST API end-point (aka “resource”).  The only difference from the standard usage of AgFx is instead of a WebLoadRequest I’m using RestSharpLoadRequest.

And there you have it, now you can lean on RestSharp inside of the AgFx framework.  Also If you’re using Hammock as your REST library as choice it should take all of 15 minutes to whip up a HammockLoadRequest following the same basic principles.

UPDATE (02.14.2010): The way I was handing parameters above was just plain weird, the RestRequest object that I’m using inside of RestSharpLoadRequest already has robust AddParameter() logic so I exposed it.  The above code now looks like this:

public override LoadRequest GetLoadRequest(ShelfLoadContext loadContext, Type objectType)
    var request = new RestSharpLoadRequest(
    request.AddParameter("key", GoodReadsClient.Current.ConsumerKey);
    request.AddParameter("shelf", loadContext.Shelf);
    request.AddParameter("v", "2");
    request.AddParameter("id", loadContext.UserId);
    request.AddParameter("page", loadContext.Page.ToString());
    return request;

Not only does it leverage existing code it follows the pattern most RestSharp/Hammock users are used to, namely you create the request and then you add on parameters.

Selecting into an ObservableCollection in LINQ: a ToObservable() extension method for Enumerable

I love me to some LINQ, especially some LINQ to XML (otherwise known as XLinq) for parsing meaty XML files into objects.  Anywhere there is XML parsing going on in my app you’ll see code similar to this:

var list = (from review in reviews.Descendants("review")
            select new BookReview
                StartedAt = (string)review.Element("started_at"),
                Book = (from b in review.Elements("book")
                        select new Book((string)b.Element("id"))
                            Title = (string)b.Element("title"),
                            CoverUrl = new Uri((string)b.Element("image_url")),
                            NumberOfPages = (string)b.Element("num_pages"),
                            AverageRating = (string)b.Element("average_rating"),
                            Description = (string)b.Element("description").Value,
                            Authors = (from a in b.Descendants("author")
                                        select new Author
                                            Name = (string)a.Element("name")

This is a medium complexity example, I’m selecting a list of BookReview objects which contains a Book which in turn has a collection of Author objects. 

One thing to pay attention to is that the default return type for a collection of items returned via Linq is a Enumerable and if you’re using a different collection type you’ll need to use one of the built-in extension methods to convert it to the appropriate collection type.  You can see where I’m doing this on the last line above with the call to ToList().

There are built-in extension methods to convert to List, Dictionary, Array and a bevy of others but not ObservableCollection, which you’re probably using in some form if you’re data binding your collection to your UI.  You could select into an Enumerable and then manually add each item into your ObservableCollection but that’s no fun and it’s much simpler to just write your own Enumerable extension method to take care of it:

public static class Enumerable
    public static ObservableCollection<TSource> ToObservable<TSource>(this IEnumerable<TSource> source)
        return new ObservableCollection<TSource>(source);

I’m using it in the first sample to convert the Authors collection.  Hope you find this useful, I know I use it all the time in my Windows Phone apps!

By the way it’s also a “gist”, a version controlled snippet, over on  LinqExtensions.cs.

A few of my favorite tips for writing Windows Phone applications end-to-end

I’m currently working on a GoodReads client for Windows Phone and while I’ve written a ton of phone code for various demos, API smoke testing, targeted “how do I” questions, etc. it’s an entirely different beast to write an application end-to-end.  The technical questions are often the easiest and if you’ve been coding for more than a few years (or months, you rockstar you) the problems and questions that keep you up at night shift from technical (“how do I save an image to the phone?”) to architectural (“what’s the best pattern for integrating a REST client into my caching framework?”).

As a knowledge and data capturing exercise I’m collecting the various articles, resources and code snippets that I found extremely helpful as I fleshed out my application, grouped by the order I came across the issues and roughly the order I architected my application.

This is a “live” document that will to continue to grow as I finish my application. Also if you’ve found articles that made a key difference in your application development let me know so I can check them out!

User Experience/UI Design

Kudu UI Sketch

Close down Visual Studio, stop building up your class library and do something that you’ve been told is anathema to good development.  Start with your UI and build out from there.  It is key you understand the layout of your application, roughly what each page will look, what functions it’ll perform, what states it can be in. Seriously. I crafted this lovely rich client that modeled my entire backend in a clean, crisp way and then I threw it all away.  Why? Because when I started mapping the client to my UI I was making 3 or 4 calls to the backend when if I’d just understand HOW I’d be displaying it I would have crafted my middle-layer differently.  It’s one of the dirty secrets of creating lean and mean apps, you do end up building you middle-tier to optimize for the end result, not as some model that has been delivered from high on top.

  • When you need a little more structure than just a piece of blank paper try the Windows Phone Sketch Pad from UI Stencils.  I love this sketch pad and it helped me a ton in crafting my UI and work flow.
  • Make sure you’re familiar with the User Experience Design Guidelines for Windows Phone over on MSDN as you start thinking about your application.
  • The Windows 7 Snipping Tool.  It’s already on your machine (you are running Win7 right?) and I use it about a dozen times a day to screen grab my current page and drop it into Paint.NET to take pixel measurements to make sure my UI is as close Metro design guidelines as possible.


  • You’ll need to think about caching if you deal with any significant amount of data and on a mobile device that pretty much means any data at all.  I’m using Shawn Burke’s excellent web request data caching framework AgFx.
  • I am using a form of MVVM but I haven’t jumped on board with either Prism or MVVM Light, mostly because I’m a nerd and I don’t trust anyone else’s code until I’ve written my own framework, formed my own opinion of how things should be done and then adopt the one that I best align with.


A great number of applications are skins over some backend that requires a login and these days there is a good chance it’s via OAuth.  It’s actually not that hard but it can be a huge in the arse to debug and get just right as each back-end does things just slightly differently.  Here are the articles that helped me along:

  • From my colleague Sam Jarawan I cribbed a bunch of code from his article, “Building a ‘real’ Windows Phone 7 Twitter App Part 2 – oAuth
  • I used both excellent .NET REST helper libs Hammock & RestSharp.  I ran into some issues with params with square brackets using Hammock so had to switch to RestSharp but I honestly couldn’t find any major different between the two to recommend one over the other.  RestSharp seems to have a slightly more active community and docs.
  • A lot of apps simply won’t work if you don’t log in so you want to conditionally show a login page based on some state.  For that turn to Peter Torr’s blog post, “Redirecting an initial navigation”.



My supporting cast of tools.

  • Git - Whether you’re a lone wolf, a pack of one, coding the next great thing or a corporate developer you need to version control. If you’re in a company you probably already have a solution but if you’re a coffee shop coder you may not be using anything and that my friend is a mistake. You’ll get on a caffeine buzz and decide to refactor your entire application only to get distracted and find your app in pieces wishing you could just get back to how everything was pre-latté. There are a ton of great source control systems but lately I’ve been using git like all the cool kids. To do local versioning is a snap, without the need for a server or service running. I also still love Subversion and the server I put in place at my last job is still rocking along being a source control hero.
  • Dropbox – I code on three different machines and Dropbox makes it possible for me not to worry if I have the latest source for my project. Best of all it works well with my source control so I get portability as well as versioning.

Recreating the Windows Phone 7 message “bubble” style in Silverlight

In a little app I’m working on to exercise some new Mango features I needed to create the message “bubble” and oddly enough didn’t stumble across any samples I could easily use even though a large number of apps have recreated this style, most likely because it’s so easy to do.


Here was my first take and it’s very hard-coded to the above look but it should be trivial to change it around.  Also there are dozen ways you could make this more reusable, either as a template for a ContentControl or as a new control.  If anyone has any suggestions for improvements or a better resource I’d love to see it!


<!-- bubble -->
<Grid Grid.Column="1"
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
	<Path Data="M 16,12 16,0 0,12"
			Fill="{StaticResource PhoneAccentBrush}"
			VerticalAlignment="Top" />
	<!-- Your actual content here -->
	<StackPanel Grid.Row="1"
				Background="{StaticResource PhoneAccentBrush}">
		<TextBlock Text="{Binding Mood}"
					Style="{StaticResource PhoneTextNormalStyle}"
					VerticalAlignment="Top" />
		<TextBlock Text="{Binding LastUpdated, StringFormat='g'}"
					Style="{StaticResource PhoneTextSubtleStyle}"
					FontFamily="Segoe WP SemiLight" />

Note for the sharp-eyed I’m using a feature that is new for Mango that exists in Silverlight 4 which is default string formatting in bindings.

Extension method to get a page’s ProgressIndicator

In Mango we added the ability to interact with the shell’s native progress indicator along the top of the page.  This is a great way to maintain UI consistency with the phone as well as get a smooth progress animation because the system is handling the animation vs. the Silverlight runtime.  Here I’m recreating the ‘save to phone’ menu item you can see in the pictures hub by adding a “Saving picture…” progress indicator:


There are some great articles on using the new ProgressIndicator out there and I won’t do yet another intro blog post but I did want to share a little extension method I wrote to grab it from the page and avoid some of the annoying initialization code that you end up writing over and over again.

Some of my favorite ProgressIndicator articles so far for those looking to explore this in more depth are:

And here is my little extension method I’ve found useful on a few pages:

public static class Extensions
    public static ProgressIndicator GetProgressIndicator(this PhoneApplicationPage page)
        var progressIndicator = SystemTray.ProgressIndicator;
        if (progressIndicator == null)
            progressIndicator = new ProgressIndicator();
            SystemTray.SetProgressIndicator(page, progressIndicator);
        return progressIndicator;

I’m playing with using some of the various code snippet websites out there and this is embedded from Smipple. I’d love to see more Windows Phone snippets pop up on these sites.

UPDATE: Scratch the idea of embedding Smipple snippets via embed code, it looks awesome but seems to tweak my formatting, going back to good old syntax highlighted.