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!

Tags: , | Categories: Articles, Tutorials Posted by RTomlinson on 2/11/2011 11:02 PM | Comments (0)

Very simple one here, but one that may not seem completely obvious to those new to Silverlight.

The Scenario

A very common scenario in Silverlight is to databing the visibility of a control to a boolean value in your code. At first you may think you can just do inline binding as normal:

<Image Source="AnImage.png" Visibility="{Binding Accepted}" />

 

Today I was trying to do similar with a new project I'm working on. A StackExchange (StackOverflow family of sites) application for Windows Phone 7 that brings the popular family of sites to the mobile. In particular I was trying to indicate which answer in particular was the correct one. To do this I used the Image control (as above) to display a green tick icon, similar to that on the StackOverflow website and bind the Accepted property to controls it's visibility.

The Solution

Unfortunately the visibility property is of type System.Windows.Visibility. Therefore we need to implement IValueConverter to take our boolean property and convert that to System.Windows.Visibility. You can then add this IValueConverter implementation to your XAML as a resource and specify the converter as a part of the binding process in your XAML.

 

   1:      public class VisibilityConverter : IValueConverter
   2:      {
   3:          public object Convert(
   4:              object value,
   5:              Type targetType,
   6:              object parameter,
   7:              CultureInfo culture)
   8:          {
   9:              bool visibility = (bool)value;
  10:              return visibility ? Visibility.Visible : Visibility.Collapsed;
  11:          }
  12:   
  13:          public object ConvertBack(
  14:              object value,
  15:              Type targetType,
  16:              object parameter,
  17:              CultureInfo culture)
  18:          {
  19:              Visibility visibility = (Visibility)value;
  20:              return (visibility == Visibility.Visible);
  21:          }
  22:      }

 

And the XAML:

 

   1:  <helpers:VisibilityConverter x:Key="VisibilityConverter"></helpers:VisibilityConverter>

   1:  <Image Source="/Images/Icons/correct_answer.png" Visibility="{Binding Accepted, Converter={StaticResource VisibilityConverter}}"></Image>

 

Again it may seem a little obvious but I hope this comes in handy for those new to Silverlight databinding.