Unfortunately, most map controls, such as the Bing Maps control included with the platform, are highly sophisticated: they let you have a bunch of pushpins, gather information about bounding boxes, etc. This awesome feature set can have a negative effect on performance.

2/1/2012 Update: Thanks to Tim Heuer, who just provided a pull request that adds an OpenStreetMap provider, MapQuest provider, offers the ability to add an authentication key optionally as a property on the control, and to specify the type of maps. I’ve updated NuGet to 1.1 with these contributions, thanks!

My static map control is simple but nice because it’s an easy replacement, can be used in Panorama/Pivots, and overall still has a great, high-speed experience that your users will enjoy.

A sample static Bing Map from 4th & Mayor: touching the map takes you to an interactive map view page allow for directions, panning, etc.

“JeffWilcox.Maps” Component

I’ve refactored one of the libraries used in my app to be general enough for others to use: it offers simple static map code in the form of a “StaticMap” control: just drop it into your XAML page and you’re mostly good to go.

The MapCenter property takes a GeoCoordinate, either data bind it or set the property as the page is navigated to.

Over time I’ll consider adding more of the functionality I’ve had to the library, including the interactive libraries.

Get the library

I’m using my favorite pair of deployment places for this library: GitHub for source, NuGet for binaries.

NuGet

The library is JeffWilcox.Maps

Source on GitHub

Fork the repo, wp-maps

Offering an interactive experience

To optimize the maps experience, I instead decided to use the static map REST APIs from Bing Maps for my mobile application: this lets me perform a HTTP request, grab the image, and data bind it into my display.

I then place it inside a borderless, retemplated Button control, so that touching the map takes you to a new page: an experience where I can show the real Bing Maps control, your current position, as well as the location of the place you are trying to go. By moving this to a separate assembly, I get great performance wins: the Bing Maps control and other code needed to offer the rich interactive experience is delay loaded and only there when needed.

Properties on the control

These properties are on the initial version of the control:

Foreground is supported and used for the implicit, centered point: it’s Black by default to match the Windows Phone’s “Maps” app, but I find that using {StaticResource PhoneAccentBrush} looks great in my opinion.

MapCenter takes a GeoCoordinate, this is a key property.

ZoomLevel sets the zoom level (default of 15 I think) for the map. 1 effectively shows a bunch of the world, and 21 shows street level sizes. The zoom levels for Goog and Bing are pretty similar.

MapCenterVisibility defaults to Visible, and if you decide you don’t want the center point to be on the view, just set this to Collapsed.

IsSensorCoordinate should be data bound, some APIs (like Google’s) require that the API call identify whether it’s a position from a sensor, or a database. In my case, sensor is used for any GeoCoordinateWatcher/LocationService code, while I set it to False for data from the Foursquare venues database where I get info about a place.

Provider sets the static map provider to use.

The height and width are automatically identified by the system, but many APIs limit the width and height to small numbers (typically <= 640 pixels in any direction), FYI.

Bing Maps API Key

If you’re using Bing Maps, you’ll need a Bing Maps API key and to make sure that your app is compliant with the requirements of its terms and conditions. This is the same key you use with the Bing Maps control.

For this first version you have to set the API key as a string resource inside your App.xaml file.

Here’s how you would go about this: add the namespace and set the string – I’ve put a comment where your key should go in App.xaml:

<Application
    x:Class="StaticMapSample.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:core="clr-namespace:System;assembly=mscorlib">

    <!--Application Resources-->
    <Application.Resources>
        <core:String x:Key="BingMapsKey"><!-- Place your Bing Maps API key here--></core:String>
    </Application.Resources>

    <Application.ApplicationLifetimeObjects>
        <!--Required object that handles lifetime events for the application-->
        <shell:PhoneApplicationService
            Launching="Application_Launching" Closing="Application_Closing"
            Activated="Application_Activated" Deactivated="Application_Deactivated"/>
    </Application.ApplicationLifetimeObjects>

</Application>

I haven’t decided if this is better or worse than just exposing an API key property for you to bind or set on the page, but I really like just having one central place in an app to put the key.

Static map providers

The initial implementation has a simple enum for chosing between two provider choices, Bing Maps and Google Maps. I’ve decided to include Google Maps because it turns out that in some parts of the world, Google Maps are much better, and I’ve had hundreds of app users ask for a setting to instead use Google Maps. There are slightly different requirements for its API, such as exposing an “open in web browser” function so that the user could decide to open the same map view in the browser on the phone.

Just set the Provider property on the StaticMap to either Bing or Google. The default is Bing, as it should be!

Here’s a screenshot of the sample app I’ve included in the GitHub repo (though if you use it, remember to put your Bing Maps API key inside of the App.xaml file first!) – it has both Bing and Google Maps, and the application bar is hooked up to events to open the Maps app on the phone or to open the browser with the appropriate map page. Take a look.

On the right, the expanded app bar: your app may need to expose the “open in browser” option to comply with the terms and conditions that you interpret on the maps API of your choice. Also, the “open in maps app” is a nice function to provide users who want to open the location in the main OS’s Maps app.

Design note: flush maps

One design technique that I use in my app, as does the “Local Scout” app in Mango, is having a “flush” map experience: the map extends to the edge of the phone, instead of the standard spacing with margins from the edges of the phone.

This visual effect looks great, and can in general be created by setting the Margin of the control to “-12,0,-12,0”.

Hope this helps.

This afternoon I read another of Arturo Toledo’s amazing series on Windows Phone Design – and it’s a simple but important point: apps are not just a choice between a Page, a Panorama, or a Pivot: many apps have aspects of all of these. The Music+Videos hub on the phone is built of all 3, and your app can pull that off, too: just understand the ideal content and purposes of these different types of core experiences.

31 Weeks of Windows Phone Metro Design | #5 Choosing between Panoramas, Pivots and/or Pages
Arturo Toledo
Senior User Experience Designer – Windows Phone Team at Microsoft

I “borrowed” this image from Arturo’s post.

He’s had other great posts in the past, too, and expect great content to come.

Do follow Arturo: @arturot, Blog here, RSS

One of the most common feature requests that I receive for 4th & Mayor is a setting in the app to force it to always use the “Light” theme, overriding the dark/light theme that the user’s set for their theme.

