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 ;)

MVVMLight on WP7

Today, I am going to show you how to use the MVVMLight framework on the WP7.

For those who have not heard of MVVM, it is a recommended design pattern for Silverlight / WPF application development. I will not go in depth describing what the pattern is all about, instead this article provides a very comprehensive description on MVVM.

First and foremost, proceed to http://www.galasoft.ch/mvvm/getstarted/ to download and install the framework and the templates for Visual Studio

Once installed, launch Visual Studio and click on "New Project". From the ""New Project Window", select "Silverlight for Windows Phone" on the left. At this point you will notice a new template, "MvvmLight (WP7)" has been added.

Create a new Windows Phone 7 project with that template. Once created, your new project will look something like this

The template did most of the boilerplate code for you which wires up various part of the application with the framework. Let's take a closer look at what we have here.

First, you will notice that two folders have been added to the project; Model and ViewModel. Expanding the ViewModel folder will reveal the following files:

1. MainViewModel.cs
2. ViewModelLocator.cs

MainViewModel is our view model class and it is declared and instantiated in the ViewModelLocator class. The ViewModelLocator is included in the App.xaml as a resource.

With the ViewModelLocator configured as a resource, the MainViewModel is then binded to the application DataContext in MainPage.xaml like this

Now, lets take a step back and take a second look at the MainViewModel class. The MainViewModel class derived from the ViewModelBase class. This base class implements everyone’s favourite interface, the INotifyPropertyChanged interface which is very much needed for data binding.

Looking through the code further, you will notice that there are three fields in the class, ApplicationTitle, PageName and Welcome which are binded to the title text field of the application, the page name text field for the Application Page and also to a text field located within ContentGrid.

If you compile and run the application, you will get something like this:

As you can see, the MainViewModel class is playing its role as the model of the view by providing the view with the content required to be display to the user. Apart from just providing content, the MainViewModel class has another function, to handle user interaction and act upon it in an appropriate manner. In a non MVVM world, this kind of scenario is usually handled by a code-behind class which attached event listeners to UI components to response to user interaction. In MVVM however, we achieve this by using commands, bindings, and triggers in Silverlight.

First of all, add a button to ContentGrid

After that, add a field to MainViewModel which will return an instance of a Command class. Consider the following code fragment:

We modify the Welcome property to include a setter. When a new value is set, a property changed event will be raised which will inform all bindings of the new value. A new property which returns a new instance of RelayCommand<T> is then added. The idea is to bind the SayByeCommand to the newly added button. When a user taps on the button, the welcome text will be replaced with “Bye Bye!”.

Now that we have define our command, lets see how we can wire it up with our button. First we need to declare two additional namespaces in our MainPage.xaml.

After that, modify our button in xaml to look like this

What we have done here is use a trigger (in System.Windows.Interactivity) to execute our command, SayByeCommand whenever the button’s click event is raised (the user tabs on the button).

Let’s now run our app and test it out.

Lets click on the button to say “bye bye”

Voila! it works!

This is a very simple illustration of how we can use the MVVM design pattern to develop a WP7 application using the MVVMLight framework. This guide is not only applicable for WP7 development, but it can be use wholesale for Silverlight and WPF development as well.

Hopefully this proves to be useful for anyone who is looking to start out with MVVM and MVVMLight. :)

Foreword

I have been working on the Windows Phone 7 for a couple of months now and I must say that Microsoft has finally made a mark for themselves on the mobile front.

The platform is extremely developer friendly and having Silverlight and XNA as the main development platform, .Net developers will feel right at home almost immediately.

Although there are mentions on the web stating that the WP7 might have missed the golden era of mobile development but for now, I really beg to differ. The WP7 platform is really a solid development platform.

For those who are skeptical, I suggest you not to write it off the your list immediately, give it a chance and try it out, you might be surprise. For those who had already jumped on the bandwagon, keep rocking on the WP7! :)