WPFBlog

I’m about to go down a path of posts by writing about several different WPF components which are going to be all part of the same application. For about a year now, I’ve had an idea for a desktop application I wanted to build and make available to photographers on the web. I knew from the beginning I wanted to do it in WPF because the user experience was going to be the main differentiator for this software. Problem was, I didn’t know more than a cursory amount of WPF. So, down the WPF deep dive learning hole I disappeared into for the past year and only in the past couple months has the big picture concepts in the learning curve finally started to materialize. “Aha!” moments signifying my understanding and not just comprehension of fundamental concepts and how to apply them (like dependency properties) have been happening regularly. Even though I know there’s still plenty to learn in WPF I feel I’m ready to start writing some code towards the application I’ve been architecting in my head (and sometimes on paper) for the past year beyond the occasional prototypes I’ve created here and there. I’m no graphic designer but I’ve got an eye for usability and I’ve taught myself how to use Blend and Expression Design so we’ll see how we go for user experience. Also, it’s been said the days of the one-man development shop are over because of the scope and complexity of technology nowaday’s. I’d like to prove WPF/WCF an enabler for quickly putting together viable consumer apps by a single man team. And while I’m doing that I’ll be sharing some of the code I use to illustrate how to achieve certain functionality in WPF. Why? Because the more eyes on the code, the better the quality, right?

Anyhow, let’s talk about where Zimba came from and what Zimba does at a high level.

Background

About a year ago on a long flight home I read this article in a magazine. As an amateur photographer and software architect, the idea of Zimba popped right in my head and I made a few diagrams on paper. When I got home I had my wife read the article and told her about my idea. She told me I should give it a go so here we are.

What does it do?

Zimba is a stock photo (and eventually media) e-commerce platform on your desktop. It’s a cross between Flickr, iTunes and a micro-stock site like Fotolia.

…but it’s a P2P desktop app.

In contrast to Flickr you don’t upload images to a website. In contrast to iTunes, there’s no central store server to run searches against. In contrast to a micro-stock website, you don’t have to upload 100 images and expect only a few of them to get accepted due to their quality control editors. Similar to Flickr, the online library will be community run and maintained. Similar to iTunes it’ll allow for flexible searches against the image library. Similar to a micro-stock site, it’ll allow for micro-transactions to facilitate stock photo purchases.

Yes, yes - I know I have a lot to consider and problems to solve but as I said, I’ve had a year to architect it and think through the problems.

So, here are the high level requirements:

Initial User List:

• Photographers wishing to sell stock photography.
• Stock photo purchasers.

Desktop Client Functionality:

• Ability to import media (photos), read metadata, create thumbnails, etc.
• Ability to manage keywords for media identification.
• Ability to view reports on the state of the community (how many images available, popular search keywords, etc)
• Ability to search network for keywords images, receive and preview images.
• Various E-commerce functions including account management.

More to come

So that’s the rough sketch of what I’ll be working on in my spare time. There’ll be plenty of code going on behind the scenes beyond the user experience but I’ll be as generous as I can with the WPF examples and share them here. Stay tuned and watch me turn an idea into a WPF desktop application.

Pavan Podila, a WPF Disciple who’s blog has taught me much posted an ItemSkimmingPanel late last year that mimics the thumbnail skimming enhancements made to Mac IPhoto and IMovie. He describes it like so:

“Recently Apple released their next version of iLife, which has some cool enhancements to iPhoto and iMovie. One specific enhancement called “skimming” was interesting from my project’s perspective. The idea is that when you scrub your mouse over an album, it skims through all the photos in that album. The same interaction applies when you scrub your mouse over a movie clip: it skims through all of its frames.”

and provides this video showing his panel in action:

He accomplishes this by creating a custom panel, handling MouseDown, MouseUp and MouseMove events to achieve the scrubbing effect and manipulating the z-order of the images to pop them up to the top of the stack when visible.

If you’ve been following my previous posts you know I tend to want to delegate as much of the visual responsibility to XAML as much as possible in an attempt to keep the code behind a place for data fetching , construction and consumption. So naturally it tends to follow I’d be thinking about a XAML only solution to Item Skimming and today I present a potential solution.

The idea is simple. Using the concept conceived for the Rotoscope Animations post, we already have a way to skim through images in an enumerable list bound to a styled ListBox. In the Rotoscope Animation post, we bound the ListBox’s SelectedIndex to an Int32Animation and plowed right through the list displaying each item in order. In an Item Skimming control, we want the SelectedIndex to be bound to the captured mouse movement when a user drags horizontally across the image.

So, should we open up our code-behind and start writing event handlers for Mouse events - Up, Down, Capture? Heck no! Isn’t there already a WPF control allowing a user to drag their mouse and change a value?

The Slider Control to the Rescue

The Slider control allows a user to drag across the track and change the slider’s value in the process. We can bind this value to the SelectedIndex and this will scroll through the images in our data bound list.

Two obstacles with this approach:

1. The Slider control is ugly.
2. We don’t want the user to drag across a Slider, we want them to drag across the Image

My solutions to the obstacles?

1. Make the Slider invisible - goodbye ugly.
2. Make the invisible slider cover the image so it still responds to and handles drag events unbeknownst to the user

We can accomplish both solutions by manipulating the control template of the Slider. What does that look like? Well lucky for us, Microsoft provided an example customization right here.

I simply cut-n-pasted that bad boy into my file, changed the Trackbar background to Transparent, set all the borders to Transparent and changed the SliderThumb to be as high as it’s container with a width of 1 pixel.

Like so:

Now in our window, we simply add a Slider to the Grid binding it’s value to the ListBox’s SelectedIndex:

And the code-behind simply loads jpg images from the “Pets” directory in my MyPictures folder and sets it to the Window’s DataContext. Note: If you download the code you’ll need to change this directory name value to a directory of jpgs on your machine before running.

All that’s needed to be done is to wrap this solution in a UserControl and re-use where appropriate. In a future post I’ll try to add the skimming context control which you can see in the latter half of Pavan’s video.

The current result can be seen here: (video coming soon)

and the source is available here.

Enjoy!