Prism - MVVM - Silverlight gotcha's

This is an extension to my previous blog where I showed my first application using Prism and Silverlight. As for this article, I just want to share the "gotcha's" I learned through a slightly more complex and a real-world (ish) application.

See the entire source code here and when you run it use the cryptic password 'a' in the login screen!! Also, if you do not see the images load in the 'Ratings By Album' screen, change the SiteName property in the Image class to the appropriate localhost link. To get a better understanding of the code, I believe it’ll help if you go through the previous article in my blog.

Firstly, the login screen, the password field is actually a textbox with a special font. The reason I took this path is because the PasswordBox.Password cannot be bound to a property as it does not have a corresponding DependencyProperty. Read more here. I bumped into this article where in you can set the font to a password font (yea.. it masks your characters.. cool huh?) and you get the desired effect.

Secondly, if you have a collection of something in your model class, use ObservableCollection<> instead of List<> type. In my model class, there is a property called ‘AlbumRatings’ of the type ObservableCollection<RatingsByAlbum>. When the user chooses an album and clicks on the Show Image Rating button, data is pulled from a web service and the xml result populates the AlbumRatings collection. Initially when this was set to List<>, changes made to the AlbumRatings would not be recognized and the UI did not show the images. But once I changed it to an ObservableCollection, viola, the changes made to the property showed up instantly.. it was like Magic!

Thirdly, you can use the . (dot) operator to traverse through your model’s properties. In the Metrics.xaml file, look at the chart control. I have set the items source for the chart as ‘Overall.ScoreCounts’. The other place I found the use of this was to bind the click event to a command object. When the user clicks the Show Album Rating button, I need to bind to the SelectCommand property of the ServiceViewModel. I could simply do:

   1:  <Button x:Name="SelectButton" Grid.Row="0" Grid.Column="1" Height="25"

   2:          Content="Show Image Rating" Width="130"

   3:          commands:Click.Command="{Binding DataContext.SelectCommand, ElementName=LayoutRoot}"

   4:          commands:Click.CommandParameter="{Binding SelectedItem, ElementName=AlbumsList}"/>

This goes all the way up to the LayoutRoot’s DataContext and traverses down the path to find the SelectCommand object. In case you’re wondering, look at the code-behind file of the xaml page and you’ll see that the page’s DataContext has been set to viewModel (in fact that’s the only ‘coupling’ between the UI and the ViewModel). This feature is called Property Path and is quite useful in many situations.

Lastly, just a friendly note: There are a few images in the source code. I request you not to use them outside this application.