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.