58bits - Tech

Just like Josh Smith I was looking around for some pre-rolled themes for WPF, and wondered why there was so little activity in this area. I would have thought the ability to take a professional looking UI (adjusted to match an organization's in-house style) would be a popular approach for building new business applications.

Although there's quite a bit of work involved in creating a complete set of control templates (for all the required controls; textboxes, dropdowns, checkboxes, tab controls, lists, splitters, scrollers etc.) it can  be done (and it's a great way to learn WPF - even if you only override a few). Included here is a screen shot from my 'learning' WPF application in which I created a nearly complete control template set from scratch - including a custom toolbar strip, and dropdown/context menu system. What's more I give the user some options on basic color themes and backgrounds - just like Windows Live Writer does.

Commercially available themes must surely be on the way. Maybe they're just waiting for WPF adoption to reach higher levels, or perhaps visual designer support to improve. I'd estimate that it would take about 20 person days to complete a full theme set - and that's with a good graphic designer working with a good WPF developer together to assemble the theme.

There just aren't enough hours are there. Have just about managed to cobble together an improved looking skin for dasBlog. Will re-write my image gallery component soon with URI templates and hackable search engine friendly URLs.

The application I use to package up my images for delivery is called Gallery Builder (original) - and it's my WPF learning exercise. A hand-rolled set of control templates produced not a bad looking UI. Would love to write an effects control for generating the gallery cover image. Alas there may not be enough hours...    (click the image on the left to enlarge).

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).