Designer Silverlight

UPDATE (4/9/2011) : MIX Outsider has been updated to fix some “no network” issues and refine the message creation.

Download MIX Outsider (for sideloading)

MIX11 Outsider is the MIX11 app that doesn’t care about your schedule. It cares about something more important: the people you want to talk to, meet, or otherwise hang out with at MIX. Using a map of the conference floor and a simple “battleship” mapping metaphor, you can tweet, email or text your position at the conference. Don’t eat alone in awkward silence… instead find that Twitter friend who doesn’t have a clear picture of themselves in their avatar. Don’t spend half your pre-keynote time waving your hands in the air. Just tap where you are on the map and send out a link like this one.

http://mixoutsider.com/H60

And a quick video of the application in action

MIX11 Outsider Windows Phone 7 App Screencast from Matthias Shapiro on Vimeo.

I wish I could introduce this app with a bit more fanfare, but I’ve been waiting since Monday for my app to get through the submission process. I was hopeful that, if I got it in a week before MIX, I would make it in time for the conference. At the moment, that hope fades. As a result, until I can get the app into the Marketplace, it will be available here for download so Windows Phone 7 devs can sideload it onto their phones

MIX Outsider (for sideloading)

(Don’t know how to sideload an app? James Ashley has a great post on sideloading to the emulator or to a device.)

The funniest thing is that the “big idea” in this app isn’t really even the app itself. The app is really just the most complete extension of the original idea.

You see, last year at MIX 10, there was a massive coordination effort among my colleagues to try and sit together during the keynote talks. This led to e-mails, text messages, phone calls, and tweets with hard to understand directions like

“We’re 12 rows from the back in the middle of the far right side as you come in (stage left).”

But my decision to do something about it came when a friend spent 10+ minutes with his lunch plate in hand trying to find our table. I thought, “This is absurd… there must be a better way to find people.”

Unfortunately, my GPS did not work very well inside the conference… which didn’t really matter since (I assume) no one wants to open up a Google Maps or Bing Maps to find people inside a building.

So Jason Alderman and I discussed the problem and thought that it might be fun to do a “Battleship” metaphor for finding people at MIX11, laying the grid on a map of the conference floor. Based on that concept, I wrote a little application that allows user to tap to see where they are and send that information out. It then collects all the messages sent out with the app and shows them on the map with the users’ twitter avatars.

Users can send public messages using Twitter or private messages via text message or e-mail. Private messages are not broadcast and cannot be seen by anyone. They contain only the helpful link to the MIX Outsider reference website (designed by the aforementioned Jason Alderman) without any identifying information.

But my biggest hope is that this application gives people a point of reference so that even people who don’t have a Windows Phone 7 device can see the tweets, reference the website and still find the people they want to meet at MIX11.

When designing a “You are here” icon for the map in ShopSavvy (download now on iPhone, Android and Windows Phone 7. It’s free and super awesome), I decided to try something a little different. Because ShopSavvy is a theme-compliant application, I thought it might be fun to have the “you are here” icon be representation of the user’s actual phone.

So I created a little XAML icon that is a very rough approximation of the front Windows Phone 7 screen. I used shapes and theme-variant brushes so that the icon changes to represent whatever theme the user has in place on their phone.

Because the the icon is so small (48-by-80 px), I used only basic shapes and one custom path shape to represent the “maps” application. I also did everything on a “Canvas” in order to try to trim off as much layout computation time as possible. You could make it with a Grid and then scale it to your heart’s content. Probably won’t make a huge difference, but I’m paranoid about resources in my phone apps these days.

Here are a couple examples of how the icon could look, depending on the user’s theme choice:

All from the same XAML.

For the ShopSavvy version, I put a tiny little ShopSavvy icon at the top. In the code below, I took it out so the top right-hand will simply be a blank box. Or you would put a tiny version of your own app icon there.

Not much. Just something fun that I thought might be fun to share

One of the things that I’ve been fascinated by since last year’s MIX conference is the motion design in place in Windows Phone 7. In a past life I worked as a video producer and I’m always stunned to see how well people respond to beautiful animations… especially in interface design.

You can see this fascination in my multiple blog posts on Windows Phone 7 motion design:

