Ever since launching the cloud-backed services that power a lot of the neat value-add in Windows Phone for my application, 4th & Mayor, I’ve learned a lot, and been trying some fun things along the way. Recently I’ve had a fun conversation with a few people about how I’m finding good ways to save money in my cloud computing bill, and though they may be “common sense” to some, they didn’t all occur to me when I created my initial implementation.

I’m saving 9% on my bill over last month, although my user base has increased at a good clip, just by favoring my most active users.

My app has four major cloud components powered by Node.js:

• Hosting the www.4thandmayor.com web site
• Hosting RESTful web services for the application to communicate with
• Processing push notifications through real-time APIs as well as polling mechanisms (“worker” role)
• Live tile image generation

The web server and services are all load balanced and in general experience pretty steady but low-CPU traffic. However, watching processing spikes and what’s going on, I realized that I was a) spending a ton of processing power updating live tiles of infrequent users of the app who may not even be looking and b) my push notifications mechanism is rather expensive and involved, and about 40% of the users of my app are relatively infrequent users.

Since I run a free app and all my costs are my own, I’m interested in cutting costs for those that must not get as much value from the app.

History

Over the months I’ve used a lot of different techniques, from exponential-backoff algorithms, server CPU loads, and even bugs, to see how it affects my costs. I saved a ton of money in April when a bug I introduced stopped most toasts from working! After fixing that bug, though, it was clear I needed to back off my expenses some by reducing load, compute, and traffic some – and so many of the users I was doing processing for effectively have no net change, no need for a new sweet live tile, etc.

Tracking the ‘last seen’ date/time

Every time that a Windows Phone application starts, for users who have opted in to receiving push notifications, you acquire the channel, and that takes the form of a URI. You typically want to send that URI to your service tiers to make sure that your app can continue to send notifications, especially if the channel URI changes.

I store a lot of fields for push notification users to help me provide cloud services at an implementation level, including:

• The date/time the connection happens (typically close to app start-up time)
• The channel URI
• The operating system version
• The application version
• The number of times the app has been run

One of the core reasons for these is to be able to remove processing and storing information about users who have abandoned my application. I generally define that as someone who hasn’t used the app in 60 days. Since my application doesn’t actually do much active processing and data storage (the “truth” is stored on foursquare, not my services), the worst case is that someone abandons the app for 60 days, runs it again, and I think they are a brand new user at a server implementation level.

Nothing fancy here, just make sure that you track the ‘last seen’ date and time information. I use Mongo DB for my data storage, and so I use an upsert to do this operation. If it’s a brand new user, I set the seen information. If they’ve been a user before, that’s fine, I just update the ‘seen’ information.

Where is the work going?

An analysis of the work I’m doing found some expensive things:

• My live tiles are half static, half dynamic

• Static: the front of my app’s tile, with “unread” notification count, are static and hosted on a CDN – cheap
• Dynamic: the back tile is a leaderboard with friend profile pics, “points” for the current week, etc. Very expensive – images to download, images to composite, points that are always changing – very little can be cached

Meanwhile, cheap things: Sending a toast push notification to MPNS is dirt cheap. Sending a tile notification is just as cheap, but not generating the tile! Calculating basic information is quick.

Defining tiers of service

Watching users in terms of app use and ‘last seen’, I decided to offer these levels of “service” where I could scale back the application. Some of this is still in progress in terms of updates, but basically:

And I should say, I just made these tiers up. So far, so good.

Tiers without memory

To minimize computation of actually figuring out how active a user is, I don’t do any active processing at all: rather, the tier is determined when I process a piece of due work for a client, and that helps me to figure out when to schedule the next piece of work.

I suppose another idea would be to try and figure out who my true “active” users are, but I’ve found that the days-since-seen indicator is actually quite great, simple, and really reducing my server processing loads.

Implementation details

Not that fancy! Here is the simple code for figuring out which tier a user is in. Dirty JavaScript, really.

this.getPollFrequency = function () {
  var r = thisTask.r;
        var prop = 'oldest';
  if (r.seen) {
      var now = new Date().getTime();
            var then = r.seen.getTime();
            var diff = now - then;
            diff /= 1000;
            diff /= 60;
            diff /= 60;
            diff /= 24;

            if (diff < 2) {
              prop = 'active';
            } else if (diff < 3.5) {
              prop = 'recent';
            } else if (diff < 7) {
              prop = 'week';
            } else if (diff < 13) {
              prop = 'older';
            }
        }
        thisTask.storage.activityFrequency = prop;
        return context.configuration.poll[prop];
}

I then use this tier designation to look up a configurable property that I have, which is how long to wait before scheduling the next piece of work for the client. The other code isn’t that exciting, but will be part of some other posts at some point, I am sure.

