My First WPF Application

For a while now I’ve wanted to build a small application that would take a set of images and generate a set of previews, thumbnails and metadata xml ‘sidecar’ files that I could upload to my blog (I have a gallery viewing ASP.Net control that reads the directory structure and displays the gallery - and yes I have rendered image on the fly using an HTTP handler and GDI.Net in the past – but I prefer to upload my photo albums as pre-generated packages).  I figured this was a chance to crack the covers of my WPF book and build my first small WPF application.  I got there in the end – and I learned a LOT about WPF in the process.  I used the WPF SDK Photo Viewer Demo as a starting point. This was just enough to get me going with a ListBox control and some special formatting using control templates, but there was still a long way to go.  Here’s what I’ve learned from this relatively small exercise. 

1. WPF window controls have a minimum width and minimum height property. As silly as this may sound, it took me a few minutes before I realised these existed; however they were important since I wanted my XAML layout to be liquid with a fixed right hand panel and canvas, and an expandable listbox. Setting a minimum width prevented the liquid layout from shrinking too far (like a good'ol CSS liquid design).
2. I learned how to use the Grid, StackPanel, Canvas and DockPanel controls. You really have to crack these first before you can do anything useful in WPF – especially if you were expecting a fast start like Windows Forms will give you when it comes to dropping controls onto a form. Expression Blend helps – but I switched to XAML source to tweak the layout regularly. What’s more I could only get control events to ‘wire-up’ in my code behind files when I placed the event handler name in Expression Blend. Double clicking on the control in VS 2005 will not create the event handler in code for you. No doubt when Visual Studio Orcas is released this will change.
3. Watch out for BitmapEffects in a list – or on any other element that occupies a large area of the window (like GroupBox controls). Here’s a couple of good links on performance in WPF: Maximizing Performance in WPF and Optimizing WPF Application Performance and specific to the BitmapEffect -Bitmap Effects Overview. Bitmap Effects render in software and the delay in maximizing the window and scrolling the ListBox was dramatic when BitmapEffects were attached to the list and other large window controls.
4. Triggers in a ControlTemplate are awesome – but I wanted to apply a BorderBrush to a border that surrounded a ListBoxItem for the IsFocused trigger – and the Border control does not have a property trigger for IsFocused. Here’s how you do it from the ControlTemplate for the ListBoxItem:  <Trigger Property="IsFocused" Value="True">
   <Setter TargetName="ItemBorder" Property="Border.BorderBrush" Value="#FF8877BB"/>
   </Trigger>Once you’ve defined the triggers – you can set the property of any named control in the XAML control tree by setting the TargetName. It took me ages to work this out. I just named the Border that I’d placed around the template ‘ItemBorder’ and then set the trigger setter as followsJust to be clear, this is a trigger defined in the ControlTemplate for the ListBoxItem - but it is changing the property of another named control in the XAML mark-up; the Border control named ItemBorder. Way cool
5. When viewing Thumbnails – don’t use the Thumbnail property of the BitmapImage or BitmapSource – it may not be oriented the same way as the full image if you have rotated the image (depending on the software you’ve used to rotate the image). Instead use the DecodePixelWidth of the BitmapImage when you open the file and give it a decent size for thumbnails. I kept the Zoom feature of the SDK sample app – but modified it to give my ListItemControl template a rectangular shape. Having larger resolution thumbnails to back up the Zoom feature meant that this was now a useful method for selecting images without necessarily having to open a larger preview window.
6. The world of binding – I learned a lot about binding including binding property values of one control to the values of another (the Zoom effect). I also learned something very useful from this blog post on how to get the PlacementTarget for a context menu click from this entry… Binding ContextMenu to its logical Parent.
7. Although there’s a ton of glassy button effects out there – I found this link very helpful in getting an animated glassy effect for my apps buttons – Creating a Glass Button: The Complete Tutorial. A great intro to Storyboards and Animations.

And here’s the result..(click on the image for a larger version).