• A Collection of Windows Phone 7 Motions
• Basic Windows Phone 7 Motion Design – A collection of XAML animations to help drive elegant motion.
• Windows Phone 7 Motion Design – In which I take my Canon T2i, slap on a macro lens and try to capture the highest quality Windows Phone 7 motions that I can manage.

Now I’m trying to take my passion and talk about it at MIX 11. My goal with this talk is to show some excellent examples of practical motion design and show 1) how users really respond to good motion design and how it helps our applications seem more responsive and 2) show how to practically implement this motion design in our applications.

My goal is to help us all see how motion design is not icing on the cake, but an essential part of building beautiful applications. So, if you could, please vote for me and help me speak at MIX 11.

App bars in Windows Phone 7 are actually a pretty cool little bit of functionality. They give the user 1-4 instantly accessible options for dealing with the screen the user is on, their buttons auto-animate in, they offer “always on” funtionality that isn’t going to be hidden by the on-screen keyboard, they give designers and developers instant access to a range of default icons in Windows Phone 7 ecosystem and they offer a much wider range of options when the user taps on the ellipses to open more options.

That’s a lot for such a little thing item. So you may be asking yourself, “What the hell is he talking about? What is an ‘App Bar’?” This:

And like this when the ellipses are tapped

But what gets me is the fact that making these things is so damn easy, thanks to the fact that Blend is the single greatest product ever created for people who want to design user interfaces. And you can quote me on that. My crush on the Microsoft Blend team is well documented.

Anyway.

So let’s go about mak

Making the App Bar

ing this app bar. You may be surprised to know that we can do pretty much everything we need to do without a single line of code. Because Blend is so stinking awesome.

First, select the PhoneApplicationPage in your Object and Timeline tab in Blend.

In the “Common Properties” section, you’ll see an “ApplicationBar” property. Click on the “New” button. You should see the following:

Add App Bar Buttons

Click on the “…” button to the right of “Buttons (Collection)”. Up will pop a “Collection Editor: Buttons” pop-up. Click on the “Add another item” button.

Type “Button” and you should see a “ApplicationBarIconButton” option.

Double-click on it. It will add an App bar button to your app bar. You should have a set of “Common Properties” that you can set. Type in the text you want (in our case, “done”) and click on the IconUri box. You will see a list of default Windows Phone 7 icons. Pick the one that works for you (I picked the check mark).

Do that same thing over again, but pick the close icon and give it the text “close”. Hit “OK” to close the app bar pop-up. Believe it or not, we’re done. Yeah, we need to hook up some Click events so they can actually do something, but the rest of it is all taken care of.

If you need to get back to the App Bar design, you can just click on the ApplicationBar in the “Objects and Timeline” and see the options again.

Add App Bar Menu Items

Adding menu items is similarly easy. Under the “Buttons (Collection)” item we clicked on earlier, there is a “MenuItems (Colleciton)” button. Click on it.

We see the same “Collection Editor and we’ll click “Add another item” again. This time, though, we type “menu” and double click on ApplicationBarMenuItem.

Add the text (“do one thing”) and run the process again to add another item. Click “OK” when you’re done.

Colors & the Application Bar

Designing the App Bar is pretty easy. The icons that we assigned to the buttons actually just act as opacity masks (I assume that’s how it works… it seems to make sense) so that they will change to whatever color is assigned to the foreground of the app bar. Warning: they will default to the theme foreground unless you explicitly set them to be another color. If you’ve decided not to work with the default theming engine, you will need to explicitly set the foreground and the background of the App Bar.

I talk about this a little bit more in my post on Windows Phone 7 theming. That might be a good place to go if you’re working on fine-tuning the app bar to fit into a non-themed design.

Let’s say you don’t really want to play nice with the theming engine in Windows Phone 7. This would be pretty understandable… when you play nice with theming you either need to 1) come up with some nice innovative solution that detects themes and sets brushes and colors dynamically or 2) use only the black, white, gray and accent colors that Windows Phone 7 theming gives you by default.

If you want to create a design that uses some custom colors, it can be difficult to make sure those colors fit both themes, which can throw a cramp into your creative juices. Additionally, if you decide to toss theme-compatibility to the wind in favor of your own design, you’ll need to make sure all your control templates conform and don’t go all wonky when the user changes their theme.

