Windows Phone

Portal 2: Lab Rat

Submitted by Robert MacLean on Wed, 12/21/2011 - 10:28

If you do not know what Portal is, then you are dead to me! DEAD! But since I know everyone knows of Portal that won’t be an issue. What you may not have known is that Valve created a comic book that chronicles the gap between the end of Portal 1 and the beginning of Portal 2, and your character (Chell) ends up back inside the facility.

This comic is called Lab Rat and you can view it in super great details at

But what about when you are travelling this festive season and want to read it quickly, or show your family so they can be caught up before you take them through Portal 2 on Christmas day? Well, for my seventh WP7 app (yes, I have build 7 Windows Phone apps this year!) let me introduce Lab Rat.

In addition to offering the comic in your pocket you can save any page, with or without text, to your phone for use as a login screen or any such thing! AWESOME!

In no way should you think this is an alternative to going online though, the detail of this comic should be seen at the BEST resolution possible – but this makes a good companion experience.


Platforms > Implementations

Submitted by Robert MacLean on Thu, 12/01/2011 - 10:13

imageI recently read an insightful post about how being a developer is less about coding and more about tooling, and while I do not agree with all of the post, the fact we as developers are tool obsessed rings very true. This obsession with tools becomes a white hot rage when our favourite tool is threated with extinction or causes a world of panic when a competing tool is proposed without enough information on it.

Let’s look at two key examples of that:

  • WinForms was very popular and when Microsoft brought us WPF, there was major push back from those who did not want to change and learn a new tool. If you reading this, then you are thinking well time solved that, I disagree. This very week I was asked about WinForms vs. WPF again. Time doesn’t heal all wounds, it just gives some of us time to move on.
  • To illustrate the world of panic I can use a more recent issue – Windows 8! Remember all the discussion before //Build about the death of <insert your favourite tool here>? The confusion caused by incomplete discussions around tools we love caused panic.

So what is the solution to this? I think simply a mind set change would be enough. The mind set change needed is to remember that a platform is more important/powerful/useful than a tool. I would like to take credit for this idea, but the first time I heard anyone mention this was a few years back and it was Scott Hanselman talking on MVC almost three years ago to the day. He mentioned that ASP.NET > ASP.NET Web Forms and ASP.NET > ASP.NET MVC. In short he was saying that the core understanding of ASP.NET, the core features and the core uses of the platform are bigger than a single implementation (tool) could be. Sure, you need to learn a new tool, but you aren’t starting at zero if you know the platform.

Silverlight_h_rgbWhy I am bringing this up? It is because of the discussions I have been having about another tool recently: Silverlight. We are approaching the panic stage on this tool due to rumours of it’s demise. However it is VERY important to take a step back and see what the platform is and how knowing the platform means that a tool can move along and we are still able to work/code/make money etc…

The platform Silverlight uses is XAML based UI technologies, a core set of how we can layout UI components using an XML dialect called XAML. This platform also has lots of options for things like binding, the MVVM patterns and so on that are either difficult or impossible to do with other UI technologies (like WinForms for example).

XAML based UI technologies started with a single tool: WPF – an implementation of the platform designed to run on top of the .NET Framework. A second tool, Silverlight, later appeared – this is an implementation of the platform designed to run as a plugin in a browser. A third tool, Silverlight for Windows Phone 7, came next and while very close to Silverlight it had it’s differences as it was an implementation of the platform for the phone. In the last few months we have had the forth implementation of the XAML based UI technologies appear: WinRT. This is the Windows Runtime in Windows 8 and when you develop with C#, VB.NET or C++ your UI technology is just another implementation of the platform.

Every implementation of the platform has been different, some in big ways and some in smaller ways but the core of the XAML based UI technology platform hasn’t changed and there is not a single rumour, plan, or hint that we are even close to seeing the end of XAML based UI technologies. We may see a tool end of life and die (like some rumours say about  Silverlight) or other tools just find completeness and not need new work done (like WPF if) but the platform remains and grows and learning a platform is always more important/powerful/useful.

Firefly for Windows Phone 7

Submitted by Robert MacLean on Tue, 11/22/2011 - 12:15

serentity logo square 173x173I am a brown coat – if you know what that means then you will be excited to see my new application for Windows Phone 7: a Firefly hub app which contains news, images, sounds & ringtones from the show and from the movie, Serenity.

This started as me wanting a sound board for the show, but grew larger Smile

