Tags: , | Categories: Articles, Tutorials Posted by RTomlinson on 2/22/2011 10:26 PM | Comments (0)

This is the first in the series of WP7 tips that I picked up whilst developing StackO for Windows Phone 7. I have to say, that I am no Silverlight (or WP7) expert and there may be better ways to do certain things from what I write about in these posts, and if there are then I’d love to here them, so please leave comments. Hopefully, some of these tips will help you along a little quicker in getting your apps to market.

The TheNounProject.com is an absolutely excellent resource for iconography. Their mission is to:

"sharing, celebrating and enhancing the world's visual language".

There are over 500 icons there that fit perfectly with the metro style that the WP7 adopts providing visual metaphors to use throughout your application, absolutely free.

These icons are downloaded as SVG’s and the WP7 ApplicationBar will only accept PNG images. In addition, you will most probably want these images to be themable.

WP7 theming is pretty clever. If you use a PNG icon that has a transparent background and the image itself is completely white. Then if the dark theme is used your image will remain white, however, if you switch to the light theme then the image is changed automatically to black. This tutorial details the steps to take the SVG’s from TheNounProject and convert them to theme aware icons for WP7.

Firstly, choose an appropriate image. For StackO, I used the “Eye” icon. blackeye

Download the icon to somewhere local on your machine.

Next you need to download and install ImageMagick. Again, there might be other ways to do this but this was the first solution I found.

Open up a Command Prompt and navigate to the location of your SVG you downloaded. We are going to use the convert tool from ImageMagick to do the conversion, set the background to transparent, fill the image with white and resize it to 48px (the recommended image size for ApplicationIcons).

Use the following command:

convert -background none -fill white -resize 48 noun_project_388_1.svg whiteeye_42.png

image

The output is exactly what we want.eye_white_42

Try it out. Add it to your project and set the IconUrl to the PNG. Now if you go into your WP7 Settings and change the theme from dark to light you will see that the icon is changed for you. Brilliant!

Tags: , | Categories: Articles Posted by RTomlinson on 2/20/2011 2:55 AM | Comments (0)


UPDATE: For support and feedback go to http://stacko.uservoice.com


Background to the app

I started, about a week ago, messing around with Silverlight for Windows Phone 7, having no experience with Silverlight what-so-ever. After having my HTC HD7 for almost a month now I wanted a project to start on that would give me exposure to the WP7 platform. The reason for this is twofold. Firstly, the mobile development market is absolutely flying at the minute (not surprising given that the mobile market has already taken over the PC market in sales) and I don’t want to be left behind, having spent the last 4 years developing for the web. Secondly, my main focus this year is on new learning. Not that I’m not learning constantly, as developers do pretty much every day, but learning outside my remit at work and away from the web.

I spend a lot of time on the StackExchange family of sites and StackOveflow in particular. I even browsed the Stackoverflow site for common issues and requests to come up with an idea. After a little research I realised that Stackoverflow itself had an API and so did the other StackExchange family of sites. Then I came across a post by lfoust showing some screenshots of a mockup for a StackExchange client for WP7 and discovered that he had actually implemented a superb C# API wrapper for StackExchange.

I set out developing an app using the mockups displayed on this post.

What does it do?

The apps main features are:

  • Browse latest Voted, Featured and Hot questions
  • Browse top users by Reputation and Latest users
  • Search for Questions
  • Search for Users
  • View questions and answers, including associated tags and view, vote and score counts.
  • View user information and achievements
  • Watch questions and add/remove them from your watched list

What does it look like?

StackO-HomeStackO-BrowserStackO-QuestionsStackO-QuestionItemStackO-UsersStackO-UserInfo

 

What I learned?

The learning curve for this project was quite steep, having originally only limited exposure to Silverlight and the Windows Mobile 7 platform in particular. A lot went into the development of this app and below is a summary of the main learning outcomes:

  • The WP7 ecosystem: Windows Mobile 7 is a superb platform to develop on and Microsoft have done a great job in supplying some exceptional tools to develop with. That said there are a lot of controls missing and a lot of things that I don’t like. One example in particular is the WP7 Marketplace is still not great when it comes to categorizing apps and searching them. That said, people have to remember that it is still very early days for WP7 and Microsoft have a lot of resource going into improving it. Things will improve and these days Mircrosoft are getting really good at listening to consumer feedback and community driven development.
  • MVVM: As with any new development it is very easy to just want to “knock something up”. I spent a lot of time doing the research so that I didn’t just do that. That mind set usually results in huge problems and a monolothic application. Separation of concerns and reducing coupling is very important and in doing so the results are a more solid app.
    If you’re going to do any Silvelight/WPF development you need to have a good understanding of MVVM. There are frameworks out there such as MVVM Light but I decided to go with a simple implementation without the help of an MVVM framework. The cons of this (to which I found out) is that I had to do a lot of the wiring up myself, that I’m sure the framework would have provided me.
  • Databinding: The databinding model in Silverlight is immense. It’s very powerful and works great with MVVM. Once you master databinding you will understand the benefits of IValueConverter and the ability to manipulate data whilst databinding to your controls.

Conclusion

StackO (the very well-thought out name Smile) is far from complete. There are lots of features I would like to continue to develop and improve. I want a lot of that to come from the community. I intentionally left out a lot of features in the hope that they will be requested. If you have a Windows Phone 7 device I would really appreciate you downloading it and giving it a go and providing any feedback you can (good or bad). It’s completely FREE!