Jeff Wilcox » Silverlight

Updated Silverlight Unit Test Framework binaries–compatible with the Mango phone tools beta

Jeff Wilcox — Thu, 09 Jun 2011 20:38:07 +0000

I took a few minutes today to build and share this updated set of assemblies that are Mango beta-compatible for phone developers. These can also be used with the RTM of phone, SL3, etc. There were some XAML syntax errors in code that was previously not exercised, oops.

[ZIP, 518K] Silverlight Unit Test Framework Assemblies compatible with Mango Beta Tools

I’ve enclosed the license file, too. Sorry it took so long to get out, Jon.

Hope this helps.

Jeff Wilcox’s “Metro” design guide for developers, v1.00

Jeff Wilcox — Sat, 26 Mar 2011 03:28:38 +0000

Let’s make our Windows Phone apps look great, ok?

I am not a designer. I am not a developer-designer. I am a developer and spend my days coding. But I love the concept of “metro” design and believe that it has the potential to bring a beautiful story to Windows Phone, and potentially millions of people. This is Microsoft moving beyond battleship grey buttons for its developer base, and all we need is just a little extra help to get there.

I don’t have a design background, my app is not the most beautiful app ever, but I’m fairly confident in what I would regard as a “80%-accurate” metro implementation. I’m trying to mimic the core Windows Phone operating system’s design, and in return users are getting a consistent interface, and one that respects their desires for how their phone should work.

Over time we can all work together to make all the apps beautiful by default, it doesn’t need to be a special exception to the rule.

If metro was inspired by transportation, just remember that there’s some awful looking transit out there. A few misaligned margins and your app’s going to look like a rusty bus. Just a little maintenance every time you create a page, check-in a page, or look over your app before submitting to the Windows Phone Marketplace will not only yield a good-looking app – but will probably get you some good recognition, too.

What sort of transportation best defines your metro-inspired app? Is it clean, functional?

This is my first attempt to share just a few things that I’ve learned while developing a few Windows Phone applications, as I feel that developers just love rules, so maybe having suggested rules will help. We love to fight about code style guidelines, and this whole “metro-design-thing” is really just more of that. Please, let’s get some comments flowing on the topic, start a discussion, and I hope to revise this kind of thing and publish again. I started this list in December and am very happy to share it!

I’m talking about

simplicity
ease of use
discoverability
conformance
the right alignment & spacing
using the proper styles
other random tips and suggestions

Scott Barnes has previously covered a lot about the potential of metro for developers, calling it the first real compromise between developers and designers. He goes on to say “Metro simply put feels like I am shoplifting design. It’s not a lot of work and the main focus I have is controlling myself from adding too many elements to the screen or keeping the typography unbalanced.”

I read that to mean “copy what the phone does! it is simple and works!” – I’m also focusing here just on the Windows Phone user interface, but it could apply more openly to other apps and platforms in some situations.

I created these tips while building 4th & Mayor. It’s almost like a checklist, I s’pose. Originally ported from my OneNote notebook… and sorry, not enough visual examples.

“Metro” rules for coders

In no particular order…

Metro 100

Resources and Styles exist for a reason

The default Windows Phone styles exist to help you make your application fit in with the intended visual design and appeal of the Windows Phone. You should use styles with text, and consider using the static resources for margins, spacing, brushes, and more.

You’ll find the file with these special resources defined here on a 64-bit machine:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design\

Understand what margins you get with styles

Styles may bring in a margin. If you have a StackPanel with both a text block and a button, you should have:

The TextBlock requires a style such as PhoneTextNormalStyle or PhoneTextSmallStyle
The button has no style (the default style is already appropriately setup for use in all phone apps)

If you do this properly,you will notice that the button and text are properly left-aligned.

If instead you just have a text block as-is, and a button, the text will be 12px to the left of the Button. That is not good at all! You want a visually straight line in your app on the left.

Mind the gap: Alignment, spacing and margins

12px is the golden Windows Phone number

Almost everything in the grid of the Windows Phone design system is pretty much 12px. Sometimes that means a margin of 12px, added to a container that is already left-aligned out by 12px, yielding a 24px actual visual amount of pixels – but it’s about 12px increments.

In some situations it may be appropriate to use 6px or 18px numbers (often when spacing text and other elements vertically), but try 12px first, it’s consistent and clear. The magic number of Windows Phone.

Pages should align to the left, and a pivot header item should align down the left of the page

Your page should have a nice, visually crisp line that is 24 pixels from the left of the device’s screen. It may be easiest to test for this while using the light theme on the phone. Pivot header items naturally should line up to the 24 pixel point, allowing for a quick and easy visual check. Don’t forget to check every single pivot item so that your UI is completely great.

Text that uses the proper styles should be aligned fine with other controls like the Button. Do not allow items to be indented by 12px, or back by 12px, the jagged line is not attractive and breaks the clean design line.

ALIGNMENT IS KING

Repeating… It is worth shouting out: alignment is one of the easiest ways to make your application look professional, easy to follow, and takes very little effort on the part of the developer. Align everything.

Scrollbars are flush with the right of the device

This means that often the margin of a ListBox may be “0,0,-12,0” – to offset the difference and allow the scroll viewer to be flush with the device. In some situations it may need to be –24px or 0px depending on the container and other situations.

Text that does not fit should be clipped, flush to the right

Unless you have a specific business reason to use ellipsis at the end of an item (which is not officially supported in Silverlight 3 and therefore the current Windows Phone release), just let content “clip” at the far right when it is longer than the device. Of course, wrapping has a place, so wrap if you don’t want the clip.

Don’t fade the “clip” at the end.

Colors and brushes

The static resources for colors and brushes exist for a reason, and should almost always be used.

Avoid hard-coded colors

Hard-coded colors introduce bugs and may affect marketplace ingestion in light or dark theme modes.

There are a few situations that may warrant a hard-coded background color when the color is the same in the light and dark themes, as well as a situation where a fixed foreground of white may be acceptable – in a long list selector’s group header, for example, when the background is the phone accent brush.

Accent colors were built to be used and respected

Respect your users. Honor their accent color choices by using that color for important user interface elements that indicate touchable elements, actionable information, headings, errors, etc.

Use accents sparingly and mostly for emphasis

Accent colors should be used to differentiate content but not to confuse the user. A good data-heavy example application is the people hub in the Windows Phone – open any person’s information up and see how it presents the headings and text for items such as phone numbers and e-mail addresses.

Use the light theme often

Dedicate at least one day a week to using your application, both in the emulator and on the device, in the light theme.

Change accent colors as often as you change your t-shirt

You want to make sure that you are using and respecting the user’s personalization choice for their device. They’ve made it yours, and now you have the option to make your app personal to them, too.

Tread carefully with branding

A brand and its coloring is important, but consider that not all users will want to have the brand’s colors and experience oozing from every corner of your application. A simple logo or small amount of contrast in the user interface, centered around the brand, may be enough – coupled with respecting a user’s phone light/dark theme and accent color choice.

Beware the pains of light-only and inverse theming

If you want to go for the light-forced experience like the Mail app, you might find that it’s a big challenge. Having to retemplate controls, templates, styles, and so on, it’s a big challenge, and easy to get wrong.

Text

Text is a super-important part of metro. Love text. And love Segoe WP!

Always use a text style

They exist for a reason. They give you the phone margins of 12px on the left horizontal, so you want that. Without it, you will have misaligned visuals.

So this is the GOOD text example:

Use PhoneTextNormalStyle often.

It’s a pretty easy-to-read style and should be the default for most UI.

Use PhoneTextLargeStyle occasionally.

It’s good to use for special visuals like groups, important instructions, and some UI features (such as loading text). Often this is combined with a PhoneAccentBrush on the foreground for even more visual distinction, especially if the item can be interacted with.

Use PhoneTextSmallStyle sparingly.

For small text, such as detailed info or legalease, it might be a good fit. Otherwise it is often too small for many users to easily read and digest.

Do not hard-code font size, font family, or other properties