Let me know if you’re able to make use of this concept, or how you might use it in your apps!

Nokia Apps Madness: the Excellent Eight

Nokia’s been doing a lot of really cool promotional work for app developers and their phones recently. Initially starting at 32 apps in their March App Madness, I’ve made it a few rounds and am now in the ‘Excellent 8’, exciting!

If you’ve used the app or support what I’ve done there as a scrappy little independent developer in my spare time, I’d love your support by voting – it’s up against the Facebook app for Windows Phone! You can also read about the other apps on the competition blog post here.

Cloud backend

The entire backend of 4th & Mayor is powered by Node.js, a really powerful JavaScript runtime designed for building great apps and services. This powers push notifications, live tiles, the web site and services, and so on. All standard Foursquare services (checking in, finding nearby places, etc.) are handled by Foursquare’s web services directly however – the backend for my app is mostly auxiliary and Windows Phone value-add.

Node is very fast and efficient, but it’s just part of the story. The cloud is also performing live tile graphic generation, handling preferences and cloud settings, and crash reports in some situations.

I’d like to start sharing more information on the backend, and in the meantime, want to provide some points to the technology and modules that have made development fast and fun:

• Node.js (get it for Mac, Windows, or a tarball to build it from source on Linux; documentation here)
• MongoDB (I use MongoLab for paid hosting, they rock)
• MPNS node module (written by me, it’s a simple Node request interface to the Microsoft Push Notification Service for Windows Phone – used for sending tiles, toasts, etc.)
• Express for serving the static web site at www.4thandmayor.com plus responding to web service requests
• node-mongodb-native node.js driver for working with Mongo
• node-foursquare for talking to Foursquare’s web services (though I’ve modified it a bit in my forked repo)

Node makes it very easy to hang APIs and other endpoints using modules such as express. Here’s the endpoint for handling a disconnect request to the app. It simply validates a little bit then calls a helper method I have for removing entries from the clients table:

// ---------------------------------------------------------------------------
// Disconnecting client channel
// ---------------------------------------------------------------------------
app.post('/v1/disconnect', function(req, res) {
    // https://www.4thandmayor.com/v1/disconnect/?uri={0}

    var uri = req.param('uri');
    if(uri && pushutil.isValidUri(uri)) {
        mongoRemovePushFromClients(uri, function() {
            cloudHistory.log('push notifications disconnected by the user for ' + uri);
        });
    }

    res.send('ok');
});

I’ll be writing more about my cloud backend services in the future, but maybe this will whet your whistle!

New markets

I’ve submitted the app for certification in all the new markets for the Windows Phone, so this is exciting. Expect it to hopefully be approved and start showing up very soon.

4th and Mayor will now be available in Bahrain, Bulgaria, China, Costa Rica, Croatia, Estonia, Iceland, Iraq, Israel, Kazakhstan, Latvia, Lithuania, Qatar, Romania, Saudi Arabia, Slovakia, Slovenia, Thailand, Turkey, UAE, Ukraine, Venezuela, and Vietnam.

Several months ago the app was added to the 5 earlier marketplaces introduced by Microsoft this year, including Argentina, Indonesia, Malaysia, Peru, and the Philippines.

Don’t have the app? Download it now from the Windows Phone Marketplace

Localization efforts

I’ve begun working with some people on localization efforts for the app. My plan is to use GitHub (already setup a repository for this) to work with developers who have volunteered their skills and services and keep that part of the work all open source.

One thing to note is that I’m somewhat limited by what Foursquare has localized: they’ve done a ton of locales, but often if the web services cannot return localized information (think badges, witty text, etc.) then it won’t be a great experience, so that is the largest limiter.

The initial languages will be Japanese, German, and a few others – with many more to come after that. If you’re interested in participating, please send e-mail to 4thandmayor@gmail.com (the support address for the app).

Thanks for reading this far – Jeff.

App’s in Nokia’s March App Madness!

This would be a great time to vote for the app in Nokia’s March App Madness, btw [PDF for your brackets]! Please keep watch as new rounds approach.

Follow & Interact

Consider:

• following @4thandmayor on Twitter
• Liking the app on Facebook to get update information, service & status info, etc.
• There’s also a place to suggest new features.

4th & Mayor Today

Today, 4th & Mayor is:

• Used by over 60,000 people, most every single day
• Over 35,000 people have push notifications enabled, receiving check-in toast notifications, leaderboard live tiles, and other useful updates from Foursquare
• Of users who’ve opted into sharing usage information, the app has been used to check-in over 7,650,000 times
• The app’s been run over 8,000,000 times

Key Milestones

