Windows Phone 7 Developer Tip: Themes & Copy & Paste

June 22, 2011 — 1 Comment

With the recent update for Windows Phone 7 (aka NoDo) finally starting to make it everywhere figured it was a good time to share something I’ve noticed with some apps dealing with the new feature of Copy & Paste.  Since most of you reading this are probably developers, you should also be aware there is also a Windows Phone 7 developer tools update to accompany NoDo. As a developer you should be aware of this new update and make sure your apps have the proper support. 

So what’s the issue?  Usually things will work right out of the box and no re-compile/re-design will be required.  But sometimes they won’t.  I have seen some applications out there that do not work so hence the reason for this post. 

The first issue you might get is Copy & Paste in a panorama or a pivot.  If your user has updated to the new OS that has Copy & Paste and you used a text box in a Panorama or Pivot control, the user is not going to have the best experience.  Basically the issue will be as the user is trying to select more text, the pivot or panorama will try to switch items so the text box and pano or pivot will be competing for manipulation events. This could lead to a frustrated user.  Using a TextBox in a pano or pivot control does go against the design guidelines but you are not stopped from doing it.  To overcome this you will have to re-compile your application with the new tools and re-submit an update to marketplace.  Small thing to do but your customers will be happy Smile

imageThe second issue I found is around themes, accent colours and brushes.  Basically, with theme and accent colour the user has the option to change these to personalize their phone.  For theme the user has the option of Black or White background and for accent colour the user has 10 options. 

As the user changes the theme, foreground text, selected text highlight, selected text foreground colours will change.  These all correspond to brushes in the TextBox

        • Foreground – The standard foreground colour for the text
        • SelectionBackground – the background colour when some text is selected
        • SelectionForeground – the foreground colour for the text when the text is selected

If you already have an app in marketplace and for some reason decided not to use the default brushes then be aware that the user may have an issue seeing the text selected.  I’ve seen a couple of instances of apps that when I select some text in the text box, the SelectionBackground is White and the SelectionForeground is also white.  This is a result of hardcoding the brushes in your application. 

If you are creating an application and don’t change any of the brushes your application will do the following when high lighting text

image

And if you change your brushes but don’t set them properly, you may get the following result

image

So how do you avoid this? Well if you are changing the default brushes just be aware of what you are changing it to.  When working on the UI of a Windows Phone application, I usually get that work done in Expression Blend.  If you are not familiar with it would probably be a good idea to get familiar with it as it could reduce your development time, Visual Studio is not the greatest tool to get a Windows Phone user interface done Smile

So, in Blend, for the text box when selected, you will get some properties where you can change the brushes.

image

The image above shows the brushes for a textbox that has custom colors.  Notice the SelectionBackground and SelectionForeground are both the same colour, this causes the text not to be visible when text is selected.  This is easily overcome, and all you have to do is click on the ‘Advance Options’ square and then click ‘Reset’

image

Now, you can either ‘Reset’ or make sure the colours are not the same.

And that’s it!  Not very exciting and small things, but it’s the small things that users remember and complain about! Something to definitely think about to deliver that great user experience to your customers on Windows Phone!

One response to Windows Phone 7 Developer Tip: Themes & Copy & Paste

  1. Hey, that’s powreufl. Thanks for the news.

Leave a Reply to Gloriane Cancel reply