This can be a pain.

To help in this endeavor, I would like to present two resource dictionaries and a sample project.

DarkStyles.xamly – rename to DarkStyles.xaml (irritating download issue)

LightStyles.xamly – rename to LightStyles.xaml (irritating download issue)

Theme Resistant Sample Project

The basic idea is that I found the source style resource dictionary for all the Windows Phone 7 controls. These styles are implicitly set by the system depending on the users’ settings. We can override these settings with our own local resources. So all we need to so is set either point to the LightStyles.xaml or the DarkStyles.xaml as resource dictionaries in the App.xaml and all the controls will ignore the system settings and conform to our defined settings. Another bonus is that you can use take these dictionaries and use them to play around with colors to see how a solid theme is built in Silverlight.

So, let’s quickly walk through the process of forcing a theme in your project.

First, use Blend. It’s awesome. (You could probably use Visual Studio too, I guess.)

In your project, if you don’t have a “Resources”  folder, right-click on your project and create that folder.’

Now right click on your Resources folder and “Add An Existing Item…”. In the resulting pop-up navigate to either the DarkStyles.xaml or the LightStyles.xaml file.

This should add the necessary code auto-magically into your App.xaml, but double check. You should see something like this:

And that’s it! Sort of. I want to make note of a couple of clean-up issues.

Use Blend To Check Themes

First of all, you should know how to quickly test theming changes in Blend. In the top left-hand corner, you should see a set of tabs that say “Parts”, “Projects”, “Assets” etc. If it doesn’t say “Devices”, go to the menu bar and select “Window –> Device”. This will bring up a tab that looks like this:

From here you can change the theme and accent on the fly and see the changes in your design without running the app.

HOWEVER!

Some things don’t show up very well in the Blend theming, so always always always test your app on the emulator or on the phone.

Set Your Root Background

One of those things is that the default status for a PhoneApplicationPage is to have a transparent background. You’ll want to make sure that the LayoutRoot Grid (or layout element) in your application has the background set to “PhoneBackgroundBrush”.

Turn Off Your System Tray (Maybe)

Next, you might want to turn off the System Tray at the top of your app. That’s this thing

You have no control over what color it is, only whether or not it can be seen. Select the PhoneApplicationPage in your “Objects and Timeline” tab and uncheck the “Show SystemTray”. This is not a must (most apps will still look fine with the SystemTray on) but it’s something to think about

Set The Colors On Your App Bar

Finally, if you have an Application Bar in your screen, you’ll want to make sure the colors are explicitly set on those. (Don’t know how to make an application bar? Check this post out.) Select the ApplicationBar in your “Objects and Timeline”. Now click on the little box next to the BackgroundColor property and select “Local Resources –> PhoneChromeColor”.

Similarly, set the ForegroundColor to “LocalResources –> PhoneForegroundColor”.You’re all set… you now have a theme-proof application.

Now that the bile is out of my system with the Microsoft App Submission process, I thought I’d follow up with something that (I hope) is actually helpful. I’ve dug through the Microsoft Windows Phone 7 Application Certification Requirements and would like to present to you a quick checklist for anyone who is creating Windows Phone 7 Applications.

I’m going to skip over the obvious stuff in the formal checklist (don’t crash, don’t make the phone insecure, don’t create custom marketplaces, don’t violate copyright, if you’re making a game, look at the content restrictions, if you say you support French you should actually support French, etc). This checklist is to try to give an idea of policies that may not be obvious to all.

First things first: You need a “settings” page and your settings page needs an “about” section. Period. If you don’t have one, consider your application to be incomplete.  Lots of the stuff that are required will be hard to integrate into your app without a “settings” and an “about” page (or a “settings” page with an “about” section).

Download Windows Phone 7 App Submission Checklist (333)

All Apps

• Has the following unique icons that you use for the submission process: Phone tile, app list, large PC app, and at least one screenshot. You also need unique app icons for the title icon (Background.png), list icon (ApplicationIcon.png), and the initial splash screen image (SplashScreenImage.jpg) Download icon template package with the appropriate file properties.
• Performance
  1. First screen must render within 5 seconds of opening the app.
  2. User input must be available within 20 seconds of opening the app.
