Okoboji: a lake, a mythical university, Kevin Moore's blog : PDC05

PDC: demos, posters, pictures

okoboji — Sun, 18 Sep 2005 23:31:00 GMT

I got back yesterday from the PDC. It was a great trip. As promised, I’m posting the demo code for my talk.

This zip contains each stage of my ColorPicker demo:
0) A simple UserControl that uses standard CLR properties and INotifyPropertyChanged
1) A conversion of 0) to use DependencyProperty and Binding
2) A conversion of 1) to be a Control with a simple template
2.1-2.3) Examples of different custom templates.

Same control, different templates.

As I mentioned in my talk, make sure you check out the SDK for guidelines for building stylable controls and more information about external control libraries with embedded default styles (written by Robby and me respectively).

Robby and I had fun designing our team t-shirt and poster. If you're looking for a cool desktop (or if you want to print your own poster) I've included a big PNG and a PDF (I will have to work to post an XPS or my team will probably hunt me down.)

Here’s (most of) the team after the last presentation. We had a great time.

Custom Panel: TreeMapPanel

okoboji — Thu, 15 Sep 2005 21:03:00 GMT

TreeMaps have been all the rage. I figured it would be cool to see how easy it would be to build such a thing in WPF.

It turns out that getting started in pretty easy. There are a number of implementations of TreeMaps around. I found a Java one that looked like a good place to start. After a bunch of editing and debugging I had an algorithm that worked pretty well. The trick was fitting it into the Panel paradigm in WPF.

The model for Panels in WPF is attached properties. You drop in a bunch of children and then you assign Panel-specific properties. Canvas: Left and Top. Grid: Column and Row. DockPanel: Dock. Pretty simple.

For TreeMapPanel the obvious property to expose was Area. A TreeMap will lay out its children so that they fill the space and their respective areas stay proportionate. That's what I did with my panel. The only thing left was to throw some data at it. Similar to my FolderPicker demo, I created a data object to generate a directory and file structure.

NOTE: I hard-wired a path in Data.cs. Make sure you change it to a directory that actually exists on your computer. You may also want to pick a shallow directory (without many nested sub-directories.) My default style makes heavy use of Viewbox which gets expensive when they are nested.

Props to my friends at UMD for the starting spot. Make sure if you reuse my code you stay compliant with their original license.

Building a folder picker in WPF

okoboji — Wed, 14 Sep 2005 22:36:00 GMT

The last time I blogged about TreeView, I was still using the control I personally implemented. Now that WPF actually has a TreeView, lets talk about how to use it.

The first thing you’ll notice is that the API for what we shipped is pretty identical to what I blogged. (Guess who wrote the spec for WPF TreeView.) Thankfully I had a brilliant developer that implemented the tough stuff like selection and keyboard navigation.

You may notice that TreeView seems to be missing things you’ve grown to expect: explicit support for checkboxes and images. This was not an oversight. We felt that it was actually limited to provide these features explicitly when it’s so easy to add them directly. It’s the same reason Button in WPF doesn’t have Text, Image, TextAlign, ImageAlign properties. Button has a Content property that can be anything. Put in your own Panel with your own elements. We don’t need to hardwire them for you.

So enough background. What are we building?

Three things to look at:

1) Data.cs
You’ll notice a couple of classes: LocalDrives and SelectableDirectory. Both implement INotifyPropertyChanged. Both expose a bunch of properties. If you dig into SelectableDirectory, you’ll notice a bunch of wiring to handle and propagate changes to IsSelected. If a nested directory becomes selected the change bubbles up the directory hierarchy through recursive listeners to PropertyChanged events. These allow each level of the tree to maintain the ChildSelection property for SelectableDirectory and SelectedDirectories collection for SelectableDirectory and LocalDrives.

Important thing here: These classes are purely data. There are no references to UI concepts. Just logic to instantiate data structures against the file system and properties and events to the data structures in sync.

2) Window1.xaml
A couple things here. First, the ObjectDataProvider in the resources section. This maps to the LocalDrives object we defined in Data.cs. Second, take a look at the UI. A TreeView and a ListBox in a Grid (which is in a ViewBox). The Grid has a DataContext defined that points to the ObjectDataProvider. The TreeView is bound to the Drives property. The ListBox is bound to the SelectedDirectories property. (They both inherit the LocalDrives DataContext defined in Grid.)

Notice that both Drives and SelectedDirectories are collections of SelectableDirectory. By default, both TreeView and ListBox would just display these items by wrapping them in a TextBlock and with the result of ToString() as the Text. Instead, you see that both define an ItemTemplate. Where are these ItemTemplates defined? Take a look at MyApp.xaml.

3) MyApp.xaml
There are a bunch of entries in the Resources section of MyApp.xaml. First, two DataTemplates.

The first of the DataTemplates is for the ListBox and it’s pretty straight forward. It’s defined for SelectableDirectory and simply contains a TextBlock that binds to the Path property of SelectableDirectory. No rocket science here.

The second of the DataTemplates is for the TreeView. This is a special DataTemplate--a HierarchialDataTemplate. I first discussed HDT in May. I’m doing pretty much the same thing here, but this time I get a bit more sophisticated. Besides having a TextBlock bound to the Name property, I also create a CheckBox is bound to the IsSelectedProperty. The rest of the magic happens in the Triggers Section. I set up Triggers to change the FontStyle and FontWeight of the TextBlock to reflect the ChildSelection of each directory. I also use a Trigger to swap out the Template used to draw the icon Control.

Why is this all cool?
First, completely separated business logic and UI. My code handles all of the state for my directories and drives without worrying about the UI implementation. You could have thrown the data layer over the fence as a DLL to a designer and she could have developed the UI.

Second, you don’t need checkbox or image support in TreeView. You want two checkboxes? Cool. You want three images? Fine. Want to change their orientation? No problem. Build what you want, use our controls, stay away from OnRender/OnPaint/OwnerDraw.

Sound good?

4 days till the PDC. Are you excited?

okoboji — Sat, 10 Sep 2005 07:21:00 GMT

I had my final dry-run for my talk today: PRS431 Custom Controls in WPF. If you have a free slot on Friday at 10:30, stop by. Room 402.

Part of the preparation for the PDC is uploading our slide decks to a common share so that they get down to LA and get on the presentation machines. When I uploaded my deck I couldn’t help but take a look through the scores of PPT files from other presenters.

We are showing a lot of amazing technology. Microsoft is a big company. There are amazing new features for products I didn’t know we were even working on. I was blown away just reading slide bullets. PDC could be three weeks long and you couldn’t consume all of the technology. It’s impressive.

FYI: my manager has started blogging. To quote her first post, Namita has “worked on various technologies in the platform including Property engine, databinding, styling, templating, commanding and controls.”

She’s an expert on a lot of technologies in WPF. Check out her blog and check out her talk on Thursday.

I’ll be posting samples for the PDC build all next week--some really exciting stuff I’ve been holding on to for a while.
Stay tuned and if you’re going to the PDC, stop by the Presentation Lounge in LA and say hi.