Having a light background is a nice contrasting design look for the phone, and the Mail application always does this. I personally always submit mostly light theme screen shots for my applications to the Windows Phone Marketplace, it just looks better and nice to me – but I rarely use all-light themed apps other than Mail.

In preparing for the next update of my app, v3.3, I’ve coded up this capability and I’m sharing it ahead of time.

Technical Overview

In 7.0 there were a few ways to do theme overriding, sometimes through a few silly platform bugs that we left in there – but it’s actually not an easy thing to do, and many people end up overriding every single style in their app to get the effect that they are going for.

This helper library is designed for altering the entire application’s running instance, not for providing per-page theme overriding.

In researching possible ways to solve this, I did come across this page on windowsphonegeek that talks about ways to merge in styles or to programmatically override resources that are brushes.

I decided to create a system to walk through the known values and names for all the core theme resources of colors, brushes, plus the light/dark theme visibility and opacity properties.

In your app, you simply call `ThemeManager.ToLightTheme()`, `ThemeManager.ToDarkTheme()`, `ThemeManager.InvertTheme`, to force this. You need to have this call happen inside your App.xaml.cs file, in the constructor, after the Initialize calls.

You cannot change or call this more than once, so if you offer a setting for users to “Force Light”, use a MessageBox to inform them that their setting will be used the next time they start the app. You will have to read their setting right away when they start up the app. Once styles start applying the values, you could start to get inconsistent results.

The code walks and updates the Color instances, then walks the Brush resources and sets their Colors to be the original Color instances, just in case.

I have placed the ThemeManager class within the Microsoft.Phone.Controls namespace for this to be easy to add to your App.xaml.cs file.

You should have an App constructor like this:

/// <summary>
/// Constructor for the Application object.
/// </summary>
public App()
{
    // Global handler for uncaught exceptions.
    UnhandledException += Application_UnhandledException;

    // Standard Silverlight initialization
    InitializeComponent();

    // Phone-specific initialization
    InitializePhoneApplication();

    ThemeManager.ToLightTheme();

    // Other code that might be here already...
}

What’s themed

By default this is what happens:

• The resources for foreground, background, all the contrast/chrome/etc. colors and brushes are updated
• The light and dark theme visibility and opacity resources are updated
• The background brush of the Frame is set explicitly to the color (may have a negative performance impact!)
• The System Tray whenever a page navigation completes
• The ApplicationBar of a page if set immediately

I’ve added a simple OverrideOptions enum (static) to the ThemeManager that can be used to disable the auto-behaviors I’ve added.

Newing up AppBars

If you have code in your app like “var ab = new ApplicationBar”, beware that that application bar will take on the system’s actual theme colors by default, and not the overridden light/dark coloring that happens with the app.

If you need to new up an ApplicationBar, you should use the convenience method of `ThemeManager.CreateApplicationBar()` or use the extension method on app bar that I added, `MatchOverriddenTheme`, to set the color values.

What’s not themed

Unfortunately this cannot theme MessageBox at all.

Talking about fill rate performance

I’ve designed the system so that resources are only overridden when needed.

If your app uses ToLightTheme to force the light theme, and the user is running the Light theme already, nothing happens – it’s a no-op.

Although updating resources has no negative effect really on the app’s performance, the trouble is setting the Background color of the phone application’s frame.

The frame is always present and may add a fill count of 1.0 to every single page in your app.

Anything above a fill rate of 2-3 is not a good thing, so you may notice a degraded experience. Might want to inform your users of that when providing the option to force the light theme, for example.

A note about your battery

Many Windows Phones use AMOLED or similar technology where bright colors, such as the background color used in the Light theme, will use a lot of power. Please respect your users and realize that long-running apps probably should not force the Light option.

Consider only making such a “Force Light Theme” option as a setting that users opt-in to, as opposed to always overriding the theme.

About custom themes

When I designed this library, I thought about offering a ton of capability in it for using “branding” colors, modifying the accent brush, etc., but instead decided to tackle just one thing. So the name ThemeManager is a little overkill maybe, but it’s where we are for now.

Get the bits

NuGet Binary

The binary is super easy to use. With NuGet just add the PhoneThemeManager package reference.

NuGet Source File

Instead of adding yet another assembly to your project, just add the single source file (or add it to your existing shared library, etc.) by using the PhoneThemeManager.Source package.

GitHub Repo

Fork and enjoy https://github.com/jeffwilcox/wp-thememanager

Hope this helps.

The next update of my app is in the works and performance is significantly improved by this library. I used both generation 1 and gen 2 devices to gather a ton of data and am loving the results. Can’t wait to submit the update to the marketplace. I’ve been seeing requests speed up 50%-80%, it’s amazing – but I should note, these are unofficial numbers, I’m just grabbing these from my app that is JSON-heavy.

Some sample data: a large set of averaged requests of a very large JSON request to the Foursquare web services used in my app, 4th & Mayor for Windows Phone 7.5.

These numbers aren’t official or anything like that, just what I was observing using my 3G data connection here in Seattle or home WiFi. Also interesting are the fastest times for the content – I often found that once a data connection was open, I would get as low as 100ms for some GZip requests. Just amazing.

One of the awesome modern web server features that nearly every browser happily supports today is Gzip compression of its output. Text and JSON beautifully compress, often by more than half, resulting in quick content downloads. It’s a simple and awesome way to improve the performance and responsiveness of your applications.

This isn’t a new technology, but unfortunately it isn’t just a default, built-in option for you to use in your Windows Phone apps, and you can expect that competing apps on other platforms (and even on Windows Phone) will be using Gzip to improve the performance. Hopefully we fix this in the future.

Frankly it isn’t a default in most mobile platforms, either, and you need to opt-in. However, some, like iOS, seem to automatically deflate incoming streams as long as you opt-in by setting the content encoding headers; in an iOS app, you just addValue “gzip” forHTTPHeaderField before your request and you’re good from there. Android is similar but you do need to check for gzip in responses and manually new up a deflating stream with GZipInputStream.

HTTP Gzip and Windows Phone apps

So Morten Nielsen created a wrapping WebClient library over 6 months ago and through a few iterations has made it great.

So now it’s super easy to get this perf win. To make this work:

• Add the library to your project via NuGet [SharpGIS.GZipWebClient]
• Replace your WebClient code to use GZipWebClient instead – yes, just rename! (GZipWebClient is in Morten’s `SharpGIS` namespace)
• Test and ship your app!

Now I’m not considering the server-side, but if you’re rolling your own web services, you might need to do some work to make sure that you’ll serve GZip content when the capability is ready on the client. Check with the documentation for your server-side app platform, cloud provider or web server technology.

I can totally see myself adding this to my core libraries for all future projects. Hope this helps. Thanks Morten for providing this to the community! You can follow Morten on Twitter (@dotMorten) or check out his blog (http://www.sharpgis.net/).

(And on the performance side: the smaller payload means networking rocks and is fast; it is worth noting that GZip adds a small amount of CPU load – hopefully in your background thread – but I haven’t detected anything negative from this yet)

Metro Radio is a slick and functional Pandora application for the Windows Phone. Like many apps, there are plenty of small little UX things that could make it even better. I saw the app recently and really like it, but as a stickler on design things, I’d love to make a few small tweaks if I could!

I briefly spoke with the application’s developer, Mustafa Taleb, and obtained his OK to me to write a little post just pointing out a few things. The app really does rock, but it’s also probably a place that in the next update a few visual blemishes could be fixed to yield an even better app.

So I’m going to point out simple things to think about when building out your UI. I have 9 points about simple spacing/design/margin things, and then a quick comment on the icon.

Margin Issues and other easy XAML Fixes

It’s pretty easy to overlook margins while developing applications. Between having controls like TextBlock that expect an associated Style, and most controls like Button that have an integrated margin and touch area, it  can be tough to either notice OR spend the time to fine-tune these things.

I don’t have the source to the app, so I am going to be overlaying yellow lines on top of the marketplace screen shots to help show potential issues with margins.

Text blocks: when to case plus the classic 12px left margin issue when not using styles

So here we have a few basics.

1. Consider all uppercase for the small font app title (very top visual in a page’s default template), unless you have branding or other reasons for that change.

2. Consider all lowercase for the larger page title.

Now these two aren’t hard-and-fast. I’m inconsistent in my apps, too. But I believe that you should be consistent: if you choose one, choose both.

3. Use the PhoneTextNormalStyle or other provided textblock styles OR hard-code at least a 12px left margin for text blocks. That way you align with other default visuals.

In this screen capture I overlaid a yellow block over the 12px space – really all the text should be to the right of that block, not under.

Here’s a super classic login page experience. And actually it is affected by the same issue of not using Style={StaticResource PhoneTextNormalStyle} in those TextBlocks, I’m guessing.

4. 12px issues create jagged forms often.

Recommended fix: Use the styles that are provided. The left of the text and the other controls should be aligned flush, not jagged like in this form.

Again this is because the default Margin of all TextBlocks is 0, but on the phone the styles set a left margin of 12px to allow for flush alignment.

Looking into Pivot specifics

Now on this one, there are just a few simple things when using pivots.

5. Consider lowercase pivot item headers.

It’s consistent with what you’ll find throughout the official phone user interface. This can either be accomplished through hard-coding lowercase in your XAML, using a string converter that goes lowercase with binding, or by doing it on the model/data side of your app.

6. Everything in a Pivot control should usually align left flush.

This page seems to have the actual item content off by 12-to-24 pixels, instead of allowing all things on the left to be flush.

Additionally, the space between the Pivot header and item is off by maybe just 2- or 4- pixels.

Look into spacing and alignment a lot on list pages

This is one of the screen captures of the list results when searching for the text ‘today’, one of the marketplace example screen shots. It could use some alignment and cleanup and could probably be cleaned up in a good 10 minutes of XAML hacking

7. Visually check for alignment consistency.

I’ve drawn a yellow line to try and show that many items here are not aligned: images, group headers, the top search controls, etc. This could be fixed in Blend through some movements or just in XAML by slowly adjusting by 2-, 4-, 8-, however many pixels until things are nicely aligned.

8. Try spacing list items by the same value on the top and bottom.

It looks pretty inconsistent when a list item (like the first here) has 2- or 4- pixels on the top, but then what looks to be 18 pixels or so on the bottom.

Instead using a consistent value for the top and bottom will let all items look natural regardless of whether they are first or last.

9. Have space between items and text.

The data template for these results could use some spacing between the album art and the text.

My guess is that this is another example of hard-coding font values instead of using the standard PhoneTextLargeStyle or PhoneTextNormalStyle with a TextBlock. That would add a nice left margin of 12px back into the UI.

And another quick example, this is a list page from the app that has some of the same underlying potential spacing issues:

And now, the best page in the app!

This is the playback experience and page. It rocks. It’s smooth, visually awesome, has good information, and is styled on the in-app Music+Videos UI. If I had to nit-pic, I might want to put 6- or 12- pixels of margin spacing on top between the artist name and song title at the top, but it’s nice.

Marketplace Application Tile

When I looked up Metro Radio using the Web Marketplace, the icon was … hardly there. This might be on purpose, but it’s really not a great branding experience – my guess is this either is a take on, or based on, the regular app icon, which adjusts itself to the accent color of the phone (hence a transparent background color).

Trouble with using the same asset is that the Web Marketplace, the Zune Marketplace, and even in some situations the regular Marketplace app on the phone, don’t do the same replacement with accent colors – so you get a visually difficult to see tile.

On-the-phone

This looks great. It’s important to realize that the different asset sets and sizes are used in different places – whether web marketplace, app, etc., you should always try and submit your best icon forward if you can!

Web Marketplace

Here you can see the hard-to-see tile for the app.

Suggested Fix: Always use a background color (easy if you’re layering in Photoshop or a similar tool) for your actual marketplace submission’s tile.

Zune Marketplace

Same icon issue here.

Hope this is useful. Thanks Mustafa for letting me write this post! And I should note, I’m publishing this without running it by him – he’s completely possible that some of these things were intentional design choices. If so, sorry if I have not agreed with them!

A phone developer who’s also an enthusiast of foursquare suggested a feature that I should add in a future release, and provided some sample code based on the zxing barcode library and the Silverlight port of it. I’m working on adding the new feature soon.

In the process I realized it would be a good and quick opportunity to ship such a simple but useful control to the phone development community, so I’ve gone ahead and pushed that control refactoring and implementation to GitHub, check it out: https://github.com/jeffwilcox/wpqr-control 

Special thanks to Michael Osthege (@theCake, blog) for providing the initial contact, sample, and encouragement.

The control is nice:

• Drop it on the design surface
• Wire up the ScanComplete event (and optionally the Error event)
• The control handles all the underlying image manipulation, scanning work, PhotoCamera initialization, etc.

Here’s what a simple sample app looks like in use. The control includes default border thickness and coloring properties that use the accent color and provide a nice visual separator:

Technically the control will expand to its container size, but I prefer the squared-off 400×400 grid myself.

Building the sample app

All I did to build this app was drop the control into a new Windows Phone app project and wire it up. Here’s how.

References and XMLNS

Add either a project reference (if you cloned the git repo) or build the project and include references to assemblies, both the zxing library plus this control library.

To your XAML page where you’d like to use the control, make sure to include a namespace. Here’s what I used:

xmlns:jwqr="clr-namespace:JeffWilcox.Controls;assembly=JeffWilcox.Controls.QR"

Add the control

I added this XAML to my MainPage’s ContentPanel area:

<jwqr:QRCodeScanner
    ScanComplete="QRCodeScanner_ScanComplete"
    Error="QRCodeScanner_Error"
    Width="400"
    Height="400"/>

Implement code behind

The event handlers are easy enough. In my case, I went for these (just throwing exceptions):

private void QRCodeScanner_ScanComplete(object sender, JeffWilcox.Controls.ScanCompleteEventArgs e)
{
    ApplicationTitle.Text = e.Result;
}

private void QRCodeScanner_Error(object sender, JeffWilcox.Controls.ScanFailureEventArgs e)
{
    throw e.Exception;
}

Run the project on a Windows Phone

Hit F5! When you hover over a QR code, you should see its embedded text appear in place of the application title (top of the page).

Future/Improvements

I’d like to maybe add a sound when the scan is successful, but right now, nothing like that.

Eventually I may package this up as a NuGet package, but I’m not ready to prep the right spec files plus figure out how to properly attribute the sub-libraries at this time. So fork the GitHub version in the meantime! License is Apache 2.0 for both this library as well as the underlying zxing project.

(Looking to display codes? A few years back I briefly talked about the QR code system used by the sweet Starbucks mobile app on the iPhone. I implemented a prototype for Silverlight and Windows Phone that lets you render a QR code on the app’s surface, thanks to a nice QR code library. That post is here.)

Hope this helps.

I’m sharing this with the community, I hope you enjoy! It makes the emulator look great I must say.

Download and install the theme

• Download a zip file of these these resources (158 KB)
• Ensure the emulator is closed
• Locate the emulator directory – usually something like C:\Program Files (x86)\Microsoft XDE\1.0\
• Backup the existing WM7_Skin.xml file if you may want to go back
• Extract the files into the emulator directory – note that you will need administrative permissions to overwrite the files
• Start up the emulator!

Enjoy!

Tonight I pushed to GitHub ‘mpns’, a simple interface and helper to the Microsoft Push Notification Service (MPNS). It essentially takes the simple properties for your live tile update or toast, packages it in a simple XML payload, and then posts it to the subscription endpoint.

It isn’t a lot of code, but I sure hope it helps others who may be experimenting with other platforms while building a great push experience. If you’re using Azure, the Windows Phone team has already provided some awesome content here – Yochay has previously posted about a Windows Push Notification Server Side Helper Library.

This module is on NPM as ‘mpns’ or you clone or submodule it from GitHub: https://github.com/jeffwilcox/mpns

Here’s some simple usage information that I’ve also posted to GitHub.

Load in the module

var mpns = require('mpns');

Create a new notification

You can create a new notification object (either of type live tile or toast). Raw notifications are not yet supported.

Property names for the notification object directly correlate to the names used in the MPNS XML payload as documented on MSDN. Properties can either be set directly on the object (such as toast.text1) or by passing the values in as options to the constructor.

options =   { text1: 'Hello!'
            , text2: 'Great to see you today.'
            };

var toast = new mpns.toast(options);

Sending a notification

To send a notification simply call the send method on the object. The first parameter is the HTTP URI to the MPNS endpoint of the client you’d like to send the notification to. You may provide an optional callback function as well.

toast.send('http://sn1.notify.live.net/throttledthirdparty/01.00/YOUR_ENDPOINT_HERE');

You can also use the other syntax. Let’s send a live tile update!

var toast = new mpns.liveTile();
toast.title: 'My App';
toast.backgroundUri: 'http://sample.com/image.png';
toast.send('http://sn1.notify.live.net/throttledthirdparty/01.00/YOUR_ENDPOINT_HERE', function(err,res) {
    if (err) console.dir(err);
    else console.dir(res);
});

Results object information

A results object is passed back through the callback and has important information from MPNS.

• deviceConnectionStatus: The device status as reported by the service.
• notificationStatus: The status of your provided notification.
• subscriptionStatus: The status of the subscription URI.

The object will also contain all the key fields for your toast or live tile update, plus the pushType. This makes it easy to store this information in a history log somewhere in the ether.

Handling Errors

It is very important as a consumer that you store appropriate actionable data about failed push notification attempts. As a result, the callback’s first parameter (err) is set to the standard results object as well as a few additional fields depending on the returned status code from the server.

Remember to take action on that information in order to be a good MPNS citizen. These values may be set in the error object and of interest to you:

• minutesToDelay: If this is present, it is the suggested minimum amount of time that you should wait until making another request to the same subscription URI. For HTTP 412s, for example, the minimum time is one hour and so the returned value defaults to 61.
• shouldDeleteChannel: If this is set to true, the channel is gone according to MPNS. Delete it from your channel/subscription database and never look back.
• error: If an error is captured while trying to make the HTTP request, this will be set to that error callback instance.

A note about Windows Phone 7.5

This module permits sending toasts and tiles specific to Mango. If you include the param field when sending a push to a 7.0 (first Windows Phone release) phone, unfortunately it may not be received, or will error out the subscription.

Take care when registering your subscription channels with your cloud service to include the application platform version of the app (7.1 for Mango apps). To rock, maybe also grab the OS version and deployed app version. That information can be helpful when supporting customers.

Hope this helps!

For this release the team focused entirely on reported issues, important blockers for people, and we’ve been sharing updates in near-real-time through the Source Control part of the CodePlex site.

Download the Nov 2011 release

Download the MSI
Get the package through NuGet

Download the Samples and Source
View the release notes and download page
Browse the Source on CodePlex

Changes in this release

Here is a summary listing of the changes in this release:

Larger changes

• ListPicker once again works in a ScrollViewer
• LongListSelector bug fixes around OutOfRange exceptions, wrong ordering of items, grouping issues, and scrolling events. ItemTuple is now refactored to be the public type LongListSelectorItem to provide users better access to the values in selection changed handlers.
• PerformanceProgressBar binding fix for IsIndeterminate (item 9767 and others)
• There is no longer a GestureListener dependency with the ContextMenu, WrapPanel, and ListPicker
• The GestureListener should be considered deprecated for all Windows Phone 7.1 SDK development. There is no direct replacement at this time, though the platform now supports events such as Tap right on visual elements.

Other improvements

• Updates the ExpanderView sample so that each individual item has its own tilt effect.
• Fixes PhoneTextBox bugs 9342 and 9345
• PhoneTextBox hides actionitem when empty
• ListPicker can be in horizontally scrollable views.
• ListPicker now only supports Tap for activation (before it supported any touch that began in bounds and stayed in bounds)
• The LongListSelector’s Background color now is used for the picker grid to enable better app/brand styling
• LongListSelector state name correction
• Comments added to clarify that ListPicker does not support UIElements directly by design since the framework only permits one instance of a UI Element in the tree at a time
• ExpanderView visual glitch fixed (9525)
• Additional null checks in ContextMenu visual state change methods
• ListPicker SelectedItems is now settable
• Small fixes to ToggleSwitch
• A startup crash correction in the gesture listener.
• The ExpanderView sample is documented better
• LockablePivot’s IsLocked property is now a dependency property
• RelativeTimerConverter fixes a UTC bug and no longer throws on future dates
• Fixes some reported issues with VB.NET samples
• Fixed a ToggleSwitchButton reanimation issue.
• Owner is a public property now on ContextMenu
• Handle listpicker selected item with a null items
• Fixes sample issues when building.
• Fixes build warnings.

Hope you enjoy the new release.

I wanted to share this simple method with others – it’s so easy to re-template HB, and it removes the need to have code-behind for handling touches on buttons and other visual elements. It’s also a good way to create large hit-target friendly places for your users’ to touch.

I even make it more simple by exposing a ‘LocalUri’ property on almost all of my data objects, navigating to the proper contextual page for the item, complete with the identifying data in the URI, so that the new page can work from anywhere. It’s fun and quick to data bind.

HyperlinkButton Benefits

• No code behind is needed to navigate to pages within your application or even a web page in Internet Explorer
• Easy to data bind the NavigateUri if you expose a local navigation Uri property on your model / view model / data bound objects
• Mimics the Windows Phone’s metro UI that offers similar concepts throughout the People hubs and other apps
• Saves lots of useless code for calling NavigationService.Navigate
• Cuts down on bugs since your data objects provide their own app navigation URIs, so you can make bug fixes and changes in a centralized place

Large touch targets

One thing I di was enlarge the touch targets. I make sure that the hyperlink button is stretched to the width of the phone, so you can touch the item even easier. In the image above, if you imagine a poorer implementation, the hyperlink button might end right at the edge of the “here now” text, making it more difficult to touch:

Instead I make sure the item is stretched so there’s more space for someone to interact by setting HorizontalAlignment to Stretch on the control, etc.

Touch target testing made easy

An easy way to test your touch targets while developing is to temporarily modify your central “EmptyButtonStyle” style and have the Grid background set to Yellow (or another color) temporarily. Then you can walk through your application and easily see the touch targets your hyperlink buttons are exposing.

Tilt effect

Make sure to use the Silverlight for Windows Phone Toolkit’s TiltEffect. Since HyperlinkButton derives from ButtonBase, you will get the nice tilt effect for free this way when you use it on your pages.

Styling the inner content

Things that I look for when placing content inside such a hyperlink button includes alignment, spacing (6, 12, 24px offsets), and coloring. I try and mimic much of the user interface that I see throughout the Windows Phone’s main apps, as well as using the standard Styles and static resources provided in the framework.

The idea of my “EmptyButtonStyle” is that whatever content you put inside is the control, otherwise it has no visuals.

A common piece of XAML might look like this:

<HyperlinkButton
    NavigateUri="{Binding HereNow.LocalUri}"
    Margin="0,12,0,0"
    HorizontalAlignment="Stretch"
    HorizontalContentAlignment="Left"
    Style="{StaticResource EmptyButtonStyle}">
    <StackPanel>
        <TextBlock
            Style="{StaticResource PhoneTextLargeStyle}"
            Text="here now" />
        <TextBlock
            Style="{StaticResource PhoneTextNormalStyle}"
            Foreground="{StaticResource PhoneAccentBrush}"
            Text="{Binding HereNow.Text, Converter={StaticResource Cap}, ConverterParameter=lowercase}" />
    </StackPanel>
</HyperlinkButton>

My HyperlinkButton style (also works with Button)

This is the template that I use. By placing it in my App.xaml file, it is accessible anywhere throughout my application, making it easy and quick to use. I actually expose both a Style and a ControlTemplate in my app, but the Style should be fine for most folks.

<Style x:Key="EmptyButtonStyle" TargetType="primitives:ButtonBase">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="primitives:ButtonBase">
                <Border Background="{TemplateBinding Background}"
                    Padding="{TemplateBinding Padding}">
                    <ContentPresenter
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    Content="{TemplateBinding Content}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Don’t forget to set the xmlns primitives at the top of your App.xaml (or page’s XAML):

xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows"

Since it actually targets ButtonBase, you can use it with regular Buttons, as well as hyperlink buttons. Hope this helps!

This is useful for apps that need to be running on a real device, or if you need to capture transitions or difficult-to-reproduce actions.

Using ScreenShots.cs

Drop the code into your project, or use NuGet. Then, open up App.xaml.cs (where the performance counters and other debug viz tools are) and add this code to enable the screenshots:

ScreenShots.BeginTakingPictures();

Of course you could also add it just to a specific page.

The default interval for captures is every 2 seconds, but you can optionally provide a value for that, too. For example, to take two pictures a second,

ScreenShots.BeginTakingPictures(0.5);

Reminder: don’t ship with this as you’ll fill your phone’s storage with captures! I’d recommend commenting out the code most of the time. You could also add screen shot capability in a hidden debug screen in your app, etc.

Getting the screenshots from isolated storage

To actually get the screenshots, you can use the “isolated storage tool" that is hidden away in the new 7.1 SDK. From a command prompt, just run ISETool.exe:

pushd C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\IsolatedStorageExplorerTool

ISETool ts de <GUID>

You can also provide a location to store the assets. I believe it uses the current directory otherwise.

You can get your app ID from the WMAppManifest.xml file that’s in your project’s Properties folder.

Another option is to use Oren’s nice Windows Phone Power Tools (CodePlex link) to super easily do this (I highly recommend this):

Get ScreenShot.cs

I’ve published to NuGet this source file:

• Make sure you have NuGet (http://www.nuget.org/)
• Grab ScreenShots.cs (Install-Package ScreenShots.cs)

Or here’s the source:

//
// Copyright (c) 2010-2011 Jeff Wilcox
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

using System;
using System.Diagnostics;
using System.Globalization;
using System.IO;
using System.IO.IsolatedStorage;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Threading;

namespace System.Windows
{
    /// <summary>
    /// Offers the ability to store images every two seconds into the isolated
    /// storage that can then be retrieved using the isolated storage tool in
    /// the 7.1 SDK.
    /// </summary>
    public class ScreenShots
    {
        private ScreenShots()
        {
            _isf = IsolatedStorageFile.GetUserStoreForApplication();

            try
            {
                _isf.CreateDirectory("screenshots");
            }
            catch
            {
                // OK the directory already exists.
            }
        }

        private DispatcherTimer _dt;
        private double _interval;
        private IsolatedStorageFile _isf;
        private static ScreenShots _instance;

        public static void BeginTakingPictures(double interval = 2.0)
        {
            if (_instance == null)
            {
                _instance = new ScreenShots();
                _instance.Start(interval);
            }
            else if (_instance._dt != null)
            {
                _instance._dt.Start();
            }
        }

        public static void Stop()
        {
            if (_instance != null && _instance._dt != null)
            {
                _instance._dt.Stop();
            }
        }

        private void Start(double interval)
        {
            _interval = interval;

            if (_dt == null)
            {
                _dt = new DispatcherTimer();
                _dt.Interval = TimeSpan.FromSeconds(_interval);
                _dt.Tick += OnTick;
                _dt.Start();
            }
        }

        private void OnTick(object sender, EventArgs e)
        {
            var ui = Application.Current.RootVisual;
            try
            {
                if (ui != null)
                {
                    FrameworkElement fe = ui as FrameworkElement;
                    if (fe != null)
                    {
                        var width = fe.ActualWidth;
                        var height = fe.ActualHeight;

                        WriteableBitmap wb = new WriteableBitmap(ui,
                            new TranslateTransform());
                        wb.Render(ui, new TranslateTransform());
                        byte[] bb = EncodeToJpeg(wb);

                        string filename = "screenshots\\"
                            + DateTime.Now.Ticks
                            .ToString(CultureInfo.InvariantCulture)
                            + ".jpg";
                        using (var st = _isf.CreateFile(filename))
                        {
                            st.Write(bb, 0, bb.Length);
                        }

                        Debug.WriteLine("Saved screenshot to " + filename);
                    }
                }
            }
            catch (Exception)
            {
            }
        }

        public byte[] EncodeToJpeg(WriteableBitmap wb)
        {
            using (MemoryStream stream = new MemoryStream())
            {
                wb.SaveJpeg(
                    stream,
                    wb.PixelWidth,
                    wb.PixelHeight,
                    0,
                    85);
                return stream.ToArray();
            }
        }
    }
}

Hope this helps.

On Thursday, I stopped by the Windows Phone Design Team’s beautiful studio space here on campus. It’s a really creative space, packed with fun people, chill music, and a genuine desire to see even better, more beautiful apps in the marketplace.

While sitting with two of the UX designers, Corrina and Arturo, and talking about some of these design principles, I just happened to be introduced to a nifty, albeit simple, gridline/grid that the team’s been using for some time while working on the Windows Phone. It’s just a set of red squares, 25×25 pixels, offset 12 pixels from one another, and all contained within a page padding of 24px. (Again: the magical Metro number is 12-based on those edges)

The design typically will use a Photoshop layer containing these squares, or maybe some XAML inserted on top of a page in an app, to work on alignment, visualizing the grid, etc., and making tweaks.

I got to thinking: it would be nice if this could be just like the performance counters that we have for the Windows Phone: at debug time, you could opt into overlaying this grid on top of the frame of the entire app, being omnipresent. I coded up a quick implementation during that meeting and here it is!

To use the counter, simply open up the App.xaml.cs file (where the other performance counters are) and add this in. I’d recommend just enabling it when you want to do a quick design pass. You can use this then both with apps on your phone as well as the emulator; it’s helpful in the emulator since you can then screenshot the UI and share that with your friends and family who can critique you on your pixel placement.

// Show graphics profiling information while debugging.
if (System.Diagnostics.Debugger.IsAttached)
{
    // Display the current frame rate counters.
    Application.Current.Host.Settings.EnableFrameRateCounter = true;

    // Display the metro grid helper.
    MetroGridHelper.IsVisible = true;

Here’s what it looks like at runtime in a very simple app:

In this example, I have one of the classic Windows Phone design “bugs”: one of the TextBlocks has just been inserted, without using the appropriate standard phone style. As a result, it has a Margin value of “0” instead of being 12 pixels offset from the left. It’s more clear now with the squares, since you can see the misalignment easily.

I’ve also added simple static properties for Opacity and Color if you’d rather not use the Red default color and ~0.15 opacity on the squares. The IsVisible property can be flipped off at runtime, but beware that the grid is still present in the visual tree once you add it – so there will be a performance hit (don’t ship an app that uses the grid in release builds).

Get the source

I’ve published the source file on NuGet – that’s a really easy way to get the file into your project, and if I make any fixes or add features in the future, it’ll be easy for you to get those changes:

• Make sure you have NuGet installed (http://www.nuget.org/)
• Install the package using the console or package manager. It is called MetroGridHelper

  PM> Install-Package MetroGridHelper

Or you can drop this source code into a new file of your project, MetroGridHelper.cs:

// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.

using System.Collections.Generic;
using System.Diagnostics;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

namespace System.Windows
{
    /// <summary>
    /// A utility class that overlays a designer-friendly grid on top of the
    /// application frame, for use similar to the performance counters in
    /// App.xaml.cs. The color and opacity are configurable. The grid contains
    /// a number of squares that are 24x24, offset with 12px gutters, and all
    /// 24px away from the edge of the device.
    /// </summary>
    public static class MetroGridHelper
    {
        private static bool _visible;
        private static double _opacity = 0.15;
        private static Color _color = Colors.Red;
        private static List<Rectangle> _squares;
        private static Grid _grid;

        /// <summary>
        /// Gets or sets a value indicating whether the designer grid is
        /// visible on top of the application's frame.
        /// </summary>
        public static bool IsVisible
        {
            get
            {
                return _visible;
            }
            set
            {
                _visible = value;
                UpdateGrid();
            }
        }

        /// <summary>
        /// Gets or sets the color to use for the grid's squares.
        /// </summary>
        public static Color Color
        {
            get { return _color; }
            set
            {
                _color = value;
                UpdateGrid();
            }
        }

        /// <summary>
        /// Gets or sets a value indicating the opacity for the grid's squares.
        /// </summary>
        public static double Opacity
        {
            get { return _opacity; }
            set
            {
                _opacity = value;
                UpdateGrid();
            }
        }

        /// <summary>
        /// Updates the grid (if it already has been created) or initializes it
        /// otherwise.
        /// </summary>
        private static void UpdateGrid()
        {
            if (_squares != null)
            {
                var brush = new SolidColorBrush(_color);
                foreach (var square in _squares)
                {
                    square.Fill = brush;
                }
                if (_grid != null)
                {
                    _grid.Visibility = _visible ? Visibility.Visible : Visibility.Collapsed;
                    _grid.Opacity = _opacity;
                }
            }
            else
            {
                BuildGrid();
            }
        }

        /// <summary>
        /// Builds the grid.
        /// </summary>
        private static void BuildGrid()
        {
            _squares = new List<Rectangle>();

            var frame = Application.Current.RootVisual as Frame;
            if (frame == null || VisualTreeHelper.GetChildrenCount(frame) == 0)
            {
                Deployment.Current.Dispatcher.BeginInvoke(BuildGrid);
                return;
            }

            var child = VisualTreeHelper.GetChild(frame, 0);
            var childAsBorder = child as Border;
            var childAsGrid = child as Grid;
            if (childAsBorder != null)
            {
                // Not a pretty way to control the root visual, but I did not
                // want to implement using a popup.
                var content = childAsBorder.Child;
                if (content == null)
                {
                    Deployment.Current.Dispatcher.BeginInvoke(BuildGrid);
                    return;
                }
                childAsBorder.Child = null;
                Deployment.Current.Dispatcher.BeginInvoke(() =>
                {
                    Grid newGrid = new Grid();
                    childAsBorder.Child = newGrid;
                    newGrid.Children.Add(content);
                    PrepareGrid(frame, newGrid);
                });
            }
            else if (childAsGrid != null)
            {
                PrepareGrid(frame, childAsGrid);
            }
            else
            {
                Debug.WriteLine("Dear developer:");
                Debug.WriteLine("Unfortunately the design overlay feature requires that the root frame visual");
                Debug.WriteLine("be a Border or a Grid. So the overlay grid just isn't going to happen.");
                return;
            }
        }

        /// <summary>
        /// Does the actual work of preparing the grid once the parent frame is
        /// in the visual tree and we have a Grid instance to work with for
        /// placing the chilren.
        /// </summary>
        /// <param name="frame">The phone application frame.</param>
        /// <param name="parent">The parent grid to insert the sub-grid into.</param>
        private static void PrepareGrid(Frame frame, Grid parent)
        {
            var brush = new SolidColorBrush(_color);

            _grid = new Grid();
            _grid.IsHitTestVisible = false;

            // To support both orientations, unfortunately more visuals need to
            // be used. An alternate implementation would be to react to the
            // orientation change event and re-draw/remove squares.
            double width = frame.ActualWidth;
            double height = frame.ActualHeight;
            double max = Math.Max(width, height);

            for (int x = 24; x < /*width*/ max; x += 37)
            {
                for (int y = 24; y < /*height*/ max; y += 37)
                {
                    var rect = new Rectangle
                    {
                        Width = 25,
                        Height = 25,
                        VerticalAlignment = System.Windows.VerticalAlignment.Top,
                        HorizontalAlignment = System.Windows.HorizontalAlignment.Left,
                        Margin = new Thickness(x, y, 0, 0),
                        IsHitTestVisible = false,
                        Fill = brush,
                    };
                    _grid.Children.Add(rect);
                    _squares.Add(rect);
                }
            }

            _grid.Visibility = _visible ? Visibility.Visible : Visibility.Collapsed;
            _grid.Opacity = _opacity;

            // For performance reasons a single surface should ideally be used
            // for the grid.
            _grid.CacheMode = new BitmapCache();

            // Places the grid into the visual tree. It is never removed once
            // being added.
            parent.Children.Add(_grid);
        }
    }
}

Hope this helps.

As part of the cloud environment for my application, I have a service that dynamically resizes a given image from Foursquare into a Windows Phone tile size (173×173 pixels). This is used for the “pin to start” feature of 4th and Mayor.

The initial implementation of this service was done in PHP.

However, the new version of my cloud infrastructure is powered by Node.js for the most part, and I ran into some fun problems trying to get ImageMagick to properly resize images to be aspect-aware. I am using Express for servicing notifications and other endpoints.

How the resized image is used

Here’s an image from a Foursquare user of Microsoft Building 40, where my office is right now. I like to keep it pinned to my start screen, and the source image from fsq is actually much larger and not properly sized or cropped for tile display.

When the pinned tile is created, the remote URI points to the 4thandmayor.com cloud presence, and then server-side I resize the Foursquare image provided in the query string. (I also validate that it’s actually an image from there, etc.)

Resizing images using node-imagemagick

I’m wanting to use the node-imagemagick module with Node to do the resizing (similar to what PHP was doing with ImageMagick before). It really just shells out to the ImageMagick ‘convert’ program.

There is a built-in “resize” function, however I don’t exactly want to use that: here’s what happens when I resize the image the standard way. I just assumed that it would figure out a good size and crop. It’s been a while since I used this stuff in college!

var im = require("imagemagick");
im.resize({
    srcData : img,
    strip : false,
    width : 173,
    height : 173
}, function(err, stdout, stderr)
{
    if (err){
        redirectToStandardTile(res);
    } else {
        res.contentType("image/jpeg");
        res.end(stdout, 'binary');
    }
});

The aspect ratio is maintained.

Trying to crop the image instead

There’s a separate crop function as well, but it works only on files, no streams. I’d like to not use temporary files if I can and instead just pipe around the raw image bytes. There is also a thumbnail command built into ImageMagick, but I don’t want to reinvent the wheel and not be able to use the helpful node library created by Rasmus.

Trying the width x height ! option

You can also force to be a specific size, such as this, by appending an exclamation point to the height (as a string literal). Not good for me (the photo is stretched):

var im = require("imagemagick");
im.resize({
    srcData : img,
    strip : false,
    width : 173,
    height : "173!" // force the sizing.
}, function(err, stdout, stderr)
{
    if (err){
        redirectToStandardTile(res);
    } else {
        res.contentType("image/jpeg");
        res.end(stdout, 'binary');
    }
});

Using resize plus extents to create a square 173×173 thumbnail

Instead, I decided to append custom arguments for ImageMagick’s convert program, and finally came up with a combination of extent values, etc., that work for my needs. Here’s what finally worked for me:

• Using the hat appended to the height value (173^ in a string literal instead of 173)
• Including the gravity argument
• Setting the extent to be the square 173×173 area of interest

// Resize a photo for use in a live tile or secondary place tile.
app.get('/tile.php', function (req, res) {
    var original = req.param("i");
    if (original) {
        getImage(original, function (err, img) {
            if (!err && img) {
                var im = require("imagemagick");
                im.resize({
                    srcData : img,
                    strip : false,
                    width : 173,
                    height : "173^",
                    customArgs: [
                         "-gravity", "center"
                        ,"-extent", "173x173"
                        ]
                }, function(err, stdout, stderr)
                {
                    if (err){
                        redirectToStandardTile(res);
                    } else {
                        res.contentType("image/jpeg");
                        res.end(stdout, 'binary');
                    }
                });
            } else {
                redirectToStandardTile(res);
            }
        });
    }
});

function redirectToStandardTile(res) {
    res.redirect("http://www.4thandmayor.com/app/genericTile.png");
}

function getImage(uri, callback) { // (err, res)
    request(
    {
        encoding: 'binary',
        uri: uri,
    }, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            callback(null, body);
        } else {
            callback(error, null);
        }
    });
}

This implementation includes the Express code, in case you were wondering about doing that part. I’m attaching to the same former PHP URI for this functionality so that I don’t have to update paths and can continue to serve older versions of the app as appropriate.

Hope this helps.

In 4th & Mayor, I use these to allow people to pin places to the start, and also to check-in a lot quicker. In my current released version, I actually found out after-the-fact about a remote URI bug, and wanted to share my notes on this.

If you’re looking for the basic reference on this deep-linking feature, do refer to the “Create, Delete, and Update Tiles for Windows Phone” entry on MSDN.

What’s the issue with remote URIs?

As best I can tell, the situation is: adding a secondary tile with a relative URI (pointing to an app’s content, such as SomeImage.png, that is packaged within the .Xap) is OK, and that secondary tile will always be present.

However, if you use a remote URI (such as a dynamically generated background image, or from a database or social network), that secondary tile is only present for that current device’s uptime: if you restart the device (or the battery dies, etc.), when you come back, the secondary tiles will no longer be present.

Users should still be able to re-pin any of their favorite secondary tiles to the start screen again. However, it turns out there is a bug here unfortunately: the secondary tile is still present in the ActiveTiles collection, and the OS seems to believe that it is still there, even though it is not.

The workaround is to search for the existing identical secondary tile and delete it, before re-pinning it, in your apps. This does mean that it’s not possible to tell whether a secondary tile with a remote URI is truly pinned or not – it will look pinned in the ActiveTiles collection but the user will not actually have the item pinned.

Using a remote URI

If you just use a remote URI (absolute), you will experience one-time pin ability; after that, and a device restart, it won’t be possible to re-pin the same page without first deleting the entry.

Using a remote URI, working around re-pin issues

Here is the code I’ve used to workaround these issues, effectively deleting the tile first, and re-pinning, only when using an absolute URI:

private void OnPinButtonPressed(object sender, RoutedEventArgs e)
{
    var backgroundImage = new Uri("http://tiles.4thandmayor.com/CrownBackground.png", UriKind.Absolute);

    var tile  = ShellTile.ActiveTiles
        .FirstOrDefault(x => x.NavigationUri == NavigationService.CurrentSource);

    // Only if this is a remote background image URI do we need to
    // delete and re-pin the secondary tile.
    if (tile != null && backgroundImage.IsAbsoluteUri)
    {
        tile.Delete();

        var newTile = new StandardTileData
        {
            BackgroundImage = backgroundImage,
            Title = "Secondary Tile",
        };

        ShellTile.Create(NavigationService.CurrentSource, newTile);
    }
}

9/29/11 1:40 PM PST note: It’s been pointed out to me that I don’t know how to code. The code above will re-pin, but not initially pin. A little more boolean logic is needed. I’ll try and update later, but the concept remains.

Hope this helps.

Windows Phone application performance and optimization
9/16/11 from 12:30 PM to 1:30 PM
Room: Marriott Orange County 4

Here’s a link to the session page on C9.

The talk will cover:

• Performance counters and performance basics
• The new Windows Phone profiler
• Strategies for improving app performance
• General Q&A session at the end

Note to MIX 11 attendees: this talk is very similar to my MIX presentation, though the app is slightly different.

Hope to see you at the talk!