• Memory – Don’t eat the phone (use less than 90MB of memory)
• Settings/About page – you should have one
  1. Show the user the full application name
  2. Show the user the application version number
  3. Give the user a technical support contact e-mail, phone or website.
• Back Button
  1. If you have a context menu, dialog or pop-up, the back button should close it
  2. Games – back button should either pause the game or go back (but be consistent)
  3. When you’re on the launch screen, the back button should exit the app
• Your applications should look good in dark and light themes
  1. Note: this doesn’t mean that you have to use the theme colors. Basically, just test your application once in the dark theme and once in the light theme. Can you see everything OK? Then you’re fine.

GPS Apps

• Only use the Microsoft Location Service
• Allow user to enable/disable GPS within the app
• You need a privacy policy telling the user what you’re doing with the GPS data
• Do you plan on giving the GPS data to anyone?
  1. Describe what data is being used or shared.
  2. Get the user’s express permission to share the data
  3. Even if the user gives permission, let them take it back (put a permission checkbox in the app settings page)

Apps that share User Data

• Tell the user what data you’re sharing (contacts, photos, phone number, SMS data, browsing data)
• Get the user’s express permission to share their data
• Even if the user gives permission, let them take it back (put a permission checkbox in the app settings page)

Apps using Media (Sound/Music/Video)

• If you let the user download music through your app (ie. not through the Marketplace), you have to provide the playback yourself.
• Don’t change the volume without user input
• If you’re playing audio while the screen is locked, don’t do anything else.
• If the user is listening to music, don’t interrupt their music
• If you need to interrupt the user’s music with media (example: you’re playing a short “welcome” video) continue the music when your media is done.
• Do you integrate with the Music+Video hub?
  1. You must update the Music+Video history
  2. You must update “New” if you add new stuff through your app
  3. You must use valid data in the tiles you add (info or pictures of the artist, album, playlist, etc)
  4. If you put ads in the hubs, a black van will show up at your house. Your vision will go dark. They will never find your body.

Apps that integrate with the Pictures app

• You need an Extras.xml file at the root of the application.
• Tell the user when you’re saving a photo
• Can your app launch from the pictures? It should launch with the current photo already there.
• Are you sharing (uploading) any photos from the Pictures app?
  1. You must tell the user when the photo is uploaded.
  2. Your app must be able to launch on its own and through the Pictures app.
  3. You must tell the user when the photo is uploaded.

Apps that use Push Notifications

• You must ask user permission before you do Push notifications.
• Once you get user permission, you must have an option in the setting where they can turn it off.

Apps that Use Peer-to-Peer Communication (chat, instant messaging, P2P)

• If the user sets up their account through your app, you must ask the user if they are 13 or older.

UPDATE: After flying off the handle in this post, I wrote another post that will hopefully help. It boils down the submission guidelines and categorizes them into a handy checklist.

I really hate complaining about things. If you read through my posts, you’ll see I write almost entirely constructive information and tutorials. My goal with this blog is to build up, not to tear down. But I’ve had it with the Windows Phone 7 app submission process. It is severely broken. And Windows Phone 7 will be a failure as long as it is broken.

If I may submit into evidence the following non-fictional story:

A short time ago, I made an app submission for an app that uses GPS. I got a rejection notice under section 2.10.7 of the Windows Phone 7 Application Certification Requirements, which reads:

Your application must make a privacy policy available to users that informs them about how location data from the Location Service API is used and disclosed and the controls that users have over the use and sharing of location data.

I was a little frustrated. After all, the submission process takes a couple days and we were planning a nice healthy roll-out for this update, which is a pretty major one. Add to that the fact that our Location privacy policy is plainly visible and available via the terms of service, which the tester could find if they had looked at the “Legal URL” field that we provided as part of the application process.

But then I looked on the Marketplace and Microsoft doesn’t publish our Legal URL in the app page. “OK,” I said to myself, “it seems kind of stupid to ask for it if you’re not going to pass the information along, but whatever. Maybe what they mean is that the user should be able to find that information through the actual application itself.”