You should not have hard-coded font sizes or families, unless you are using the static resources to make a specific change to text. (It is o.k. to reference the PhoneFontFamilySemiLight and PhoneFontFamilySemiBold resources, for example, but not to FontSize=”16.667”.

Do not use raw text blocks (without a style)

A text block without a style is a bug with the small exception of including a hard-coded margin of 12 on the left. It may be acceptable to achieve a desired look to have a margin such as “12,18,0,6”, for example, but in most situations this is easier to accomplish by using a style such as {StaticResource PhoneTextLargeStyle} and then just overriding the Margin value.

Text boxes and password boxes should be watermarked text boxes

Although not built into the phone, you will have a more beautiful UI if you use watermarked text boxes and password boxes instead of field labels and then the text box.

Evaluate every text block for its wrapping potential

Every single TextBlock instance needs to be evaluated for the need for wrapping content. Descriptions, important titles and place names, etc. should probably have a wrapping experience and not clip. Don’t forget to think about pivot titles, either, which may need a wrapping title.

Text boxes should tombstone nicely

Remember to tombstone the contents of a text box. You can do better by also storing selection information or other important properties. In some situations, you may even want a tombstoning text box to record its focus information, so that when the app activates again, you can even have the software keyboard open (text box focused).

Hyperlink Buttons

They can be difficult to touch accurately, especially the default template, and when in a big list of other hyperlink buttons. Be careful.

Double-check target names for web addresses

It can be very time-consuming to test every single hyperlink in an application for its behavior. To avoid unknown or unexpected crashes, if using an absolute URI (such as a web site or address), check that the TargetName is something such as “_self” or “_new” to enforce the browser opening.

Consider re-templating for additional touch target space

You may want to use negative margins or other tricks to give hyperlink buttons just a little extra space (such as 6px top and bottom) to still have a clear appearance but to allow for more touch target space.

Images

Large image thumbnails look wonderful.

Instead of sticking with the small thumbnail experience often used in other platforms, think about having beautiful, large images within a wrap panel. You will have a nice-looking UI if you have 200x200px images, for example:

Full-bleed images have a place

There are situations where a full-bleed photo, image, or user interface element is appropriate, will look great, and give users maximum screen real estate for the bleed item (item that goes to the edge of the device’s screen).

For example, here is a static map that bleeds to the edge of the screen:

Link images to a large image viewer

It is a nice courtesy to have image thumbnails actually be buttons that move to a full-screen photo/image exploration environment. Whether that environment just shows the picture (in any orientation), or goes above-and-beyond to also do pinch & zoom, is an exercise left up for the bored developer.

Scrolling & Touch

Always check the light theme and look for your scroll bars

A very common mistake for developers who override the theme to be light (to mimic the behavior of the official Mail app for Windows Phone) is to not re-template the scroll bars throughout the application. This is difficult, as it may require retemplating scroll bars, scroll viewers, list boxes, and more.

If you simply change a background color, and do not retemplate the scroll bar, you’ll usually see no scroll bar at all – it’s a white-colored object on top of a white background, and not so useful!

Scrollbars are flush with the right of the device

A repeat, but worth it: even the official Twitter app for the Windows Phone got this design nit-pic wrong, and scrolling feels disconnected as a result. The –12px margin is your friend.

You may have 6-12px too many at the top of a list

In some situations, your scrolling containers, items, or other elements may in fact be 6px or 12px too low. To ensure the proper alignment, touch the scroll viewer and move your first up just a very slight amount. Your object should immediately start to get clipped, indicating that it was properly positioned at the very top of your scroll viewer.

You might need to use a negative top margin of -6px or –12px to fix this small thing.

Remember to pad the bottom of scroll viewers or ListBoxes

If you have item templates or others that do not include a bottom margin, it may be possible for your list to end with the very bottom of the content being flush against the bottom of the phone (or the application bar, or other visual underneath). This often is not a visually appealing thing, so you might need to add a bottom margin of 12px to the template or container.

Tombstone scroll viewers to be nice to your users

Users expect that if they leave your app, have scrolled down a list, and come back, that it is restored in the same position. It takes more work as a developer, but really shows off the polish your app can have.

Bounce the touch screen often

You should always be touching your screen. Even when nothing looks actionable. Almost everything needs to be contained in a ScrollViewer, even if it is a simple page. Here’s why:

Landscape pages are difficult and annoying if nothing scrolls!
If the software keyboard opens up, it will want to use the scroll viewer to adjust the viewport just right.
Many users expect the main content of any page to have an associated bounce effect.
Including a scroll viewer will make sure that landscape mode or re-using components in other amounts of screen real-estate will still yield a usable result.

System Tray

Please have a system tray on most pages.

I personally expect to have the system tray available at almost any time. When I am running an app, I really do want to know the time, battery life, if I’m on 3G, etc. Please keep the system tray on pages that you create. Even if it means there’s a little visual glitch / gap at the top where you cannot control the color of the system tray. It’s worth it from a functionality standpoint, I believe.

Application Bar

Favor 3 menu items in an application bar (or 5) if any

The application bar moves to a specific size depending on the number of menu items in it. If you have 4 items, it will show the size for 5 – so visually it may not look quite right. Try optimizing for 3 or 5 menu items if you can for the best, tightest look.

Consider making the app bar transparent on photo pages when there’s a menu of choices

There are situations where an Opacity=0 app bar is the right call, leaving just the ellipsis for the user to touch to get to menu items. If you don’t have any icons, consider it, but keep it consistent.

Every page in your app

Take the time to double-check every page, no matter how minor, so that you can ensure integrity in design and a consistent experience for your users. This is about XAML and not visual design as much.

Page Orientation

Be consistent, and consider allowing every single page in your app to be viewed in both Portrait and Landscape, with the exception of Pano.

Panorama pages should only use the Portrait orientation

Due to the large title font size of a panorama (hub), such experiences should only be contained within a Portrait-designated page.

Tilt Effect

Be consistent if using the tilt effect attached property by including it at the top of every page in the app.

Toolkit Transitions

If using the transitions from the Silverlight for Windows Phone Toolkit, remember to audit all of your pages for the transition service being set. By default no transition service data means no transitions for any page lacking this data.

Consistent XAML XML namespaces

For your own sanity, and that of your team, consider using a standard set of XMLNS names that you can include in the top of pages. Wavering or changing them per-page may yield to difficult to understand XAML when comparing across the app, or working with designers.

Avoid per-page progress bar experiences

It is often easier to have a single performance progress bar instance in the frame of the app, binding it to your data model’s loading events. This reduces the overhead of many progress bars, and is easier to hook up for automatic load detection and notification.

Avoid popups {a performance tip, not a design thing}

The popup control in Windows Phone can have negative performance implications, not allowing its members to be properly accelerated. Consider using a trick method where your frame contains an overlaying Grid instead of a Popup control.

Panorama / Hub Experiences

Hubs should be like a magazine cover.

Keep it simple, engaging, users must click something to go to a sub-page.

Consider a pivot control instead.

Panorama is a “hot” and popular control to offer that hub experience in any app, but it can be overused. Consider whether a pivot control may be more appropriate.

Whitespace is wonderful.

Help the user to focus on just what is important. Do this by minimizing the number of things to distract them: less text, less crazy pictures, just a few simple things. It will go a long way.

Interactive controls don’t usually belong on a panorama page.

If you start seeing buttons, text boxes, password boxes, check boxes, or other multiple control types in a panorama item, re-think whether it’s a magazine cover at that point, and perhaps redesign your app’s experience.

Use at least 3 panorama items in a pano.

If you use only 2 panorama items, you will not get the appropriate visual mirroring, and may see visual glitches. 1 panorama item is not supported. So, start with 3, and try not to have many more than that at all.

Pivot Control and Pivot Items

No more than 7 items please.

It’s a general guideline (I believe from the official UI guide) that 7 items is the max. But that doesn’t mean you should always use 7 pivot items in a pivot control!

Pivot item margins may need to be altered in some situations.

In some advanced scenarios, it is appropriate to set the pivot item margin values. Examples include edge-bleed images and multi-select controls on the Windows Phone (such as the Mail application). Building such a control is another challenge but it will be clipped if the pivot item is smaller than the edges.

Consider a new page instead of a new pivot item.

When adding a new item or data type to a pivot page, think long and hard about whether it’s an appropriate additional as yet another pivot item. For less-used data and information, perhaps a link to a new page with that content may be more appropriate. It will also yield better performance, having less in the visual tree, a quicker startup time, etc.

Always restore the right pivot item when tombstoning.

As a courtesy, a polished app should store the pivot item you were on and when you come back, make sure you’re looking at the same thing.

Using the correct language/wording for your users

You want to maintain a simple, friendly, friendly voice in your application. More is available in the UI Design and Interaction Guide for Windows Phone 7.

App polish

You need a basic but slick about page.

All great apps should have an about page, to offer information about the developer (or company). Though the marketplace guidelines no longer require it, do consider offering support contact information, a feedback link, and links to privacy policies and other guidelines as appropriate.

The about page should be easy to locate in your app, not hidden away too much.

Consider including legal notices.

Consider including the text of legal notices for components that you’re using in your application. This helps give credit to the components that make your application possible, credit the authors with a little pride, and helps protect your application as appropriate by complying with any license terms.

Message boxes: throttling

If you display a message box to your users (especially for errors or notices), consider using a throttling mechanism to limit the number of message boxes per minute that might appear.

Message boxes: consider custom buttons

Consider building your own message box look-alike to offer buttons with actionable text (such as “delete file” instead of “ok”).

Message boxes: consider a checkbox to stop the reminder type

If you add a reminder for your users to go to a meeting, or to review your app, or to purchase your trial app, consider adding a check-box to a custom message box-looking popup, allowing the user the stop the type of notification in the future. The flag is an easy true/false value to store in your app settings.

Phone numbers

Always display a phone number in a hyperlink button when possible, linking that action to make a phone call. You may need to extend or use custom helpers to get the right behavior.

Consider “random witty banter”

A fun experience app developers often use is that of “witty banter”: that is, friendly headings or text that often change randomly. For example, by having a library of sample text, you can offer watermarked text box that has a watermark that says “search for pizza”, and sometimes “search for Italian”, making the experience a little more fun, friendly, and engaging for the user.

This also helps remove boredom: a user likes to see their apps come alive, and fixed, static text, is never that much fun.

Getting the reviews you deserve

I hope these tips help you. Often all people want to know is how to improve the perf of their apps, and though important, a lot of an app’s review is about perception as well, granted you have your functionality down pat. As of 3/24 my app is currently the #1 free app in the Windows Phone Marketplace by rating, skyrocketing to the top – and those 5 stars often are attributed in reviews to some semblance of an emphasis on the metro design. Sample 5-stars:

“UI is well-designed!”

“Simply irresistible”

“Optimized for WP7, Metro UI, and fast”

“Excellent app very well done uses the metro design language beautifully ”

“Shows how easy and beautiful a WP7 app can be.”

“Simply, this is how WP7 apps should all look.”

“Wow, you’ve encouraged me to go out and look into building my own metro WP7 app!”

This makes me think, we can all do so well. Enjoy the tips, I hope they are useful. And tell me when I’m wrong! Let’s get those 3-star apps up to 4-star, and so on, thanks to more consistent design. And remember to mind your margins – all 12px of it when appropriate for alignment.

Hope this helps. Photo credits: Westminster Tube ‘06 by Davide Simonetti and Old Bus by Barry Maas.

Windows Phone, a great dev platform: adding leaderboards to 4th & Mayor in 30 minutes

Jeff Wilcox — Mon, 21 Mar 2011 03:07:48 +0000

It’s just amazing how efficient the Windows Phone (powered by Silverlight) dev environment can be. I’m a little biased here (yeah yeah I work on the team), but wanted to start of my app development series with a short example of just how quickly the platform can enable rapid changes and innovation.

At SXSW a little over a week ago, foursquare introduced the new ‘fsq3’ version of their apps for iPhone, Android, and I believe eventually Blackberry, too, though not initially. Foursquare has always been about a fun time, exploring the city as part of a massive, worldwide-game, and so they did some nice work in version 3 to bring in a little more fun: every time you check-in to a place, there’s a leaderboard (relative to all of your friends) that appears, showing your latest scores and your close competition.

It took about 30 minutes to add this feature to my foursquare app, sadly this blog post will probably take 60 minutes to prepare.

The steps really are:

Parsing the JSON of the added data
Creating a new data/model item
Designing and creating new XAML templates for presenting the data
Updating the data template selector for the added notification type
Binding the data and making the magic happen

Here’s what it looks like on an iPhone – the new “Leaderboard” section is of interest. Interestingly, the Android app for foursquare is pretty much a clone of the iPhone app… so no need to really highlight that.

The way that this is implemented on the foursquare service side is a simple new “notification” type that comes in after a check-in or other action. When working with services like this, as a developer it’s more important than ever to be resilient against “invalid” or unknown data and types – lots of null checks, default handling clauses, etc. So foursquare added a new leaderboard notification type to the others (such as mayor status, a recommended tip at a place, etc.)

The code I wrote to handle notifications started with a simple set of parsing methods. Notifications can actually come from any foursquare web request, but typically it’s just when you check-in. I use (and absolute love!) JSON.NET by James Newton-King – the LINQ to JSON stuff is nice, and it’s a lot better than the JSON stuff built into the platform.

// Notifications is a List
public static Notifications ParseJson(JToken json, string venueId)
{
    var ns = new Notifications();

    foreach (var notif in json)
    {
        Notification notification = Notification.ParseJson(notif, venueId);
        if (notification != null)
        {
            ns.Add(notification);
        }
    }

    return ns;
}

public static Notification ParseJson(JToken notification, string venueId)
{
    Notification n = null;

    string type = Checkin.TryGetJsonProperty(notification, "type");
    var item = notification["item"];
    if (item != null)
    {
        switch (type)
        {
            case "message":
                n = new MessageNotification(item);
                break;

            case "badge":
                n = new BadgeNotification(item);
                break;

            case "mayorship":
                n = new MayorshipNotification(item);
                break;

            case "tip":
                n = new RecommendedTipNotification(item);
                break;

            case "leaderboard":
                n = new LeaderboardNotification(item);
                break;

            case "special":
                n = new SpecialNotification(item, venueId);
                break;

            case "score":
                n = new ScoreNotification(item);
                break;

            default:
                var hasMessage = item["message"];
                if (hasMessage != null)
                {
                    n = new MessageNotification(item);
                }

                break;
        }
    }

    return n;
}

namespace JeffWilcox.FourthAndMayor.Model
{
    public class LeaderboardNotification : Notification
    {
        public string Message { get; private set; }

        public List Leaderboard { get; private set; }

        public LeaderboardNotification(JToken item)
        {
            Message = Checkin.SanitizeString(Checkin.TryGetJsonProperty(item, "message"));

            var leaders = new List();
            var lj = item["leaderboard"];
            if (lj != null)
            {
                foreach (var victor in lj)
                {
                    var wolverine = LeaderboardItem.ParseJson(victor);
                    if (wolverine != null)
                    {
                        leaders.Add(wolverine);
                    }
                }
            }

            Leaderboard = leaders;
        }
    }
}

And then a switch to handle known notification types and create data model objects from that. This yields a nice strongly typed data object – I personally prefer this to just storing the JSON tree live, or using a property bag, but everyone has their own opinions. Strong typing makes data binding in Silverlight super easy.

The JSON from foursquare looks a lot like this:

{
"type": "mayorship",
"item": {
  "type": "nochange",
  "checkins": 27,
  "message": "You're still the Mayor of Boka Kitchen & Bar! (27 check-ins in the past two months)",
  "image": "http://foursquare.com/img/crown.png"
}
},
{
"type": "leaderboard",
"item": {
  "leaderboard": [
	{
	  "user": {
		"id": "4052351",
		"firstName": "Gilles",
		"lastName": "K",
		"photo": "https://playfoursquare.s3.amazonaws.com/userpix_thumbs/FXM5YX5ABXZARAR1.png",
		"gender": "male",
		"homeCity": "WA",
		"relationship": "friend"
	  },
	  "scores": {
		"recent": 120,
		"max": 127,
		"checkinsCount": 31
	  },
	  "rank": 1
	},
	{
	  "user": {
		"id": "20057",
		"firstName": "Jeff",
		"lastName": "W",
		"photo": "https://playfoursquare.s3.amazonaws.com/userpix_thumbs/RRJIFN1NATUHRN4J.jpg",
		"gender": "male",
		"homeCity": "Seattle, WA",
		"relationship": "self"
	  },
	  "scores": {
		"recent": 117,
		"max": 124,
		"checkinsCount": 49
	  },
	  "rank": 2
	},
	{
	  "user": {
		"id": "130986",
		"firstName": "Tim",
		"lastName": "H",
		"photo": "https://playfoursquare.s3.amazonaws.com/userpix_thumbs/4A52T22PCNGR11EM.jpg",
		"gender": "male",
		"homeCity": "WA",
		"relationship": "friend"
	  },
	  "scores": {
		"recent": 116,
		"max": 125,
		"checkinsCount": 41
	  },
	  "rank": 3
	}
  ],
  "message": "You jumped ahead of Tim!",
  "scores": [
	{
	  "points": 3,
	  "icon": "https://playfoursquare.s3.amazonaws.com/static/img/points/mayor.png",
	  "message": "You're the Mayor!"
	}
  ],
  "total": 3
}
},

And so at runtime, when you check-in, you’ll end up with this return result being stored. Since I’ve already coded in my app simple parsing methods for CompactUsers, it’s easy to work with this rich hierarchical data.

In my checkin (“what’s new”) window of 4th & Mayor I’ve a very simple items control that is used to expand at runtime the data objects into a nice visual presentation. Now in Silverlight 3 (the version that was forked for Windows Phone initially) there isn’t a way to have implicit “data templates” that key off of type, so I did have to do a little hacking. But this is super easy.

Here’s my data template selector that I wrote as a value converter. I expose public properties of type DataTemplate:

namespace JeffWilcox.FourthAndMayor.Converters
{
    public class NotificationDataTemplateSelector : IValueConverter
    {
        public DataTemplate MessageTemplate { get; set; }
        public DataTemplate MayorTemplate { get; set; }
        public DataTemplate BadgeTemplate { get; set; }
        public DataTemplate TipTemplate { get; set; }
        public DataTemplate ScoreTemplate { get; set; }
        public DataTemplate SpecialTemplate { get; set; }
        public DataTemplate LeaderboardTemplate { get; set; }

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            ScoreNotification sn = value as ScoreNotification;
            if (sn != null)
            {
                return ScoreTemplate;
            }

            BadgeNotification bn = value as BadgeNotification;
            if (bn != null)
            {
                return BadgeTemplate;
            }

            MayorshipNotification mn = value as MayorshipNotification;
            if (mn != null)
            {
                return MayorTemplate;
            }

            LeaderboardNotification ln = value as LeaderboardNotification;
            if (ln != null)
            {
                return LeaderboardTemplate;
            }

            RecommendedTipNotification tip = value as RecommendedTipNotification;
            if (tip != null)
            {
                return TipTemplate;
            }

            MessageNotification msg = value as MessageNotification;
            if (msg != null)
            {
                return MessageTemplate;
            }

            var special = value as SpecialNotification;
            if (special != null)
            {
                return SpecialTemplate;
            }

            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

And then on my check-in page, in the page’s resources, I define the individual data templates that I would like different notification data objects to appear as. XAML is pretty verbose but wow, powerful. I hand-edited many of my data templates. And I’m picky, I prefer one attribute per line in most situations – it makes diffs in source control a lot easier to understand and work with, especially while integrating.

So next I add an instance of the converter and give it a name. This is designed to associate the XAML data templates with the way to show specific notification object types when the items control expands after binding.

And now here’s the items control. Here I bind the ItemsSource to my list of notifications, then use this syntax to use the data template selector:

And at runtime we end up with this great output, now including the new v3 leaderboard feature in under 30 minutes! Building on all the other components in my app, and the rich Silverlight visual tree, I’m able to add features like this really quickly, without worry.

Another nice thing about XAML and data templates: typically there is very little required testing, especially if you’re in the habit of going through code reviews or at least reviewing source control diffs first – if you don’t change the shape of your data, you’re in a pretty good place.

There are a lot of amazing efficiencies possible thanks to XAML. For instance, I have just a few instances in my app of data templates for check-ins, places, tips, etc. Then, whenever I add a new page, I can refer to the existing tip template, so there’s a central places for any visual tweaks or fixes that I make.

Leaderboards to the next level

So there’s also a leaderboard endpoint on the foursquare v2 web service that lets you grab the complete leaderboard of your friends. I was able to add this to the app in another 15 minutes – but that’s for another blog post. At a high level for that,

I defined a new model item base that exposes a small list hierarchy – leaderboard items, leaderboard scores, and a leaderboard collection. (5 minutes)
Added a data loader class for the ‘leaderboard’ endpoint, powered by AgFx (5 minutes)
Added a new pivot item to the current users’ profile page, re-used the exact same “leaderboard” data template from the notifications window done above (5 minutes)

Hope this helps. Oh, and if you’re noticing, these objects are not implementing INotifyPropertyChanged… in my app this sort of data doesn’t change at runtime. You only get a check-in report once for a check-in, with static data. Easy that way.

4th & Mayor: the ultimate foursquare app for your Windows Phone

Jeff Wilcox — Sun, 20 Mar 2011 22:43:05 +0000

I’m pleased to announce that my app is called 4th & Mayor. It is a foursquare client for Windows Phone 7 and it is now available for free on the Windows Phone Marketplace. I previously hinted at the app with this other post.

This app brings all of the great new foursquare features that your iPhone and Android friends have been using: adding and experiencing photos at places, photos with tips, commenting on check-ins, and an early look at the cool new “explore” features that recommendations places and things to do. (fsq3 info on the foursquare blog)

It’s been a lot of fun building the client over the past few months, and I am excited to share a lot of my development experiences on this blog. Expect great things. Foursquare has a very solid and open API for developers to use (REST + JSON), and it’s a great, fun way to explore any city and stay in touch with your friends. Also, given all the recent news about Twitter, I’m super happy that I didn’t decide to make a Twitter client

On top of being a fully functional, free foursquare app, I’ve also made sure to address key complaints that I heard from people regarding the official foursquare app for WP7: general touch responsiveness, feature completeness, and the ability to check-in to international locations (with accents and other special characters in their name).

Follow the product

You can find out more about 4th & Mayor on the web at http://www.4thandmayor.com/ – as well as on Twitter @4thandmayor and on Facebook. If you are interested in the app, its features and updates, please subscribe to the app’s blog at http://blog.4thandmayor.com/. I don’t want to inundate my technical subscribers with news about app updates and new features, so I want to keep that separate for the most part.

Do expect a great series of blog posts to come out of this learning experience, all the development-related information will be posted here. From the Windows Phone design system to development tips and tricks, this is the place to find that.

“4th & Mayor”

So my app is called 4th & Mayor. Instead of focusing on just raw performance from a development standpoint, I wanted to show how I would envision a great Windows Phone app. I believe that for a v1.0 release, I have delivered a great initial app experience. I decided to try and demonstrate a happy compromise, hoping to yield a wonderful experience that doesn’t take short-cuts.

An emphasis on design
Aiming for complete client functionality
Keeping the app responsive to user input no matter what
A beautiful experience, yet differentiated enough

This all started because one of the things I use my smart phone the most is foursquare, followed by email and Twitter. I just really wanted a better foursquare experience on the Windows Phone, and figured this would be the best way to gain excellent app development experience.

(The name? It’s a little odd yet creative, is clearly not an official client, and it’s all about working to become the mayor while having fun, right? The intersection of foursquare (4th) and the fun of the game – working to establish a mayorship (Mayor).

An emphasis on design and rich visuals

The design system for Windows Phone, code-named “Metro”, really is cool. Others have written about the experience before, but it really is a very developer-friendly design system that is crisp, clean, and once you understand the core principles and rules, it’s easy to build jaw-dropping apps. I’m just a geek, but feel I’ve come away with a pretty good first release when it comes to visual consistency and trying to adhere to the basics of “Metro”.

This comes through in a few ways. If you look to the screenshots below, on the left, you see the nice visuals in the “places” listing: no rounded corners, crisp and clean, etc. On the right, the “photos” pivot item for a page shows a few large, rich photos from the venue – and clicking them brings up the full-screen photo experience.

Both are very easy scenarios to polish thanks to XAML, but it takes an understanding of how to translate “Metro” ideas into XAML. A lot of off-by-12-pixel polishing goes into shipping a solid Windows Phone app.

A fun experience

There’s great incentive in the new foursquare 3 features to check-in and have fun doing it: a completely revamped points system. Get points for being a VIP (checking in with the mayor), being the first of your friends to check out a new place, and so on. This, combined with the new leaderboards and an ever-growing catalog of badges is just modern-day fun.

The rush to the marketplace

When I heard about the problems that people were having with the foursquare app for Windows Phone, I decided to try and move into “ship mode” immediately instead of completing all of the features I had planned. I forked my source and started polishing and fixing bugs last weekend. As a result, I apologize if there’s something missing or a few bugs in the first release.

My app does 2 things that people have been having issues with the foursquare WP7 app:

Sign in works
You’re able to check into a place that has special characters or accents in the name (international friends, enjoy!)

An update with specials is coming soon

Now that the app is out there, an update coming soon will add specials support, and I’ll also work to address any large buckets of customer-reported bugs. Thanks to getting the build out earlier in the week for people with developer unlocked phones, I’ve been able to start identifying a few small bugs and issues that I hope to correct soon (thanks everyone).

From a blank Visual Studio project to shipping… < 120 days

I created a new Visual Studio project a few weeks after purchasing my first Windows Phone (a Samsung Focus, I’m pretty happy with it), and registered for the domain name 4thandmayor.com in early December 2010. Hoping to learn about the process of building a large, feature-complete Windows Phone app from the ground up, I had no idea how much time it would take, but it’s been a fun use of many a night and weekend over the past few months.

Most development happened in spurts as I found a free Sunday afternoon or a clear night or two. I’m really glad that I was able to the have the opportunity to build a feature-complete WP7 app and that Microsoft is open to this kind of project as appropriate.

A brief, approximate timeline of my development process:

Early Dec. 2010: App concept, goals, and new Visual Studio project created. Targeting v1 of the foursquare API.
Mid-December: Domain name registration, setup a source control system at home, etc. Oh no! Foursquare v2 API launched, v1 to be deprecated.
Christmas vacation Dec. 2010: Lots of coding and completing the application, foursquare launched photos & comments support for iPhone and Android. I was able to add these features in a few days over the break.
Late January: spent a few weekends polishing, fixing bugs, and focusing on the “Metro” design
February: moved to a much more rich data loading system
3/8/2011: foursquare announced fsq3, with even more new features, at SXSW. Around this time, there were login issues with the official foursquare app for WP7, and I decided it was time to launch the app.
3/16/2011: submitted to the Windows Phone Marketplace

Not knowing that fsq3 was coming out at SXSW, it’s a testament to the Windows Phone app platform that it only took a few hours to add these new views, models, and features into my app (exploring, enhanced leaderboards, etc.), allowing me to deliver a little more than a week and a half later a feature-complete implementation.

I will be covering a lot of the experiences and sharing a decent amount of code and samples over the next many blog posts, covering:

Application architecture
Data loading strategies
Designing for Windows Phone… for developers.
Building out controls and components for a strong and polished “Metro” experience
Establishing a web experience for your WP7 app
Compromising between raw performance and beautiful design
Analytics and apps
Keeping the user interface responsive
OAuth2 and the Windows Phone
Pivot loading techniques and user interface virtualization tips
Debugging, collecting feedback and beta testing
Gold plating: making a fun out-of-box, first-time-run experience
Polishing a Windows Phone app
Marketplace ingestion and the last mile

Please let me know if there are any things I’ve missed, or you’d like to know about, and I will add them to the list! I’ve learned a wealth of information along the way but I think this will be a long-term blogging project, there’s just so many different things here.

Technical building blocks

The app was a pretty big technical undertaking, the goal of building a feature-complete app for such a large service is a big challenge. Along the way I had to build out a number of components, and of course make use of many great things others have shared as well.

Silverlight for Windows Phone Toolkit: powering page transitions, the tilt effect, and toggle switches.
AgFx: a Windows Phone and Silverlight application framework by Shawn Burke (more info here and here too)
Various image control and loading concepts by David Anson
JSON.NET by James Newton-King
Andy Pennell’s LittleWatson
SLaB by David Poll (used for tombstoning stuff)
Advice and code by Peter Torr & also Gilles Khouzam
Bing Maps Mobile Platform
And last but most important, the foursquare developer API

And I also built out a ton of specialized components, talk about fun:

Watermarked text box
Visual components resembling the OS’s text messaging experience
An awesome scroll viewer that can do delayed image loading in an efficient and smart manner
Smart image controls for fading, replacing “Metro”-style blocks of color, and efficiently downloading bits.
A grouping items control with an emphasis on smooth scrolling
A text visualizer for showing licensing information in the About screen
A Static Bing Map control for high-performant, beautiful maps
A WebXamlBlock for displaying updatable information
Orientation-aware layout containers
An analytics component
“Live tiles” for use inside an app
A fun Ken Burns-style effect
Enhanced message box and dialog overlays
A very lightweight app settings provider
Tombstoning stream and text functionality

Initial reception

“My Saturday night was great, thx to 4th & Mayor” – toowicked

“Been using 4th & Mayor foursquare app, gotta say it’s the best one I’ve used on any OS. Get it when it’s available in WP7 marketplace!” – Jonnie

“4th & Mayor you are beautiful and fill my heart with hope for #WP7 future.” – Sergey

“Wow, 4th & Mayor is incredible. Infinitely better than the official foursquare app for Windows Phone.” – Brian

“Inspired by the @4thandmayor application. I guess I will be doing some #wp7 coding this weekend.” – Laci

“Wish we could get you to make a Twitter app that looks as good as 4th & Mayor ” – Josh

Special thanks

This project could not have happened without the help and support of many good friends and engineers.

A big shout out to Naveen and all the folks at foursquare: thanks for building a beautiful product, great service, and having a solid, open API for developers to take advantage of!

As called out in the “About” page of my app, thanks:

Shawn Burke
David Anson
Gilles Khouzam
David Poll
Peter Torr
Andy Pennell

Also, thanks to my excellent beta testers who have been checking in all over the world. Notably, Shawn, Eric, Gilles, Nimesh, Shoko, Sam, Johan, David, and Nic. You all rock!

There is a list of known issues up on the site. The app is designed to offer a rich, compelling and fun experience for people with up to 50 foursquare active friends, with slight performance degradation for people with more friends.

So, check out the site and download the app if you’re into foursquare.

Hope you enjoy the app!

Foursquare™ is a trademark of Foursquare Labs, Inc.
This application uses the foursquare™ application programming interface but is not endorsed or certified by Foursquare Labs, Inc.

Upcoming speaking engagements on the Windows Phone

Jeff Wilcox — Wed, 16 Mar 2011 21:45:15 +0000

I wanted to share info on a few of the upcoming talks that I will be giving at a few conferences. If you’re thinking of attending any of these, I think there will be plenty to learn!

MIX 2011 (April)

At Microsoft’s own MIX 11 conference in Vegas, I will be presenting on Windows Phone application performance (session DVC01), with an emphasis on lessons learned, what’s improving in the performance space, and a look at the new Windows Phone profiler.

I’ve had the honor of attending MIX several years now and each year it gets better, more refined, and remains an outliner in the Microsoft conference line-up (it’s more fun, casual, and Las Vegas is always fun).

You can see the current session list for MIX 2011 online. Also, the Silverlight Toolkit has been nominated for one of the Nineny awards, so that will be exciting! MIX is held in Las Vegas at the Mandalay Bay convention center April 12-14. The keynote speakers on day one are Scott Guthrie and Joe Belfiore.

NDC 2011 (June)

I’ll be presenting a few sessions on Windows Phone developer at the Norwegian Developers Conference (NDC 2011) in Oslo, Norway. The event is held from June 8-10. Here’s the current session lineup and schedule for NDC 2011. Scott Guthrie is giving the keynote on 6/8.

I’m presenting 2 talks:

On the morning of 6/7, a talk on “Peeking at the source of a successful Windows Phone app”. This is a 300-level talk that looks into what it takes to have a large Windows Phone app, from dealing with the marketplace, solving common problems, and a look at a smart data caching and loading system for pulling down data from web services.
In the afternoon, “Making a beautiful and rock-solid Windows Phone app”. This talk is more of a 200-level one that takes a simple Windows Phone app (like you could create in a matter of hours) and then takes it to the next level by adding visual effects, addressing usability and design issues, as well as adding error reporting and other key app services. It would be great for any developer thinking about building an app, to find out how to polish it and make a difference.

There are a ton of other great speakers going including Jon Skeet, Rob Conery, Jonas Follesø, and the .NET Rocks guys, just to name a few.

Hope to see you out in the wild this conference season!

I’m developing my own Foursquare client for the Windows Phone

Jeff Wilcox — Thu, 10 Mar 2011 23:28:14 +0000

I’m developing an unofficial Foursquare client app for Windows Phone in my spare time that will be available free on the Windows Phone marketplace this month. I will have another blog post soon introducing the app in a more official capacity, this is just setting the stage.

With an emphasis on design that you’d expect from a great Windows Phone app, the app is fun to use, responsive, and almost as addictive as coffee if you’re into 4sq like I am. Here’s a quick look at the app – it respects your theme preferences, accent coloring, and looks beautiful.

Building a complete app of this size from the ground-up has been a great learning experience. It has given me a lot of good perspective to bring back to the product team (the day job), and it fits my needs perfectly, since I love Foursquare and am passionate about having the best experience using it on my phone.

The Windows Phone development environment is stellar, really productive; I’m amazed at how quickly I can add new endpoints, build up functional UI, and in general be productive.

Full disclosure, I’m a developer on the Silverlight Phone & Devices team, so I have my own fine opinions in this space. But it’s fun, easy, and I can’t wait to see more people get into the groove.

Why build yet another Foursquare app?

Although the Foursquare app for Windows Phone today is ok, it doesn’t support a number of great new features that Foursquare has added to their iPhone and Android apps, such as photos, commenting, and new features released at SXSW this week (such as leaderboard updates whenever you check-in at a place), so I’m focusing on adding that sort of functionality, while polishing the user interface and experience to better match how I would expect a world-class app for the Windows Phone to look and feel.

I’m sure, in time, the official app will be updated as well. It makes perfect sense to me why they should focus development on those platforms initially given the number of users they are serving with those devices. There’s going to be a chicken-and-egg situation with apps for a while on any new platform.

So I’m not looking to completely replace that nice official app, but if others find my client useful, that’s great, too! I know my Windows Phone friends on Foursquare want a better experience, and I’ve had a number of good friends testing my new application to help get it ready to release into the wild. Stay tuned.

Loving Windows Phone development today

I’ve been using a Windows Phone (Samsung Focus) since mid-November last year, and I’m happy to say that it’s been a pretty good process overall. I’m consistently amazed at how many people ask to see it when I’m out on the town – it is my opinion that in time this is going to be a very strong contender, and the Nokia involvement is pretty exciting. The marketing is right about one thing: having your next meeting right on the lock screen is super important for my day job, I’m always running from meeting to meeting.

Interest in the dev platform is going to grow, and so it’s very important for me as a member of the Silverlight for Windows Phone team to have a good understanding of the lifecycle of app development, especially a hard look at platform limitations, where we can do better, and what’s missing, in building out a complete Windows Phone app that matches the user experience expectations that our users have.

Building such an involved app has helped me get into the customer mindset even more: experiencing some of the pains today, the joy of getting something working, and then having the experience of using my very own app out in the real world as I check-in to places.

I traveled the world last year meeting with customers large and small to make sure that the initial applications all had a good launch, and along the way helped build guidance about performance, common issues and pitfalls, and came up with a number of suggestions I think all wp7 app devs should consider. That knowledge, combined with my experience building my own Foursquare app, is really interesting, and I cannot wait to share some of those tips because I think it will help drive quality into all the apps out there.

Why Foursquare

I’m an avid Foursquare fan. I’ve been using it for a long time now, find it a really fun way to share experiences with friends (the new more visible leaderboard in v3 is fun, as are check-in comments!), and yes, I admit that I use my phone for only a few things: e-mail, 4sq, the occasional Facebook or Twitter update, and maps. That’s in priority order. I’m always checking in, because it’s fun with Foursquare – Facebook places is just boring in comparison.

From an application perspective, Foursquare is a sufficiently complex application (over 40 views/pages) that the learning experience has so far been valuable, and it covers many typical application scenarios for the smartphone form-factor: location services, camera and picture integration, privacy, and plenty of web services and rich content.

From a development standpoint, Foursquare has a solid application programming interface that is pretty open, uses OAuth2, JSON, and represents the state of the art for most strong web services today. Perfect candidate.

Though I briefly considered charging for the app, this is my gift to the Windows Phone world – hopefully there are some Foursquare fans on WP7 that will appreciate that!

Looking at recent Foursquare innovations

As I mentioned at the start, Foursquare has recently made exciting new improvements to its service, expanding the “game”, and so there are a number of features that are not supported on the Windows Phone client today.

As a Windows Phone user, I want to be able to enjoy the same experience as friends with iPhones and Androids… and it’s just a matter of the software here. I want to experience these great Foursquare features:

Photos of venues
Photos with tips
Associating a photo with a check-in
Commenting on check-ins
Leaderboard results when checking in
Additional special types
and more

I hope to fully support all these great new features where I can, enabling Windows Phone users to experience the same great things that our iPhone and Android friends can today with the latest Foursquare 3 client.

The Windows Phone development environment

Visual Studio has always been a great place for coding, but combining that with the rich Silverlight design surface, the free Expression Blend tool for UI tweaking, and a way of debugging using my phone device or the Windows Phone emulator, it’s all very solid.

Most recently, I was able to setup a station with a touch-screen monitor on a Windows 7 machine. The result is the ability to use the Windows Phone emulator more like a real phone – being able to pinch, flick, and pan using real touch manipulations is a great improvement over using the mouse in testing before. All I did was plug in the touch-screen monitor and go! Here’s a short YouTube video of that experience while debugging.

Components, components, components

One reason that I have not yet released my app on the marketplace is that I’ve been tweaking, polishing, and filling out the user experience through a large component/control library. As a side project in my evenings, this has been a labor of love.

Building out an application this large with the right level of performance is not easy, and I’ve had to build a number of specialized components along the way. Many of these components I’ve polished enough to behave just like you would expect the Windows Phone to – and this is important to me. I don’t want a user to have an inconsistent experience from the rest of the phone, and so I’m taking the time to build these to a high level of quality.

I have an eye for detail and as a result really find it offensive when I’m using apps that don’t respect the OS design and user’s preferences, for example: I want my selected “accent color” to come through in the app. I would like the experience to feel authentic to the Windows Phone, and not be a “port” of some other app experience from another platform.

So now I’ve built up an army of components. Most are specialized, but over time, I will find a way to share them with the community at large. Give me time!

A core part of this application is a sweet way of loading and caching data from the web for use in model objects and data binding. Details will be out on that in a bit, too.

Do we need a Three20 for Windows Phone?

If this reads a lot like Joe Hewitt’s “Developing Facebook for iPhone” post, it is on purpose – I’ve drawn a lot of inspiration from learning about the Three20 project that Joe started. It started for a similar reason as why I am building so many custom components – matching the OS, filling gaps where there are no official controls in the SDK yet, and working to improve the ease of use (pulling and caching data from the web, for instance). It’s also somewhat comforting (and maybe a little disturbing) to me that I can read posts about the Apple development platform, mentally replacing “Apple” with “Microsoft”, and understand that all app platforms seem to go through the same trials and tribulations.

Three20 is an open source project initially started by Joe, offering a number of the components built for the Facebook app for iPhone, generalized and polished for use in pretty much all the top iOS apps today.

I’m not ready to commit to releasing my mixed-quality-bag specialized-components, but I think the community at large is going to continue to build out additional solid components – I’m already seeing many active phone and Silverlight developers starting to share their components, which is sweet.

Excited to share more with you all over the coming months. I will be blogging technical details on my blog here, as well as sharing tidbits on Twitter – so please do follow me, @jeffwilcox.

Using AutoCompleteBox in a Windows Phone Panorama or Pivot item

Jeff Wilcox — Wed, 09 Mar 2011 22:28:20 +0000

With some quick re-templating action, you can use AutoCompleteBox from the toolkit in a Panorama or Pivot control page for Windows Phone. This is one of the key customer asks from folks developing WP7 apps that I hear often.

The good news is that this can be accomplished with simple re-templating of the AutoCompleteBox control, and a little visual trickery.

The bad news is that I’m not sure that we will be able to address the CodePlex work item to officially support this, work item 7574 with 21 votes so far (a popular issue!), because of the technical limitations at play here: the control itself uses a child Popup in the template to display the results, showing them on top of your page and content. When used in a Panorama or Pivot, there are issues here where the Popup doesn’t properly align on the page, or work at all.

There are three steps to doing this:

Making sure that you have a Visibility converter available in your app (most already have this)
Designing the visuals with grids to include a placeholder and a spanning content area on top of your pivot/panorama items’ content
Retemplating your AutoCompleteBox when used

For this example, I’m starting with the standard Windows Phone Pivot Application template so that you can follow along. This is best described as “hack quality” so proceed at your own risk. I want to unblock people that believe this is not possible, so here it is.

Also, with this workaround, the Visual Studio design surface is unable to continue working due to an issue resolving RelativeSource at runtime. You’ll want to comment out some of it while working on your design.

Visual trickery, illustrated

The trick to this re-template is to remove the popup from the template. Instead, we need to “fake” the popup experience by overlaying the results of the AutoCompleteBox (when searching) on top of the visuals in the PivotItem or PanoramaItem.

As always, I believe re-templating is a core Silverlight development technique. Though often a last resort before modifying the code of controls or building your own, it is a super important concept to master.

To do this, start with a standard Pivot control or Panorama item template and make these changes to the item that will contain your search box.

The root element of the item must be a Grid, not a StackPanel
It must define at a minimum 2 rows: the first row has a hard-coded height of 72 that will represent the search/text box of the AutoCompleteBox, effectively a “placeholder”
The last visual needs to be another Grid, with Grid.Row set to 0, and the RowSpan to span the entire number of rows defined in the child of the pivot/panorama item. This is to fake the effect of a “popup” by allowing visuals to be on top.

I understand this concept can be a little confusing, which is yet another reason we can’t really just change the template for all AutoCompleteBox examples. I might add this template to the sample project in the future, however!

The reason the last item needs to be the “overlay” grid is that XAML at the bottom of an item has a higher z-order than the rest, acting similar to a popup.

So visually, we define first a basic grid in the item.

The XAML might look like this now – you can follow along in the default pivot app project to see what’s different.

This defines a placeholder (Row 0) and the content of the item (Row 1). Row 0 is where the text box visually should be overlaid. Visually, this is sort of what this is about enabling from a spacing perspective:

Now, we add the “overlay” grid. For this purpose, I temporarily colored it Red to show that it overlays the earlier items:

In the actual world, this is where you want to put in the overlay grid and eventually the AutoCompleteBox.

So the updated code is similar to this:

Ok. We’re closer now that the basics are there. If you run the project, you’ll still see simply your content, with space at the top where the AutoCompleteBox (text box part) will go.

A required visibility converter

Since we replaced the pivot, we need to instead toggle the visibility of the list box for showing results only when the IsDropDownOpen dependency property is set to true. This is easy enough using a relative source binding (similar to a template binding) plus adding a Visibility converter to the project, and using it in the template.

Here’s a super simple visibility converter to get started. Add it as a class file to your project.

using System;
using System.Windows;
using System.Windows.Data;

namespace Microsoft.Phone.Controls
{
    public class VisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            bool visible = true;

            if (value is bool)
            {
                visible = (bool)value;
            }
            else if (value is int || value is short || value is long)
            {
                visible = 0 != (int)value;
            }
            else if (value is float || value is double)
            {
                visible = 0.0 != (double)value;
            }
            else if (value == null)
            {
                visible = false;
            }

            if ((string)parameter == "!")
            {
                visible = !visible;
            }

            return visible ? Visibility.Visible : Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

And then to the page, add it as a resource, plus the XMLNS for “localControls” pointing to the Microsoft.Phone.Controls namespace. I use the key name Vis.

Now we’ll use it in the template.

The new template

Now we want to re-template the AutoCompleteBox. You could define the template once in App.xaml, but for simplicity I just did this inline. The most important parts are:

Removing the Popup template part
Adding a Visibility relative source binding to show/hide the results at the appropriate time
The listbox and textbox in the template are moved into a grid-row structure visually

This takes advantage of the idea that template parts in controls are usually “optional”, so without the Popup in there, it still functions just fine in the app.

So this now adds to the overlay grid…

AutoCompleteBox instance
Sets the item template, filter parameters, etc., as an example
Sets the ControlTemplate

Here is the ControlTemplate if you are just copying and pasting into your own app:

The Visibility binding on the ListBox is important, as it is what keeps the ListBox from being displayed over your existing page content at runtime. It uses the resource we defined for the visibility converter, Vis. Relative source binding is used to make it very similar to a template binding with a converter.

And so the final XAML for the PivotItem looks like this expanded:

So, taking a few of the coloring concepts from earlier, you see we end up with this idea at runtime when entering text (coloring added to show separation, it won’t look like that in your app)

Download the completed project

I’ve zipped up the sample including the template. Make sure you have the Silverlight for Windows Phone Toolkit installed as well, you might have to re-add that reference to the sample.

[ZIP] 31 KB – AutoCompletePivot.zip

Other notes

Selecting an item may require a few touches by default

When you select an item in the AutoCompleteBox, it will fire SelectionChanged, etc., but you may find that the list shrinks (requiring another press), or that the software keyboard is still up. These need to be worked around today at the app level to match the experience you want to offer your users.

Consider hooking up to the selection event in the control, then calling Focus() on a visual element elsewhere to remove the software keyboard
Consider a code fix where if a single item is selected currently, to assume that was the final selection by the user and dismiss the selection system – requires a code workaround since not all app authors may want this.

Enables Landscape page use as well

This also enables using AutoCompleteBox on landscape pages, although it’s very difficult to control the software keyboard (SIP), so you may find that you can hardly see a single item while in landscape mode with the software keyboard up.

You may notice that the native Windows Phone experience rarely offers auto completion in landscape, and as always, Panorama pages should not be Landscape.

IE NOTE

The Internet Explorer browser has an auto complete box in Portrait mode only. In Landscape, it is hidden – and although I don’t have the official word, I believe it is because the software keyboard takes up most of the screen, leaving no space to select items.

So I think the UX guidance is to NOT show auto completes in landscape, but you’re welcome to try. You could add special app logic similar to this to try and fix the problem, but it isn’t pretty:

Attach to the GotFocus and LostFocus events of the text box in the template (requires some visual tree logic code)
In your GotFocus handler, if the page is in one of the Landscape modes… you’ll want to open up additional visual space above your page content.
Temporarily collapse the page title and perhaps its header (very involved if it is a pivot control!)
When the focus is lost, you want to restore that content. The platform should handle “scrolling” around the viewport in this mode to maximize screen real estate.

Items source size warning

One thing to callout is that the implementation of AutoCompleteBox was originally designed for use on powerful desktops, so the key code path for filtering is designed to be run on the user interface thread. On the Windows Phone, with a single core and mobile ARM hardware, this can be a bottleneck for apps.

Please consider keeping the number of items under 100 if possible, and if you need more, you may need to consider ways to use the “Populating” method to spin up your own filtering work on a background thread (not covered in this post).

Hope this helps.

Introducing the February 2011 Silverlight for Windows Phone Toolkit

Jeff Wilcox — Thu, 17 Feb 2011 02:48:58 +0000

Today we pushed the button on the February 2011 release of the Silverlight for Windows Phone Toolkit. We’ve added a few new controls that previously app developers had to pick up separately while working on polishing their apps, including the tilt effect and performance progress bar. VB samples, too!

Please download the new Silverlight for Windows Phone Toolkit release here. This is a great download to pair with your updated January 2011 Windows Phone Developer Tools installation.

What’s new?

Tilt effect

We have integrated the TiltEffect attached property, allowing developers to really easily turn on the “tilt effect” in this apps, automatically giving buttons, hyperlinks and check boxes the desired tilt effect that is found in many parts of the Windows Phone experience.

MSDN documents are available for this feature:

This is the same control that was once presented on Peter Torr’s blog and became a sample, now much easier to use.

PerformanceProgressBar

There have been several PerformanceProgressBar iterations, and finally there is one available built-in to the Silverlight for Windows Phone Toolkit.

This version is very easy to use, you can just drop it on a page, without needing to specify styles like earlier workarounds. Also, it smoothly animates out in an improved way, improving the visual attractiveness of apps.

Simply bind to or set the IsIndeterminate property to get the visual effect. There is no need to visually collapse this implementation.

For some history and other information,

Bug fixes and feature improvements

We’ve addressed customer-requested issues and improvements, most in the LongListSelector and transitions space.

VB.NET Samples

Now that Visual Basic support is available for Windows Phone, we are pleased to now offer the same sample project we ship with the toolkit, now in VB.NET.

To use VB.NET with Windows Phone apps, you also need this easy download.

A 1 minute click-through of new features in the sample app

Here’s a quick video of the emulator running the samples project included with the source download.

In the video, you see:

The tilt effect in use on the main page
The LongListSelector, which has received a number of improvements and bug fixes
The performance progress bar, including a quick demonstration where the blue progress bar (the PerformanceProgressBar in the toolkit) competes against the red standard ProgressBar with the user interface thread blocked. Also, the blue performance progress bar automatically fades out, yielding a smooth UX polish for your apps.
The tilt effect page, where you see a button, checkbox, and hyperlinkbutton being touched, responding with the tilt effect underneath.

Earlier phone toolkit features

As always, there are other useful features for app developers built into the toolkit, including:

AutoCompleteBox
ContextMenu
DatePicker & TimePicker
Gestures
ListPicker
LongListSelector
ToggleSwitch
Transitions
WrapPanel

Addressing touch responsiveness and list scrolling

One thing that we’re still trying to find the best solution to is list scrolling. The LongListSelector (LLS) control was designed to help address some of these issues, but we know that we aren’t there yet.

I’ve had conversations with a number of developers both at Microsoft, within the product teams, and with the community out there, to try and compile a list of issues, asks and possible solutions.

We know, for instance, that there are issues with the use of the TouchPanel component that the gesture service is built on, and we want to find a good solution for that.

At this time, LongListScroller is the best recommendation for most apps that need to do grouping, where the standard virtualizing ListBox is not enough.

A more active CodePlex site

Another administrative note, we’re trying to keep the CodePlex site at http://silverlight.codeplex.com/ a little more up-to-date than in the past. You’ll notice that work items should be responded too, and we’re going to keep porting bugs between our Microsoft systems and the external site.

One experiment that we’re doing with the phone toolkit is that we are offering many bug fixes as they happen as opposed to at release time; in fact, since the November 2010 Silverlight for Windows Phone Toolkit release, we’ve checked in multiple updates to the source to address customer feedback, marketplace ingestion issues, and transition bugs.

You can view the latest source code and related check-ins at http://silverlight.codeplex.com/SourceControl/list/changesets

Let us know what you think of this more transparent way of working. Hope this helps. (Download link)

Notes on Silverlight and Phone Toolkits, Testing and Other Phone Stuff

Jeff Wilcox — Sun, 06 Feb 2011 21:59:25 +0000

Hello readers, and happy 2011. It’s been a very busy January, and just now I am preparing a number of exciting new posts to get things going again. Until then, here are some small notes and previews on the Windows Phone tools, the Silverlight for Windows Phone Toolkit, the Silverlight Toolkit, and the Silverlight Unit Test Framework.

Windows Phone Developer Tools January 2011 update

The long-rumored Windows Phone 7 update is even closer, a new developer release download is now available. Please do update to the tools now! You can continue to use the tools to build apps for the marketplace today. (Release notes)

New functionality: Copy and paste support for apps. It just works in your apps, too, so that’s nice – no special action required to enable it for controls. Text boxes, password boxes, and the browser control “just work”.

This is yet another set of patches on top of the original tools download, so it’s not a pretty update, but it is worth the multiple downloads.

Rebuilding your applications that use Panorama, Pivot, and Maps

You might want to rebuild your application and resubmit it to the marketplace if you meet a few conditions:

Were using the Bing Maps control without the October 2010 patch. There were a number of key bugs fixed in that release. It is now build into the 1/2011 tools.
Were using text boxes inside of a Panorama or Pivot control. Copy and paste doesn’t work so hot due to some manipulation bugs in the Pano+Pivot libraries.
Were wanting to use a Bing Map inside of a Panorama or Pivot.

The reason that you have to rebuild is because these are “client libraries” that are built into your actual .Xap that goes to end users, so to get the goodness of these changes, you have to resubmit a new Xap with these updated client library bits in them.

Looking at Copy and Paste in action

So if you have an app that uses text box, you’re ready to go. Here’s what it looks like when you use the newest tools build, that contains the ROM image with copy & paste built into the framework.

Select some text in the text box

Click the copy indicator button near the selection

In the SIP (software keyboard), click the paste icon to insert it!

There is no programmatic API to access the clipboard at this time.

Silverlight for Windows Phone Toolkit February 2011 release is brewing

We’ve been addressing customer-reported bugs and issues with the previous Silverlight for Windows Phone Toolkit release, and are getting close to having something ready. As we’ve always been a small, agile, dedicated team, we’re trying to fix up a few last-minute issues before pushing the button.

We will also be adding Visual Basic samples this time around.

Some of the fixes you can look forward to:

Improved transitions experience including a timing fix and new easing functions to better match the phone UX. Oftentimes the transitions would not appear on the device when complex pages were being navigated to.
Large set of LongListSelector (LLS) control improvements and bug fixes.
An AutoCompleteBox crash fix.
Other minor customer bug fixes (as indicated in the work items tracker)
The November updates addressing marketplace ingestion issues

About bleeding-edge phone toolkit source

Something we are trying with the phone toolkit now is offering important fixes and other changes directly in the source control, ahead of the next official binary release. This allows us to better serve folks by offering a preview of what’s coming.

Here’s where you go to list all the changesets we’ve submitted for the toolkit source: http://silverlight.codeplex.com/SourceControl/list/changesets

If you build the source for the toolkit in your project, then you can easily get these new changes. And, you’re an honorary member of the Silverlight Toolkit testing team since you can help us uncover issues and send feedback ahead of the larger release.

This kind of input is super important. We’ll try not to push bugs to the source control, but it can happen!

Open source notes on the Silverlight Toolkit

It’s very exciting being a part of the Silverlight Toolkit and its sister release, the Silverlight for Windows Phone Toolkit. The large source tree is a great learning resource for Silverlight developers everywhere w.r.t. custom control development. But it is also true that we don’t accept external contributions to the toolkit at this time, it is a pull-only repository. You’re free to fork it into your projects and enjoy it as you like, but if you submit patches to the site, we unfortunately cannot use them. Recently we updated the homepage of the Silverlight Toolkit to note this, since we don’t want to waste anyone’s time creating patches that cannot be used (sorry!).

Here are a few notes specific to the toolkit for Microsofties, however…

If you are a Microsoft dev

If you are a full-time Microsoft employee and using the Silverlight (or phone) Toolkit, we’re happy for that, and are definitely interested in accepting any bug fixes or improvements to the existing controls. Just send me an e-mail to talk about this, since we do have a set of guidelines and process for this sort of thing.

We recently had a number of great unit test fixes come in this way, and appreciate the help, since we often can only focus on one release of technology at a time.

If you are a Microsoft team

Microsoft teams looking to use the Silverlight Toolkit can find more information at this internal link.

If you want to be a Microsoft developer

We’re always hiring – find out more at the http://careers.microsoft.com/.

Silverlight Unit Testing Updates coming soon

There have been a flurry of bug fixes checked into our source control system for the unit test framework, powered by customer-reported issues and a few generous developers inside Microsoft who have contributed improvements that their teams have been using.

Some of the fixes and changes include:

Phone unit test framework interface fixes
Automated test service fixes (restores command-line test execution)
Browser automation fixes
Targets file fixes
Additional metadata for test methods

When I have new builds ready and blogged, I’ll also be updating the source on the public CodePlex site. No timeline for this yet, though; sorry.

Yup, I’m building an app…

If you follow my Twitter stream (@jeffwilcox), you know that I often spend my evenings and weekends coding. I’ve been building a social app for Windows Phone and it has been a really fun (and challenging) process building an app from the ground-up.

Once the app is finished, I will be covering in detail the challenges and issues I encountered, and strategies for dealing with many of the issues large apps are hitting. I’m also trying to get the best guidance on improving scrolling performance in lists, and have spoken with a number of devs about this recently.

Great 2010

I also wanted to take this time to thank everyone that I’ve had the pleasure of interacting with in the past year. It’s been exciting, bringing our new platform to light, leveraging years of hard work we have done on the Silverlight team.

This was nice for me as I was able to meet other folks at Microsoft worldwide, developers in so many places, and sit with smart engineers from other companies for a change. Well worth the price paid sitting in the back of planes. I swear I could walk through SEA-TAC airport with my eyes closed now.

Thanks, happy new year, and enjoy the Super Bowl if you’re in the states and into American football.

A small but important UX improvement for ScrollViewer on the Windows Phone

Jeff Wilcox — Mon, 06 Dec 2010 07:32:13 +0000

Here’s a quick UX improvement to the scroll viewer that adds a visual indicator for the user showing them briefly the scroll bars.

Interestingly, the actual phone operating system does have this concept of a hint, so I think it’s a smart addition any developer should consider while polishing their app before submission to the marketplace.

If you aren’t sure what the goal is here, go to the “settings” for the Windows Phone either in the emulator, on the real phone, or hey even the iPhone’s scroll bars all do this, so you have options.

The user experience problem with the ScrollViewer for WP7

There is no visual cue to the existence of the scroll bars in Silverlight applications for Windows Phone by default. I don’t know why this wasn’t done for the official control styles in the platform, but being so easy to fix, I think folks should pick this up.

Now that I’m finally doing some fun app coding on the weekends, I intend to share more small tidbits like this and I hope you all appreciate this sort of fit and finish attention.

I have also been downloading and experiencing many of the apps on the Windows Phone Marketplace, with varied success. I’ve had more than one occasion where I was briefly confused, not knowing there was more information just a pan away, since the scroll viewer is effectively invisible until you touch the surface.

Triggers to the rescue

Triggers were something WPF developers will remember; back in the day, before we had the magical and designable visual states system. Now if you’re saying “but dude Silverlight doesn’t support triggers,” you’re mostly right. There is, however, support for the Loaded event. So in XAML you can define a storyboard that will run when the control’s loaded event fires, super easy.

Exactly what we want! I want to animate that same opacity from 1 to 0 to match the normal state at startup.

The BetterScrollViewer Template

This is a control template, not a style. So remember to set the Template property to the static resource for it to work.

Using the template

I place this template in my App.xaml then just set the template every time I use a scroll viewer.

Now if you want this in ListBox, you need to (unfortunately, it’s a pain) re-template ListBox. So any ListBox needs to set the template to something like BetterListBox. This template is exactly the same as the standard one except of course the static resource set in there.

And to use this with just regular scroll bars, well, you’re on your own, but can use the same trigger mechanism to add it easily I bet.

Notes + I removed the border!

This scroll viewer template I modified also reduces the visual count by 1. I didn’t like the idea of having the scroll viewer wrapped in a border and supporting those properties, since I don’t use them. If you want to use those properties though you’ll want to build your own template from the standard to keep those template bindings in place.

If you’re using one of the controls like panorama or pivot, that may do some pre-loading offscreen of items, it is likely that the Loaded event will fire and trigger this animation when the user cannot actually see it.

So don’t expect this behavior to help in those scenarios. To really polish those you’ll need to jump into code.

And I picked the time of 1.5 seconds for that initial scroll appearance. If I find out from any UX folks I will try and learn what the official value is that’s used on the phone, but in the meantime, 1.5 looks about right to me.

Hope this helps.

PhoneHyperlinkButton updated: now supports web, email, text and phone call tasks

Jeff Wilcox — Sat, 04 Dec 2010 03:06:38 +0000

I’ve updated my extended HyperlinkButton control for Windows Phone 7 to now support all the key tasks. This makes it really easy to build up about pages, user profiles, and of course fully supports data binding.

So the core phone tasks work well with this. Same story, you set the Tag to be effectively the Uri. There are a few reasons for this but I admit Tag is the ultimate hack/general property. I’ve also incorporated some earlier feedback from the first version I did; I’m using StartsWith instead of indexing into the Uris.

I’ve also added simple query string support for the tasks, so you can set the basic properties on the messages as well. Note that with the SMS and phone tasks I’ve deviated from the standard RFC 2806 here, so this syntax is specific to this control and supports additional properties that aren’t standard. So the links build on the standard (like you use when building web apps for phones).

Adding the control to your project

Just add the following as a class file in VS or Blend. Then, make sure you setup an xmlns for the namespace, and you use it much like a regular HyperlinkButton at that point, except please set or data bind the Tag property as a string or Uri, instead of NavigateUri.

Example Tags (URIs) & Tasks

Here are some examples and the specific tasks that are used. Remember in the tag that, to make the XAML parser happy, you need to escape the ampersand as “&”.

Phone call

To allow the user the choice of placing a call, use this syntax in the tag. Understand that this won’t actually place the call; the user will be prompted with a allow/don’t allow prompt. It’s up to you to send it a valid phone number though, I’m not error checking this first!

Optionally you can include a “displayname” property, which will appear to the user along with the phone number that is to be called. Note I’ve encoded the spaces as %20.

Text message

Just like the “tel” URI syntax, text messaging starts with “sms:” and I’ve added another parameter, body, which will be the initial text message content. The user can add to it, remove that body, or use the back button to cancel the sending of the text.

Email composition

Building on the earlier implementation that only supported the “to” address, I’m matching most of the standard mailto: URI expectations by now adding support for body, cc, and subject query string parameters.

Default task: Web browser

Anything that doesn’t start with mailto, sms, or tel, will be sent to the web browser.

Styling note

So the default hyperlink button will show the text as content, underlined, but I actually prefer a slightly different set of styles in my own applications. Here are two I use: “EmptyHyperlinkButton” and “AccentHyperlinkButton”.

These can be used with any hyperlink button, even if they aren’t my PhoneHyperlinkButton, since the control template is simple and shared among all derived types.

EmptyHyperlinkButton

I use this for more complex user interface areas, where I might actually have a stack panel full of a few different things as the content. This is a hyperlink button technically, but hardly looks like it, other than respecting very basic padding/margin values, it has no appearance. I’ve also removed the VSM styles to make it very simple.

I’m also using a content presenter here.

AccentHyperlinkButton

I like this simple style. It gives the text a semi-bold effect, colors them to the user’s personalized accent color.

PhoneHyperlinkButton.cs

And the goods to drop in your project:

// (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;
using System.Collections.Generic;
using System.Diagnostics;
using System.Net;
using System.Windows.Controls;
using Microsoft.Phone.Tasks;

namespace Microsoft.Phone.Controls.Unofficial
{
    /// 
    /// An extended HyperlinkButton control that uses the Tag property to
    /// open the web browser, compose an e-mail, text message, or make a call.
    /// 
    public class PhoneHyperlinkButton : HyperlinkButton
    {
        /// 
        /// Handles the click event.
        /// 
        protected override void OnClick()
        {
            base.OnClick();

            Debug.Assert(Tag is string, "You need to set the Tag property!");
            string tag = Tag as string;
            if (tag == null)
            {
                // This should support data binding to Uri.
                tag = Tag.ToString();
            }

            IDictionary d;

            if (tag.StartsWith("mailto:"))
            {
                Email(tag.Substring(7));
            }
            else if (tag.StartsWith("tel:"))
            {
                // RFC 2806 only defines the basics of a number component.
                // However, since the Windows Phone supports the concept of
                // sending a name to display as well, I have deviated.
                // tel:8005221212&displayname=Unknown%20Caller
                PhoneCallTask pct = new PhoneCallTask();
                pct.PhoneNumber = GetAddress(tag.Substring(4), out d);

                string name;
                if (d.TryGetValue("displayname", out name))
                {
                    pct.DisplayName = name;
                }

                pct.Show();
            }
            else if (tag.StartsWith("sms:"))
            {
                // Also not really an official syntax for SMS.
                // sms:8005551212&body=Hello%20there!
                SmsComposeTask sct = new SmsComposeTask();
                sct.To = GetAddress(tag.Substring(4), out d);

                string body;
                if (d.TryGetValue("body", out body))
                {
                    sct.Body = body;
                }

                sct.Show();
            }
            else
            {
                // Assume the web.
                WebBrowserTask wbt = new WebBrowserTask
                {
                    URL = (string)Tag,
                };
                wbt.Show();
            }
        }

        private void Email(string s)
        {
            IDictionary d;
            string to = GetAddress(s, out d);

            EmailComposeTask ect = new EmailComposeTask
            {
                To = to,
            };

            string cc;
            if (d.TryGetValue("cc", out cc))
            {
                ect.Cc = cc;
            }

            string subject;
            if (d.TryGetValue("subject", out subject))
            {
                ect.Subject = subject;
            }

            string body;
            if (d.TryGetValue("body", out body))
            {
                ect.Body = body;
            }

            ect.Show();
        }

        private static string GetAddress(string input, out IDictionary query)
        {
            query = new Dictionary(StringComparer.Ordinal);
            int q = input.IndexOf('?');
            string address = input;
            if (q >= 0)
            {
                address = input.Substring(0, q);
                ParseQueryStringToDictionary(input.Substring(q + 1), query);
            }
            return address;
        }

        private static void ParseQueryStringToDictionary(string queryString, IDictionary dictionary)
        {
            foreach (string str in queryString.Split("&".ToCharArray(), StringSplitOptions.RemoveEmptyEntries))
            {
                int index = str.IndexOf("=", StringComparison.Ordinal);
                if (index == -1)
                {
                    dictionary.Add(HttpUtility.UrlDecode(str), string.Empty);
                }
                else
                {
                    dictionary.Add(HttpUtility.UrlDecode(str.Substring(0, index)), HttpUtility.UrlDecode(str.Substring(index + 1)));
                }
            }
        }
    }
}

Hope this helps.

A quick and easy extension to HyperlinkButton for Windows Phone 7

Jeff Wilcox — Wed, 01 Dec 2010 04:48:01 +0000

While doing some application building, I naively assumed that I could just put a web address in the NavigateUri field of the HyperlinkButton control (Windows Phone 7) and have it just magically work.

UPDATED 12/3/2010: I’ve made improvements that you will find here: http://www.jeff.wilcox.name/2010/12/updated-phone-hyperlink-button/

Turns out you need to actually handle the Click event yourself and setup the proper task for that, unless you’re doing local within-the-app navigation.

I wrote a super simple PhoneHyperlinkButton control that derives from HyperlinkButton. No custom template or style, so just drop the file into any project and you’re off and running.

Set the “Tag” property of your instance to be the URI or e-mail address you’d like the message to go to: if it starts with mailto:, then it’ll use the EmailComposeTask. Otherwise, the web browser task.

// (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.Diagnostics;
using System.Windows.Controls;
using Microsoft.Phone.Tasks;

namespace Microsoft.Phone.Controls.Unofficial
{
    /// 
    /// An extended HyperlinkButton control that uses the Tag property to
    /// handle web browser or e-mail compose task intended use on the phone.
    /// 
    public class PhoneHyperlinkButton : HyperlinkButton
    {
        protected override void OnClick()
        {
            base.OnClick();

            Debug.Assert(Tag is string, "You need to set the Tag property!");
            string tag = (string)Tag;

            int i = tag.IndexOf("mailto:");
            if (i >= 0)
            {
                tag = tag.Substring(i + 7);
                EmailComposeTask ect = new EmailComposeTask
                {
                    To = tag,
                };
                ect.Show();
            }
            else
            {
                // Assume the web.
                WebBrowserTask wbt = new WebBrowserTask
                {
                    URL = (string)Tag,
                };
                wbt.Show();
            }
        }
    }
}

Hope this helps. Oh, and remember that once the task completes, your app will likely be tombstoned.

MyPhotoApp: Sample project from my Windows Phone development series at Øredev

Jeff Wilcox — Tue, 16 Nov 2010 17:52:51 +0000

Last week I gave a multi-part series on Windows Phone development at the Øredev conference in Malmö, Sweden. Here is the sample app that was built throughout the talk. It’s a simple app that lets you pick a photoset from Flickr for a given user, then browse the photos in a nice slideshow format (swipe to move between the photos). It’s all setup with sweet data binding and goodness.

Download the zip and make sure that you have the Windows Phone Development Tools and also the Silverlight for Windows Phone Toolkit.

This app has a number of things inside it:

Simple view models
Simple Flickr web service layer
Integration of the service into the view model
Navigation service passing parameters to pages
Makes use of the JSON library on CodePlex
Makes use of the Silverlight Toolkit for page transitions and the list picker control
Various examples of templating and styling
The Pivot control for the phone is used as a photo slide show with built-in flick and pan manipulations by not using the header or title properties, and binding the actual items to the photos to be shown
PerformanceProgressBar

Things you need to do to get this working:

You may need to add the references to the JSON library as well as the toolkit before it will build for you.
You need a Flickr API key, get one here.
You need to put your API key inside the FlickrService.cs file on line 23.
Unless you want to browse all my photosets, you’ll want to put your own Flickr user ID string inside of MainPageViewModel.cs line 74.

The talks in the series will be uploaded in the coming weeks I’ve been told, but they are not yet available.

Pivot as a slide show component for photos

Since pivot has the nice manipulations support built into it, it was super simple to use as a slide show-style photo viewer. Here’s the XAML I used for the slide show page:

Walking through the elements, here is what they do.

ItemsSource binding

The view model for the slide show page includes a property that exposes the photo objects. This binds the pivot to that list. This means that without any of the other elements and templates being set, the pivot control will show the type name (Photo) instead of the actual photos.

Here’s the slide show view model file btw:

public class SlideshowViewModel : ViewModel
{
    private readonly IFlickrService _flickr;
    private bool _isLoading;
    private IEnumerable _photos;

    public SlideshowViewModel()
        : this(new FlickrService())
    {
    }

    public SlideshowViewModel(IFlickrService flickrService)
    {
        _flickr = flickrService;
    }

    public bool IsLoading
    {
        get { return _isLoading; }
        private set
        {
            _isLoading = value;
            RaisePropertyChanged("IsLoading");
        }
    }

    public IEnumerable Photos
    {
        get { return _photos; }
        set
        {
            _photos = value;
            RaisePropertyChanged("Photos");
        }
    }

    public void LoadPhotos(string photosetId)
    {
        IsLoading = true;
        _flickr.LoadPhotoset(photosetId, photos => Dispatch(() =>
            {
                if (photos != null)
                {
                    Photos = photos;
                }
                IsLoading = false;
            }));
    }
}

HeaderTemplate data template

This is a little bit of a Pivot control hack. You actually can set the header to x:Null, but then when you run this under the debugger, you may get a first-chance exception. The pivot control catches and continues, but it’s annoying as a developer.

This workaround, a 1×1 grid, enables a “screen capture” to be taken of the header, avoiding the exception when it isn’t of size:

This is all because for this slide show page, we don’t even want to show any headers, we aren’t using that visual part of the pivot ux – we’re just using the slick built-in manipulations logic and animations plus data binding.

ItemTemplate data template

This is what translates the data object (Photo) into an actual image that can be loaded.

The binding to ImageUrl is for the property on the Photo data object. Sorry it was a string instead of a Uri, cheap and easy on my side I suppose.

namespace MyPhotoApp.Flickr
{
    public class Photo
    {
        public string Id { get; set; }
        public string Title { get; set; }
        public string ImageUrl { get; set; }
    }
}

So this way the image will automatically load. A nice improvement I should have made was write some better code to make sure the images are ready to go and maybe even fade in as they’re downloaded, but for a two-minute slide show, this was all pretty easy.

ItemContainerStyle for PivotItems

By default, the user experience guidelines for the pivot control and pivot items are nicely set in the default styles and templates. You’ll note without using the item container style that there is spacing between the edge of the photos and the edge of the phone’s screen.

This is the 12 pixel margin on the left and right of the pivot items; when using the standard phone styles for things like buttons and textblocks, which include another 12px margin, this means there should be 24px on the left and right of the actual visual things inside the pivot. Things align nicely in that situation.

But this is a photo viewer, so we actually want to show as much of the photos as possible – so this container style says “for each new item we are creating, let’s just set the margin and padding properties to 0!”.

Navigation service usage

Inside this app, the navigation service is used to go to the slideshow page. Since the slideshow page has its nice view model data bound into the DataContext, I need to use the navigation service to get the photoset ID into the page. By using the URI inside the nav service instead of using a global variable or app-level call or property set, this means that the tombstoning for the app just works.

If you press the Start key while in a photoset, then hit back, you’ll come back to that photoset instead of the homepage for the app.

Now being a sample/demo app, I didn’t fully implement the right tombstoning behavior: I also should have actually stored the pivot selected index and restored that, so they would be on the same photo, etc. I also don’t using isolated storage in this app for simplicity sake, but that must be done for a real production app of course.

I also don’t properly do null/empty string checks in the calls, so if no photosets are returned and you try navigating, you’ll get a null ref exception. It’s demo code!

Moving to the sub-page

private void OnButtonClick(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri(
        string.Format(
        "/Views/SlideshowPage.xaml?id={0}",
        ((Photoset)SetList.SelectedItem).Id),
        UriKind.Relative));
}

Getting the photoset from the URI in the slideshow page

In the page’s OnNavigatedTo event handler, I read the property from the query string if I can. I only load photos if I find a photoset ID. This does have the trouble that you’ll see a blank bit of nothing if there are no photos returned.

Also if you look at the implementation, you’ll note that the loading automatically happens in the view model – so I don’t have to have the code in the slideshow file worry at all about whether to show the loading indicator or not. That’s all declaratively setup in XAML. Nice.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    var context = DataContext as SlideshowViewModel;
    if (context != null)
    {
        string id;
        if (NavigationContext.QueryString.TryGetValue("id", out id))
        {
            context.LoadPhotos(id);
        }
    }
}

And since all IDs in Flickr are to be treated as UTF8 strings, I don’t have to parse or convert the string value from the query string into an integer or anything like that.

General memory note

Note that you’ll want to watch your memory consumption if you go this route.

MyPhotoApp.zip download. Hope this helps.

WP7 Panorama: Smoothly fading the background (and enabling fading when changing, too)

Jeff Wilcox — Mon, 15 Nov 2010 02:08:47 +0000

I’ve heard a number of conversations with developers about wanting to smoothly fade in background image changes within the Panorama control that ships in the Windows Phone 7 Developer Tools.

I spent the better part of this rainy Seattle Sunday looking into this. I actually had a conversation with the famed Kelly Sommers (@kellabyte) a few months ago about implementing a Panorama whose Background was automatically set to the daily Bing image, and was recently inspired by an internal developer discussion at Microsoft.

Here’s a video of the sample project where I was able to do just that, and more! The control takes care of smoothly fading any background property change, and the sample project grabs the daily Bing image to show in there as a sample, too.

So if you just want to jump in, the source is all up in the sample project in DynamicPanoramaBackgrounds.zip download (1.2 MB).

Feel free to use this in your own projects, it’s a simple set of extensions. This sort of effect is nice, but I’m personally glad that it isn’t built into the framework by default: there’s definitely some fixed performance cost to this sort of dynamic effect in the platform today.

I did a lot of testing on my phone and didn’t run into any noticeable performance issues, but beware that this implementation will increase the fill rate and have an effect over the standard, so don’t just use it without evaluating how important the scenario is to your apps. Note that this isn’t designed to do well when moving between background Brush types, or images of massively different sizes – but if they are all the same or similar, it should just work well!

Using ‘DynamicBackgroundPanorama’

Just set the Background property of the Panorama!

You can use data binding, or just straight code, for this. The example sample I wrote has two sub pages: one which just shows the current Bing search background for your region, and another which shows some photos that are just built into the project. No special work required!

I’ve packaged the control and its various components into the sample project instead of building out a standalone class library, so if you place it in your project, make sure you pick up all its individual files, including the Generic\Themes.xaml file that contains the default styles.

Contrasting image note

I haven’t addressed the contrasting image issue in this implementation. Ideally a second brush might be exposed, to allow for a translucent overlay of color such as a transparent black, over the backgrounds. This would help with keeping the contrast more appropriate, but I didn’t want to as it would increase the fill rate even more.

Designing the primitive(s)

It’s pretty straightforward to think about, but difficult to implement without also building out a few primitive controls to help with the re-templating experience.

So in designing the right implementation, I decided to mimic the same design ideas that went into the TransitioningContentControl (TCC) that is built into the Silverlight Toolkit’s layout control library. With that control, the Content property (or bound Content) is used in a cycle to smoothly animate out the old content and bring in the new content.

I wanted the same effect, but instead with just a Brush – in most situations an ImageBrush. I went ahead and started from the open source code to the TCC, changed the content presenters in the default style and control template to no longer be needed in the same way (I just derived from Control instead of ContentControl).

So here are the primitive components I built out:

DynamicBackgroundPanorama

A one-line control that derives from the official Panorama control. The constructor sets the DefaultStyleKey to the type, enabling the style from the Generic.xaml file to be pulled in automatically.

This is important because this scenario is built on re-templating and just a few primitive changes, and this type lets a developer use it without having to work very hard at all.

UpdatingPanningLayer

This is a one-method derived control, deriving from the primitive PanningBackgroundLayer. The purpose is to call the UpdateWrappingRectangles method, a protected method. This will cause the writeable bitmaps in the control to update so that the updated image changes will also update the “ears” or left/right wrapping rectangles used to show the wrap-around effect.

TransitioningBackgroundControl

Starting with the Silverlight Toolkit’s TransitioningContentControl created by Mr. Ruurd Boeke, I changed it up to instead work from the brushes. In case anyone is interested, changes from that were basically:

Moving the ContentPresenter sites from typeof ContentPresenter to Grid
Updating the code to specific issues with image brushes, where I’d like to wait to kick off the transition until after the image actually loads. Most of this code is done in the StartTransition method, plus the addition of the Loading visual state.
I dropped a subset of the VisualStates internal class from the toolkit into the file, just to reduce the number of unique files needed for the solution.
Added a dependency property of type Brush and name DynamicBackground. I could have used just the standard Background property, but that actually takes more work to wire up to ‘change’ events than to just define a new property like this.
A special workaround in the OnApplyTemplate to walk up the visual tree and identify the UpdatingPanningLayer, if any. This lets me force the Panorama control to effectively bump and update the side images of the control used when you scroll beyond the edges of the extreme items.
Updating the template:
- Removing the alternative defined transitions
- Changing the default fade-in template by removing the fade out of the current – leads to a smoother look in my opinion
- Adding a Loading visual state to help with the delay-load effect of loading an image brush from a URI, for smoothness.
- Adding BitmapCache settings to the two individual sites (Grids)

Themes\Generic.xaml

This file contains the custom template for Panorama as well as the important default style and template for the TransitioningBackgroundControl that I built. The differences from the official Panorama template are:

The PanningLayer primitive is replaced by my UpdatingPanningLayer
The Border and background set in the content of the background panning layer has been replaced by my TransitioningBackgroundControl
The background has the margin offset to eliminate the seam
There is no BitmapCache setting on the background in Panorama, instead it is set within the transitioning control, for performance reasons.

I’ve also taken guidance from Panorama developer extraordinaire Dave Relyea’s posts:

Note that this project makes use of the Silverlight for Windows Phone Toolkit for transitions, so make sure you have it installed if you want to use the sample code.

Download the sample project

Sample Project and Control Implementation [ZIP] (1.2 MB)
Dependencies: Windows Phone developer tools and the Silverlight for Windows Phone Toolkit (for transitions in the example only. The control does not have this dependency)

Hope this helps!

“The Future of Silverlight” keynote by ScottGu starts off the 12/2/10 FireStarter event

Jeff Wilcox — Sun, 14 Nov 2010 18:47:03 +0000

As a developer on the Silverlight team, I get the joy of seeing the many code review and checkin e-mails that our dev team is doing. It’s exciting, and sometimes I do wish I could share that sort of thing with the world.

We’ve been hosting Silverlight FireStarter events for some time, but in light of recent confusion and happenings in the world of the Silverlight, the next one on 12/2/10 is just that much more important: the keynote by Scott Guthrie will be on “Future of Silverlight”.

Here’s the marketing graphic for the event, please tune in!

http://www.silverlight.net/news/events/firestarter/

There is actually a lot more on the schedule than just that keynote, too. Here’s the latest schedule I have seen floating around:

8:00 am
Breakfast

9:00 am
Scott Guthrie
The Future of Silverlight

10:45 am
Jesse Liberty
Data Binding Strategies with Silverlight and WP7

11:30 am
Yavor Georgiev
Building Compelling Apps with WCF using REST and LINQ

12:15 pm
Lunch

1:00 pm
Dan Wahlin
Building Feature Rich Business Apps Today with RIA Services

1:45 pm
John Papa
MVVM: Why and How? Tips and Patterns using MVVM and Service Patterns with Silverlight and WP7

2:45 pm
Tim Heuer
Tips and Tricks for a Great Installation Experience

3:30 pm
Mike Cook & Jossef Goldberg
Tune Your Application: Profiling and Performance Tips

4:30 pm
Jaime Rodriguez
Performance Tips for Silverlight Windows Phone 7

5:15 pm
After Party!

If you’re in the area, try attending – I hope to be there and as always I enjoy meeting folks in the industry and getting their thoughts on all the hard work we do, so I’ll see y’a there – or on the Internets!