Expression Blend and Design

The team blog of the Expression Blend and Design products.

Inside Amir's and Peter's Flickr Browser sample - Part 1

Inside Amir's and Peter's Flickr Browser sample - Part 1

  • Comments 2
Have you checked out Amir's and Peter's Flickr Browser sample yet? This post has a reminder of how to get your own API key so that the sample can run and then it digs into some of the theory of how the sample works.

The sample connects to the
Flickr Web Service and for this it needs a valid API key. These are free of charge once you've signed up to Flickr. So the first thing you need to do is visit http://www.flickr.com/signup and trade some details in exchange for your credentials. Once you're signed in just visit http://www.flickr.com/services/api/key.gne and get your free API key and then simply paste that key into the file called FlickrKey.txt which you'll find in the bin\Release folder. Now run FlickrBrowsrCh9.exe and you're all set.

The list box of thumbnails on the left-hand side of the application's UI has two important features. The first feature is that, when an item is selected, it seems to step forward and stand in front of its neighboring siblings (it comes to the front of what is called 'z-order' which is the order along a line from the screen to the eye: the z-axis). The second feature is that the items animate smoothly to new layout positions instead of abruptly jumping there.

The z-order feature is achieved with a panel (i.e. a container) class called WrapPanelZ which Peter Blois authored. WrapPanelZ is a specialized version of the WrapPanel which is part of the Windows Presentation Foundation (WPF). What I mean by specialized is that a new class was written which inherits all the functionality of the standard WPF WrapPanel and either retains or replaces that functionality as appropriate. When the standard WrapPanel is queried for the visual elements which constitute its items, it returns them in order from first to last and this is the order in which they are drawn to the screen. So if there is any overlapping of visual elements, the ones drawn latest are drawn topmost. In order for the selected item to be drawn topmost, the visual elements must be returned in a different order, with the selected one (the one which is scaled up when selected) returned last. This is what WrapPanelZ does by overriding the GetVisualChild method. You can download the
source code for WrapPanelZ from Peter's blog [1].

The smooth animation, which happens when the layout of the items changes, is achieved by placing each item inside a specialized ContentControl, called SmoothMove, also authored by Blois. ContentControl is not a panel, it's a control with a Content property of type object (the most abstract CLR type). This means that, even though a ContentControl may have only one child for its content, the content may be any single object whatsoever. If the content is a container such as a panel or an items control then the content is effectively the root of an element tree. This flexible design means that you can wrap each of a container's items inside a specialized ContentControl with the smarts to detect when it is being moved to a different layout location and to smoothly animate there. As the ContentControl animates, it naturally takes its content (i.e. the item) with it. The SmoothMove class inherits from ContentControl, handles UIElement's LayoutUpdated event, and then animates its own RenderTransform in that handler. You can also download the
source code for SmoothMove from Peter's blog [2].

[1]
http://blois.us/blog/2005/12/stupid-listbox-tricks.html
[2] http://blois.us/blog/2005/10/i-was-very-impressed-by-some-of-small.html

Leave a Comment
  • Please add 6 and 2 and type the answer here:
  • Post
  • The mechanics of the custom classes which provide smarts to the Flickr Browser sample were described...
  • Please please please PLEASE tell me that "SmoothMove" will also be used in Vista in Windows Explorer!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Page 1 of 1 (2 items)