So I added that information to the application. 2 hours of work. Resubmit. 2 days of waiting. Rejected. This time, the rejection was because of section 5.6, which reads:

An application must include the application name, version information, and technical support contact information that are easily discoverable.

Um… OK. The version that is in the Marketplace doesn’t have that. Neither, for that matter, did the last version I submitted previous to this one. It’s not that adding that information is hard… it took 30-45 minutes. But my last error report didn’t mention that at all. I would have been happy to add it when I put the terms of service in. Is it really too much to ask that they mention both of those things at the same time so that, instead of 2 hours of work, 2 days of waiting, 30 minutes of work, 2 days of waiting I could just go ahead and do 3 hours of work at one time?

Fine. You guys suck. But this is a really important update so I put in the new information and submitted it.

Wait.

Rejected.

Why?

Under section 2.10.7, I need to provide privacy policy information about the Location data.

Microsoft… what the fuck? That shit is in there. I put it in 2 error reports ago. What kind of fucking monkeys are testing my app that they don’t read my “terms of service” when my “terms of service” are both required and accessible. Do they get paid on a per/rejection basis? I only ask because I pay you $20 on a per/rejection basis (free apps have a limited number of free submissions). And when I’ve paid you and met your dumb ass requirements and get rejected based on something that makes it obvious to me that your tester didn’t actually look at my application, I get pretty pissed.

“Why don’t you include detailed instructions into the “Tester Notes” section?” you may ask. Well, I did exactly that when I fixed the terms of service problem. But either the tester was unable to see my past “Tester Notes” or they ignored them. But, for that matter, why should I need to explain that my “terms of service” has the GPS privacy policy in it? Do I need to pollute my application with an explicit TextBlock saying “By the way, Mr or Mrs Tester, in case you don’t feel like looking at my ‘terms of service’ and you are unaware that the ‘terms of service’ is actually a really great place to put the GPS privacy policy, here is a specific button that takes you directly to that very section. Maybe after I do your fucking job for you, I can make you some coffee and get you a bagel.”

Perhaps I need to write a 150 page report, walking the tester through my application as if they were 5 years old, with screenshots of the application, pointing to different parts of the app, and explaining in vivid detail how I am abiding by each and every one of the guidelines. It’s not a huge deal, the guideline document is only 27 fucking pages long (over 2 times longer than Apple’s App Store Review Guidelines) with well over 100 rules that I need to follow, written in the finest legalese.

Do I sound ticked off? I’m pretty ticked off. Does this blog post sound unprofessional? This joke of an app submission process is unprofessional. I’ve always supported Microsoft as a business-friendly company. I love business software, in part because many of my friends work in environments where they use crappy software and I love to try to build good software for businesses that are too small for a major piece of software. Microsoft has always supplied the go-to technology to make that happen. But businesses don’t like waiting 2 days to fix a 30 minute problem. And they like it even less when it takes 2 additional days just to tell the tester that they screwed up, not us. And then pay for the privilege.

Let me be as clear as possible: Windows Phone 7 is the single best development platform for mobile that I’ve seen. Very fast, very easy, excellent tools. Simply amazing. But no one gives a crap if they can’t get their apps out. It’s all bullshit if no one can get to the end product the tools allow me to create. On that count, Microsoft, you aren’t just bad. You are the worst. By a large margin.

Normally, I wouldn’t blog something that seems obvious, but it took me hours to figure this out and I always try to write blog posts for stuff that it took me a long time to figure out. Enormous props to Walt Ritscher (Twitter: @waltritscher) who helped me figure this out.

This blog post is for you if you have a sound file and you want it to:

1. be included with the application when the user downloads the app
2. play no matter what… even if the user is listening to music

First, grab the audio you want to add to the application and, if it’s not already a .wav file, make it so. If you’re just trying this out for kicks (or for the learning experience), download this files.

Coyote.wav

When prepping your audio, keep in mind if you want the user to hear it over their music. If so, make sure it is LOUD. I spent almost an hour thinking this method didn’t work because I couldn’t hear the sound over my music.

Next, create a directory in your Windows Phone 7 project and add your audio file like so:

Then select your audio file and change the “Build Action” to “Resource”