This is the first app I have done since my UX training and I hope a lot of the tools and skills I learnt in that training comes through in the application.


Windows Phone 7 Apps: SA ID Number Tools & AA Rates Calculator Updates

Submitted by Robert MacLean on Wed, 11/16/2011 - 10:42

I have a few Windows Phone 7 apps, and two of those are the SA ID Number Tools and the AA Rates Calculator ones. You may be familiar with the AA Rates one from my friend, Rudi Grobler, who used it in his TechEd talks to show a UI that did not follow the model correctly Disappointed smile

I took this and the Windows Phone UX training I attended to heart and put a lot of work into updating them and making them a lot more in line with the WP7 UI guidelines.

AA Rates Calculator

The first think is this application has dropped the yellow background, which made sense for an AA tool (being their colour is yellow), and now is black or white depending on your theme. All controls have been updated to reflect that too. I have also fixed the alignment things Rudi was so quick to point out.

I use the highlight colour now and larger typography to really make the key information stand out from the rest – this is something I learnt at the UX camp.

In addition I have some other new features:

  • About to share your rate via email or social networks (twitter, facebook etc…)
  • The yellow branding is used in a position bar to give you an idea of how much is in the app.
  • I also added a fuel price page so you can always have the latest fuel price information!
  • The information pickers have also had an update and the selection is much larger now, so easier for people with big hands like me.
  • Fuel price can be displayed on a live tile too!


SA ID Number Tools

Once again I dropped the background green (which was a photo of my ID book cover) and that also meant being able to move to a pivot control rather than a (heavy) panorama control. The green/gold theme has been mostly lost, with gold being used in selective places in the application. Also a careful use of font sizes and colours in the application to make the information stand out more.


Hopefully these changes make these apps feel faster, easier to use and more part of your phone than before!

Windows Phone 7: Professional Tips - Press and hold

Submitted by Robert MacLean on Fri, 10/28/2011 - 08:51

RobertThe keyboard on WP7 is an amazing area which you will be often exposed to, so it is not surprising it contains some hidden gems to make the experience better, like double tap.

Today the hidden gem is the ability to press and hold keys to get pop ups with other options, which could save you navigating to the symbols/number section or even give you access to options that you never had anywhere else.

If you have a look at the screen shot you will see the dot key has been pressed and held and the popup has dash, exclamation, colon, question mark and dot in it. Much easier to find than going to the symbols section.

Other keys with this. Letters shown in lower case support this on upper case too:

  • e – ê è ë é
  • t – þ
  • y – ý ÿ
  • u – ù ú û ü
  • i – ì í î ï
  • o – ò ó ô ö ø œ
  • a – ä á â à å æ
  • s – ß §
  • d – ð
  • c – ç ©
  • n – ñ
  • m – ɥ
  • 1 – ⅓ ¼ ½
  • 2 – ² ⅔
  • 3 – ¾ ³
  • 0 – °
  • £ – $ ¢ € ¥ ¤
  • ( – < { [
  • ) – > } ]
  • - - _ ~ ¬ ·
  • ! – ¡
  • ' – ´ `
  • " – « » “ ”
  • ? - ¿

Windows Phone 7: Professional Tips & Dismiss notifications

Submitted by Robert MacLean on Thu, 10/27/2011 - 12:11

source Phone 7 supports little pop up notifications, which are called toasts (cause they pop up like bread in a toaster). You will see these when you get a text message (SMS) or from games (like Tanks) or in chat programs like WhatsApp.

These can linger around for a little bit, but you can get rid of them quickly – just swipe across them, like you were flicking them away and they will rush off your screen.

I use this a lot with WhatsApp when I get multiple messages quickly so I can clear the first and see the second toast which is under it or when I am playing a game and I want to get that SMS off screen so I can continue to play.

It’s another example of the UX in the phone having great little touches.

The Arturo Grid for Windows Phone 7 in PNG & GIMP

Submitted by Robert MacLean on Wed, 10/26/2011 - 07:38

layoutArturo Toledo works at Microsoft on the Windows Phone Design Studio team, and last week I had the chance to attend phone training with him. In that training he showed a grid he used for layout so that his apps match the layout of Windows Phone 7 apps – I call this the Arturo Grid.

Yesterday he posted about it and released an Expression Design version of it, which is great if you have Expression Design… but if you don’t it can be a problem. So I recreated it using the free graphics tool, The GIMP, and produced a transparent PNG version so that it can work in just about anything!


How I did it?

