Create Theme Friendly Buttons in WP7

WP7 provides some level of customization by allowing users to change the theme of their devices. There are 2 themes to choose from, the dark or light theme.

The dark theme makes the background black and the foreground white whereas the light theme swap it the other way around.

What this does is that if you have a white icon button in your application it will look fine in the dark theme. However, once the user changes to the light theme, your button will blend in totally with the background!

Take a look at the images below:

icon on dark theme

and this is what happens on a light theme

Where is my icon?!! :'(

Exploring the windows phone 7 further, you will notice that the application bar buttons doesn't have this issue at all and react very well to the different themes.

Hmm...I remember tackling a similar issue when I was working with Adobe Flash by using a concept called masking to provide a stencil over a display area. This gives the designer the flexibility to easily change what is being shown through the mask. The good thing is that Silverlight supports this concept as well.

Every UIElement exposes a property called OpacityMask which can be assigned a Brush instance that acts as a stencil, brush brush brush....ImageBrush! =)

The idea is to have an ImageBrush representing a png image and have it set to the content of a button. Then we can edit the ControlTemplate of a button and bind the opacity mask of the ContentPresenter to the Content property of the button.

And the result:

Works pretty well for me!

You can download the code here.

*Do take note that the control template has an Ellipse that makes up the outer circle of the button. I take this approach because the downloaded Windows Phone 7 icon pack only have the png of the icon image without the outer circle. This makes it easy to use these icons as it is. If you have icons that already have the outer circle, just tweak the template to remove the outer circle :)

Have fun!

No Option to Search For Directions In Windows Phone 7 Map Application!

I was devastated today when I pull out my HTC HD7, tab on the map application and proceed to look for directions to a famous eatery in Singapore only to realize that I have no way of doing that on my phone!!!! :’( This is pretty weird as stated here, this feature is very much available in WP7.

Googl-ing around,  I found out this possible solution here. Just to summarize the solution from the forum. This is what you need to do.

1. Tab on settings
2. Tab on region & language
3. Choose English (United Kingdom) from Region format, System locale and Browser & search language
4. Tab on “Tap here to accept changes and restart your phone”

Presto! you can now search for directions via the map application! Happy “mapping”~

Curreny7 Live on Windows Phone 7!

Technorati Tags: wp7,marketplace,currency convertor,application

 

 

Yippe!

I checked market place this evening and realized that my application has been published and available for download! Its a very simple application, just a straightforward currency convertor tool. Had this thought when I was travelling in Australia and realized that there are not many free currency convertor available in marketplace. Most of them come with a fee which sorts of irks me.

The thought of paying for free available information such as currency exchange rate really doesn’t make sense. Thus I decided to put in a couple of hours work and tada! Currency7 is born =) Most of my time was spend deciding how the splash screen would be. I really like the whole metro design philosophy the WP design team came up with. As far as branding is concern, would definitely try to make the application adhere to the design direction. Since metro is pretty focus on typography, I settled with playing around with words, the brand colours and the iconic “icon in a circle“ imagery.

Anyway, I really had great fun creating this app which also gives me the chance to experience first hand going through the application submission process. It wasn’t all smooth, but at least I manage to get pass a couple of huddles in the process. *my first submission was rejected as it failed the certification testing =( *

Anyway one looking for a free and decent looking currency convertor please give Currency7 a try. I will be updating it with more features in future releases =)

Thanks and enjoy! =)

WritableBitmap to MemoryStream to MediaLibrary

I was reading about the MediaLibrary API when I decided to put my reading to work. Nothing fancy, just take a screenshot of the application and save it to media library.

Take a look at this code

WriteableBitmap wb = new WriteableBitmap(image1, new TranslateTransform());
myFileStream = new MemoryStream();
wb.SaveJpeg(myFileStream, wb.PixelWidth, wb.PixelHeight, 0, 85);
myFileStream.Seek(0, SeekOrigin.Begin);
MediaLibrary library = new MediaLibrary();
Picture pic = library.SavePicture("SavedPicture.jpg", myFileStream);
myFileStream.Close();

Most importantly is this piece of code:

myFileStream.Seek(0, SeekOrigin.Begin);

if you do not do this before you save to MediaLibrary, an exception will be thrown with an error message that goes something like "value out of range"...

Another pointer is to disconnect the device from Zune when you run this piece of code. Otherwise you will get an exception saying "Unexpected error has occur".

Really hope MS do something about this whole Zune thingy. It can be quite troublesome when it comes down to debugging.

*Update: Use Windows Phone Connect Tool to debug instead, check this out*

Windows Phone 7 MAC address

As most of you would have known by now, there is no option available on the WP7 device which will expose the device's MAC address. It is really weird for MS to leave this feature out as some of us will need it to configure MAC filtering on our routers.

Anyway, I manage to get the MAC address of my HTC HD7 from my linksys wireless-G router. Thought I will just document the steps just in case someone else needs it.

1. Login to the router management console by entering 192.168.1.1 in your favorite web browser
2. Disable MAC address filtering on the router
3. Connect your WP7 device to the router
4. Click on Status from the menu bar then select Local Network from the submenu bar
5. Click on the button "DHCP Client Table"
6. Note down the MAC addresses listed in the table displayed in a popup window.
7. Close the window and click on "Wireless" from the menu bar
8. Click on "Wireless MAC Filter" from the submenu bar
9. Click on "Edit MAC Filter List" button
10. Do a cross reference check. The MAC address listed in the "DHCP Client Table" and not on the MAC filter list should be the MAC address of your WP7. (note: several mac address might show up on the DHCP Client Table which doesn't have a matching entry in the MAC Filter List if you are surrounded by wireless leeches around you ;) )
11. Enter the MAC address into the filter list and enable your mac address filtering.
12. Reconnect your WP7 device

Feel free to leave any comments if anyone has a better way of doing this on a linksys wireless-g router :)

P.S. hmm...I should seriously consider upgrading my router to a wireless n router hehe ;)