The Importance of the “Experimental” Transitioning Content Control
The TransitioningContentControl
, developed by Ruurd Boeke, is one of the few Silverlight controls striving for what I am calling “data-driven animation.” You can load content from a database—let’s say an Observable Collection of data—, display one item from this Collection in the TransitioningContentControl
and then transition to the next item in the Collection—to be displayed in the TransitioningContentControl
. This transition is, by default, a story-board animation. Awe… some!
Workflow…
- Compose a “previz” storyboard in a separate file (I open a XAML-only file in Expression Blend among my “packed XAML” samples in my Silverlight BiggestBox).
- Edit a copy of the
TransitioningContentControl
style in the actual layout. - Add a new, named
VisualState
to theVisualStateGroup x:Name="PresentationStates"
in the Template setter of your copy of theTransitioningContentControl
style. - Set the
Setter Property="Transition"
value to the name of thisVisualState
in theTransitioningContentControl
style. - When the transition is triggered, ensure that it does not trigger again during the transition. This will cause an exception. Use the
TransitionCompleted
event in a strategy to avoid this exception.
Composing the “previz” storyboard is the first time in my Microsoft developer life that a business need demands the use of storyboard composition (within the Expression Blend 4 timeframe of course).
Now some critiques…
- You should not need to use a style to customize the transition animation. This should not be the only way of customizing the transition.
- Silverlight, animation-based behaviors, like the
FluidMoveBehavior
should be pluggable/Blendable into the control. - No MSDN documentation (still considered “experimental”?).
Beyond the Transitioning Content Control?
Expression Blend Architect Kenny Young suggested years ago that Behaviors allow developers to avoid resorting to building storyboards by hand for relatively simple animations. Animating the event when an item is added/removed to/from a ListBox
should be considered a ‘simple’ animation. A Behavior should handle this.
The Transitioning Content Control does not support behaviors out of the box. In fact, to customize the animations that come with this control requires knowledge of “templating” and building storyboards. This would explain to me why this control might still be considered “experimental.”
So I tried for several days to avoid using this control by trying several techniques based on Behaviors. These are some of my findings:
- The
FluidMoveBehavior
can be configured to animateSelf
orChildren
. I have been unable to get the expected results fromFluidMoveBehavior
in ‘self-mode’… There is an old sample marked “Download AppliesTo: Self Example” by Microsoft’s Kirupa Chinnathambi that showsSelf
working for Silverlight 3—however, when I upgrade the sample to Silverlight 4 it stops working! By the way, where the hell is Kenny Young? - One workaround that should deal with this
FluidMoveBehavior
in ‘self-mode’ issue involves using anItemsControl
that is meant to only hold one item. ThenItemsControl.ItemsPanel
can hold this behavior in its template. I tried this without success (but was probably confused with drowsy, late-night frustration).
Related Links
- “Animated Visual State Transitions with the Transitioning Content Control [Jesse Liberty]”
- “Using the FluidMove Behavior—Page 4”
- “ItemsControl.Items must not be a UIElement type when an ItemTemplate is set.” This error came to me from trying to bind the currently selected item of a
ListBox
to aUserControl
(which inheritsUIElement
). - “
InitialTag
Specify the tag that this element will appear to come from. Select Element for a stand-alone scenario. SelectDataContext
for a data-bound scenario. TheFluidMoveBehavior
action will attempt to locate an element that has been previously tagged with the same data using aFluidMoveSetTagBehavior
action.” [MSDN]