GIMP is a fantastic tool and I thought I would share how I created this layout. First I started with a new image, with the resolution of 480 x 800 and a transparent background.


Next run FiltersRenderPatternGrid and set the parameters as in the screen shot below. Note the offset horizontal & vertical lines are not linked. What we are doing here are creating grids of 37x37 (25 + 12 based off the Arturo Grid) with line width of 12 (so the space that is left is 25x25). The offset is +6 so that it pushes out, because the line widths are based on the middle of the line and not the edge.


Now add two layers, another transparent one and a white backed layer.


Place the new transparent at the bottom and the white in second place.


and now merge down the grid layer onto the white layer.


Now drag on guides:

  • Vertical: 24px
  • Vertical: 456px
  • Horizontal: 56px
  • Horizontal: 784px

and select that region.


Create a new

Then use Select ► Invert and press delete. This removes the area around the grid for the bleed (padding) area that your app shouldn’t use.


Now use the Fuzzy Select Tool (aka the magic wand selector tool) and click on the black.


Now hit delete to remove those black lines leaving just the white squares.


You can tweak the colours using the colour exchange tool (Colors ► Map Color ► Exchange) and you can tweak the transparency using the Opacity option on the layer tool to make it more transparent.


There you go, now you are done Smile


Windows Phone 7: Professional Tips - Double tap

Submitted by Robert MacLean on Tue, 10/25/2011 - 14:12

D04When you want to make sure something is dead (finished), you shoot it twice – also known as a double tap. Windows Phone 7 supports this too… for sentences.

When typing, double tap the space key and it will insert a full stop and a space!

Considering the size of the space key and how easy it is to double tap, rather than find the smaller dot key and move to the space key it can save you a little.

This is just one of the many awesome UX features in the phone!

Tech·Ed Africa 2011 for Windows Phone 7 - 1.1 released

Submitted by Robert MacLean on Thu, 10/13/2011 - 10:12
Update: This application has been retired - it was for TechEd 2011 and used the website a lot, the moment the site changes the app will break. It's goal & use are done, so I am happy to retire it.

iconI’m very happy to announce the 1.1 version of the Tech·Ed Africa app for Windows Phone 7 is now out with a TON of new features:

First up is dedicated in app pages for speakers. This means no more browsing to the website for speaker info. There is also options to view their Twitter, website etc… and since we not on Mango it supports saving the contact details to the device.


Second  is similar, dedicated pages for the sessions too!


Third improvement is on the sessions list page – a lot of cleanup and bug fixing there plus lots of options for the grouping (level, audience etc..). This should help finding session info very easily.


The MVP page got a BIG facelift too, with buttons for contact details for each MVP, and a cleaner more bold experience. Of the whole application I am most happy with the UI on this page. I also added a community tweets page that has tweets searched by hash tags!


The welcome page got a cleanup with more focus on the news tweets and the removal of the refresh option, since it refreshes in a lot of ways manual isn’t really needed. It also allows you to launch the BIG new feature…


Session planner! You can now browse and book sessions on your phone! And your phone will give you reminders to attend the sessions!


There is also a lot of UI tweaks – first the background was swopped to the latest UI from Tech·Ed and made a lot darker, so the contrast to the white stands out more the readability is WAY better. I also spent a lot of time with Rudi Grobler getting some of the smaller UI things right, so a big thanks to him! It even has a new and MUCH nicer icon Smile So what are you waiting for, go update NOW!


Tech·Ed Africa 2011 for Windows Phone 7

Submitted by Robert MacLean on Fri, 09/30/2011 - 11:35
Update: Check out the info on the 1.1 version
Update: This application has been retired - it was for TechEd 2011 and used the website a lot, the moment the site changes the app will break. It's goal & use are done, so I am happy to retire it.

iconI am passionate about Microsoft Tech·Ed Africa, not because I’m a speaker there (and have been many times in the past) but because it is an awesome event. Now in this mobile world every awesome event needs an equally awesome mobile app. Since Microsoft isn’t releasing one for Tech·Ed, I decided to put my skills to use and build a Windows Phone 7 app for the event Smile

This app is a little different from my other apps as I didn’t have the data, and it is a constantly moving target so I am doing some very smart (and maybe a little sneaky) things to get the content from the website!

Version 1 allows you to browse sessions, speakers, get pro tips, see who the awesome MVP’s are, and get official news!

I am working on version 1.1 which include community tweets, proper speaker & session pages and will update with more info as it is released so keep an eye on those updates!