The next step in the search app was to show the the detail image. Here is what it looks like.
Building this was pretty straight forward. Few things to call out…
- One of the interesting things was the fact that I had switched my grid view to use the thumbnail images but I really wanted to show the full size images in the detail view. Full size images are not downloaded yet. Since Silverlight uses Browser to download, when I show the grid view all the images shown in grid view are already downloaded and cached in browser cache but the full size images are not downloaded. I played around with some animations to show while full image is downloaded but since downloadcompleted event does not exist on image, it was kind of tricky to know when to start animation. Finally the approach I went with was to show the thumbnail image (that is already downloaded) to begin with and then switch the fullsize image when it is already downloaded. It also gives “Deep Zoom” like effect where sometime you can see image crystallize when fullsize image replaces the thumbnail version.
- The only reason why I exposed the SearchResult property on this control was because I wanted to use databinding but also needed to know when the DataContext changes. Since in SL2 there are not DataContext change notifications, I exposed the property and set the datacontext myself.
- One of the data points that I wanted to display in detail view was link to actual image. I used HyperlinkButton control so that user can click on it and new browser window opens up to show the image. I used TargetName property exposed on this control. I also ended up building another IValueConverter so that I can convert string into Uri.
- I needed to make changes to ImageGridView since I needed to know which items in the grid was selected.
This class converts string returned by search service into Uri so that I can databind hyperlinkbutton’s NavigateUri property to it.
Here is the xaml that describes the detailimage control. It shows Size in bytes, height/width in pixels, link to image that opens in new browser window and actual image.
Here is the code behind for this user control.
There are two borders in the XAML. One is to show the thumbnail image and other one is to show the full image. The only reason why I ended up doing that was because, in Beta1, I could not change the border’s child. When the fullsize image is downloaded completely. I make border that contains thumbnail collapased and make the border that contains fullsize image visible. I still see some flickers and should think about better way to do this.
To make the Detail view work, I needed to know which image was selected in the grid view.
- I have exposed the SelectedImage property. I hook up LeftMouseDown/Up and MouseLeave events for each of the borders around thumbnails to know which element was clicked on
- I also decided to implement INotifiyPropertyChanged for this property so that consumer can know when the selection changed. I could have done this using some custom event (SelectedItemChanged) but this way some other control could directly databind to this change notification.
Here is the new XAML for ImageGridView
Here is the new code behind for ImageGridView
To consume this control in the application, I needed to add it in Page.xaml. I added following line of XAML to the root grid in Page.Xaml.
Here are the changes to code
Here is the link to working project.