• December 2010: Development of the app started in my spare time.
• March 2011: The official Foursquare app for Windows Phone stopped working
• March 20, 2011: 4th & Mayor launched as a free app on the Windows Phone Marketplace (blog post introducing it here), supporting great new features from Foursquare version 3 that had released the week before for iPhone and other platforms
• June 28, 2011: 4th & Mayor v2 launched, supporting Windows Phone Mango and adding great new features
• November 17, 2011: v3 launched with check-in tiles, live tile studio, fast app switching, and more (post)
• March 20, 2012: v3.3 anniversary edition launched, adding significant performance improvements and corrected some GPS accuracy issues
• Soon: Version 3.4 is on its way and will add a lot more features for international users, including more map choices such as OpenStreetMap and Google Maps, plus business hours support.

The Future of 4th & Mayor

Although I’ve left the Windows Phone team (that was my day job), I continue developing updates, adding features, and am looking to also offer 4th & Mayor on other platforms such as Windows 8 tablets. The cloud infrastructure for the app is especially interesting and a place I’m actively investing and adding features. Stay tuned for details!

Interested in localization?

I’ve finally started to begin the localization process, in the past I’ve reached out to the community for this – so if you’d like to get it to your language, contact me at some point to be added to the localization list.

Thanks for using and enjoying my app! Please recommend it to your friends and rate it well if you love it, otherwise, let me know!

Jeff Wilcox
Developer
4th & Mayor

Want to “go to the cloud”, working on the exciting application platform for developers to use with Windows Azure? We’re looking to hire strong developers with passion for working with the modern cloud and its associated web & services technologies. We’re hiring across the team, so I’m providing two job descriptions as examples of the devs we want and the work we do.

Our hiring process takes into account interests, business need, and we’re flexible in finding the right work for folks. Given the blog audience and Twitter conversations many of us have had, I know there’s interest, and so a blog seemed like a good place to start.

What technologies does the Windows Azure App Platform & Tools team work on?

Across the organization (we all report to Scott Guthrie – here he explains how to get started with Azure) we work on a lot of technologies – both on the Microsoft stack and on the non-Microsoft stack. Some of us use Macs every day. We’re a unique org – our code is up on GitHub in true open source and we accept community contributions at http://www.github.com/WindowsAzure/.

Some of the open source tech we use:

• Node.js
• PHP
• Java

We ship this Microsoft tech:

• ASP.NET
• ASP.NET MVC
• Web API
• WebMatrix
• Windows Azure developer tooling, command line interfaces, etc.

And of course we’re busy working on a lot of exciting future things that Azure is building, plus of course shipping frameworks and tools built using Microsoft .NET/C#.

Sample Job Posting #1 – Azure One SDK Development Team

The Azure One SDK team has a goal of making Windows Azure a great development platform all developers, using both Microsoft and non-Microsoft technologies. Windows Azure is a critical part of Microsoft’s future business, and for it to be successful, it has to be a home for developers using Windows or Apple OS X, writing C#, PHP, Java, or Node.js.

The Azure One SDK dev team operates like very few at Microsoft: We use GitHub.com for our open source control, we take community code contributions, and we use today’s hottest development tools and processes. We are an open source, cloud-focused, developer-attracting machine.

We are looking for developers that have experience using a variety of languages and platforms, and are good at quickly learning and integrating new tools and skills. If you’re the kind of developer that regularly writes code outside of work in a variety of platforms and you enjoy playing with today’s technologies, regardless of who builds them, we’d love to chat.

Come join us and help figure out how to make Windows Azure attractive to startups and other developers building tomorrow’s cloud based applications.

Sample Job Posting #2 – Azure App Plat & Tools Team

The Azure Application Platform & Tools Team owns a wide variety of web technologies, including the core ASP.NET, ASP.NET MVC, Razor, WebAPI, and WCF runtimes and the development tools that target these platforms. We are currently in the development stages for major deliverables slated for after the next version of Visual Studio ships, which are targeted at improving the developer experience for both on-premise and cloud applications.

We are a highly dynamic and often loosely structured team with a reputation for agile customer-focused innovation. Our decisions around development issues are most often pragmatic and focused on the spirit of the rules rather than the letter. We often operate in an agile, open source like environment, always striving to do the right thing. We have close partnerships with teams throughout Microsoft, including most groups in the .NET Framework and Visual Studio as well as SQL Server and Azure.

We are looking for a developer to help us make our vision real.

You should be passionate about code quality as well as clean, simple, and sound designs. You should aspire to grow into technical leadership roles. You should also be a good code reviewer and believe in the value of collaborative coding and problem solving. You should appreciate being challenged in a wide variety of areas and embrace making people and technology around you better.

Job Requirements

In general we have these requirements (may vary with the specific position) – we are looking for experienced developer talent:

• Bachelor’s degree in Computer Science or equivalent experience
• Minimum of 3-5 years experience in a Software Development Engineer role (*varies by position)
• Passion for developer tools & developer platforms + the work you do every day
• Experience with web technologies such as PHP, Java, Node.js, Ruby, Python or with C#/ASP.NET
• Proficient in a core language such as C++/C#/Java, including Computer Science fundamentals, algorithms, etc.
• Excellent written and verbal communication skills – including a sense for how to make it easy for developers to be successful
• Great candidates will also have experience working in an open-source environment with an open web technology such as PHP or Java, and ideally experience with agile methodologies

The Microsoft Careers site (http://careers.microsoft.com) always has all our job openings as well. Always feel free to apply and use that site if you’re looking to work at other teams, roles, or technologies at the company.

Thanks, I look forward to hearing from some of you!

Jeff Wilcox
Development Lead
Windows Azure OneSDK Team

On that note, I’ve decided that for 2012, I would like to move to the Windows Azure team to focus on the open source story for Microsoft’s cloud. At Microsoft we’re becoming more and more involved in exciting new success stories and tech such as Node.js – along the way we’ve even started using GitHub to accept community open source contributions and make these things better. There’s a great opportunity here and I want to be there to be a part of it all.

This blog will continue to service all the things I find interesting – Windows Phone, XAML, C#, design tips, control development, you name it.

If you didn’t know it, the entire backend of my popular phone app, 4th & Mayor, is powered by Node.js in the cloud (yup, pure JavaScript, with a mix of MongoDB). It’s just amazing how productive, fun, and exciting the tech is to work in. Supporting over 60,000 users of my app in the cloud has been a fun challenge, and I’ve been learning so much.

This is a journey back to some of the original service and client roots that I joined originally at Microsoft (joining ASP.NET in 2005; I was a PHP and Linux dev in college). I’m moving to work with the likes of Scott Hanselman and Glenn Block, and have a stellar team of developers working with me on this project.  They’ve already been doing great work – you can see a lot of it taking shape on GitHub at https://github.com/windowsazure/. You’ll find my personal/phone projects on GitHub here and my Azure work account here, if you’re in to following pull requests and forks.

I wanted to share the e-mail that I sent many of my friends and co-workers last week:

From: Jeff Wilcox
Subject: JWilcox: “To the cloud!”
Date: Thu 2/9/2012 5:00 PM

Hi,
I’ve accepted a role on the open source side of the Windows Azure application platform team in the land of ScottGu. The opportunity is great, and many of you know that I’ve been hacking in the cloud a while. After a lot of client development, I’m excited to see what happens when we put all these things together.

I’m proud to have worked with the smartest and most driven teams at Microsoft: together many of us have built out the Windows Phone developer platform complete with dev guidance, apps, controls, pivots & panoramas & progress bars. We’ve done the Olympics together and helped devs around the world rock their bits. We’ve shipped Silverlight starting with 1.1 Alpha, 13 Silverlight Toolkit releases, a unit test framework, and more!

I plan to stay active in the Windows Phone developer community. The new phone work I have seen so far is really spectacular, I’m sorry that I won’t be there when you cross the finish line – but I’ll be in line to buy one.

Sincerely,
Jeff Wilcox

Windows Phone is really taking off, everyone loves their Nokias -  I must say that I love my Windows Phone – I own a Lumia 800 that I imported into the US at personal expense, and it’s the best phone I have ever owned. It’s also fun to see that the platform is being adopted by users of all sorts – just today Matt Hasselbeck became my 4,000th follower on Twitter, and he regularly uses both 4th & Mayor (my Foursquare app for the phone) as well as Rowi (an excellent Twitter app for the phone). I was hoping for a geek follower, but I’ll take an NFL quarterback, too!

Thank you to the amazing community. I am not going anywhere! We’ve built an amazing platform and it’s going to get better – I’ve really enjoyed traveling the world, interacting with students at hackathons, attending fun developer conferences, and seeing the Windows Phone Marketplace fill up with amazing apps. 2012 is going to be the year of Windows Phone for sure and I’m not abandoning it. I think the spot where mobile meets the cloud will continue to get more and more interesting and hope to have you all along for that exciting ride.

What about 4th & Mayor?

One of the joys of my last year has been offering 4th & Mayor free to the Windows Phone world. It was a blast to build. On top of learning so much about our very own phone platform on the team, it’s taught me a lot about shipping a product that’s used hundreds of thousands of times a day.

As I have previously tweeted in various capacities, my 3-pronged hope for 2012-2013 is:

• Keep updating 4th & Mayor for the Windows Phone.
• Offer a Windows 8 implementation on the Windows Store
• Open source 4th & Mayor sometime in the future with the friendly, flexible Apache 2.0 license.

Hope it’s appreciated. Thanks for reading this far.

Jeff

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!