Now right-click on the “References” in your project and click “Add Reference…”. Find the “Microsoft.Xna.Framework” reference and add it to your project.

To the top of your class, add:

using Microsoft.Xna.Framework;

Now we’re going to create a stream from that resource and use that stream to play our sound.

StreamResourceInfo streamInfo = Application.GetResourceStream(
new Uri("/MyProjectName;component/Sound/Coyote.wav",
UriKind.Relative));
SoundEffect se = SoundEffect.FromStream(streamInfo.Stream);
SoundEffectInstance soundInstance = se.CreateInstance();
soundInstance.Play();

And that’s it. Your sound should play.

If you’re reading this, I assume you’re working with sound in some capacity. If you’re new to the work of sound and just want a simple way to edit and export sound files for your app, I highly recommend the free sound editing application Audacity. It saved me on my current project.

If you’re using Audacity and editing/creating sounds to hear while music is running, take whatever sound you have and amp up the gain so that the volume is peaking at about 0.

This sounds extreme, but it’s the only way I’ve been able to get the sounds to reliably make themselves heard over rock music.

I also recommend checking out Jaime Rodriguez’s post on running a Windows Phone app under the lock screen. That way you can play sounds even if the user allows the phone to lock itself.

I’m working on a new project in which I need multiple ListPickers in a ScrollViewer.

The ListPicker is available via the Silverlight Toolkit for Windows Phone 7. If you don’t have it, you should get it. Get the source as well, for reasons that will be clear in one more sentence.

The only problem is that I can’t scroll if I do this because I run the risk of accidentally opening the ListPicker (which should be a tap interaction) when swiping (which is a gesture interaction):

I posted this as a work item on codeplex, so it will probably be fixed in a couple months (sometime in early 2011), but if you’re having a problem with it, do the following:

Open up the source, go to the Microsoft.Phone.Controls.Toolkit project, the ListPicker folder and open the ListPicker.cs file. Go down to the OnManipulationCompleted event and after the line

base.OnManipulationCompleted(e);

add the following conditional for the rest of the code in the method:

if ((Math.Abs(e.TotalManipulation.Translation.X) < 20) && (Math.Abs(e.TotalManipulation.Translation.Y) < 20)){
[Other code]
}

This catches manipulations that are less tap-y and more scroll-y and lets them slide by without opening the ListPicker. If you wanted to be really careful, you could probably change the conditional to 10 or even 5. Most of the taps I checked had pretty small (single digit) manipulation deltas.

One of the things that I’m fascinated with is trying to deconstruct the motion design in Windows Phone 7. I actually came to software design out of multimedia production so I’ve always loved animations in UI design. At some point, I hope to do a series of posts overall on motion design in Windows Phone 7. Actually, I really want to do a talk about Windows Phone 7 motion design at MIX 11. Take note, powers that be.

Anyway, the first step is to get some solid video of the WP7 motion so that I can look at it closely. After 3 cameras and testing a couple different lenses, I got what I think is pretty decent video. Eventually, I’d like to pair these with the XAML necessary to recreate them, but for now I hope it helps someone.

Also, now that I’ve got this process down, if you want video of a particular animation, let me know and I’ll make it happen. Make sure you tell me exactly how to get the animation you want or I might focus on the wrong thing.

E-Mail

Animations: List Item-to-detail animation
Download higher resolution video

Video of e-mail program in Windows Phone 7 from Matthias Shapiro on Vimeo.

Marketplace

Animations: dynamic Button animation, Panorama animation, List Item-to-detail animation
Download higher resolution video

Video of Marketplace App in Windows Phone 7 for motion study from Matthias Shapiro on Vimeo.

Messaging

Animations: List Item-to-Detail animation, cascading list item swivel (in and out), main screen selection animation
Download higher resolution video

Video of Messaging Motion in Windows Phone 7 for motion study from Matthias Shapiro on Vimeo.

Main Screen

Animations: Main screen-to-application list animation
Download higher resolution video

Untitled from Matthias Shapiro on Vimeo.

Main Screen

Animations: Main Screen load in animation, application selected animation
Download higher resolution video

Opening and closing applications in Windows Phone 7 (for motion study) from Matthias Shapiro on Vimeo.