Share via

TRANSITION AND REVEAL: NEW CUSTOM CONTROLS FOR WPF, UPDATED AVALON FEATURE FEST

  • Article

Kevin Moore very quietly released a new bag o' tricks that has two of the coolest controls for WPF that I've seen in awhile: transition and reveal. 

Transition is gnarly: it provides the infrastructure to create a visual transition between any two visuals in WPF.  These visuals could be controls, vector graphics, images, 3D or, really,  anything.  What is nice is that the architecture of the control is extensible, such that you can define a new transition quite easily.  There are a bunch of built in transitions, both 2D and 3D. Many of the 2D transitions are modeled after the stock transitions available in Windows Movie Maker.  (Some, like Rotate Wipe, remind me of the transitions in Star Wars, A New Hope.)  The 3D ones are quite nice and include cloth, page, doors and explode.

Reveal is also quite powerful.  Rather than a transition, it provides animation to reveal something -- anything -- in WPF.  This isn't just an opacity fade but rather a directional unveiling. For example, when clicking a treeview item, imagine the item animating in view instead of just appearing. 

Both of these controls are the kind of control that allows for people to write "better" UI, in the sense of UI that doesn't just slap the user around, but gracefully moves the user from state to state. Reminds me of the tagline that has been used in association with WPF: "build the UI of your dreams."

With the importance of using custom controls to create beautiful UI in mind, I implemented these controls in a new version of the Avalon Feature Fest.  You can run it here (beware it is a 16mb download because of the video.) and download the source here. It is a great overview of WPF when giving a presentation and trying to explain what, in fact, WPF is.  As such, I added a new section called Custom Controls, where I show off Transition, Reveal and Zap Scroller.  The point being: WPF allows you to build incredibly powerful control above and beyond the controls "in the box".  The other point: other people are starting to build these controls and the ecosystem will start to thrive with great controls.  In fact, at MIX, there were a number of companies announcing just that.  And, knowing Kevin, expect more goodies to continue to end up in his bag o' tricks.

Here's some screenshots from the transition control of good old limecat in the middle of a 3D cloth transition:

Comments

  • Anonymous
    May 08, 2007
    Hello, Thank you for the sample, but it appears that it does not compile, two dependencies are missing (Reveal and WPFSamplesLib) Cheers, Axel

  • Anonymous
    May 09, 2007
    Doh!  Thanks, Axel.  I just reposted the code and included the WPFSamplesLib project, which also has the Reveal project.

  • Anonymous
    May 09, 2007
    The comment has been removed

  • Anonymous
    May 09, 2007
    No cats were harmed in the making of this demo. :)

  • Anonymous
    May 11, 2007
    Thank you for updating the project. The WPSSamplesLib project is now referenced in the solution, but the actual code is still missing from the zip file :-) Thanks, Axel

  • Anonymous
    May 14, 2007
    Axel: thanks for your patience through my blunders.  Third time's a charm; project source should now be included.

  • Anonymous
    May 18, 2007
    Hi, is there a pre-compiled app that I can use to easily see these effects? Thanks!

  • Anonymous
    May 18, 2007
    Ask and ye shall receive: run it here: http://wpf.netfx3.com/direct/avalonfeaturefest/publish.htm