Silverlight control that can play animations when the DataContext changes

For a while now I’ve wanted a control which when the DataContext changes plays an “out” animation, then changes the DataContext then plays an “in” animation.

This is a custom control which can detect changes to the DataContext and play these animations accordingly.

The control also exposes a DataContext changed event which you can use to add in extra functionality.

The usage of the control is very simple: It can take any content and it’s all templatable through Blend -> just edit the control template and start playing around with the Visual State Manager states. Cool huh?

Sample and Source

You can see the control in action for yourself here. It’s built against Silverlight 3.

<Sample Code>

Context Content Control Source

</Sample Code>

How it works

The control starts off by picking out its own DataContext binding and redirecting it to a new property called SpecialDataContext. This means that when the DataContext object is updated the control won’t immediately apply the change. This is important as you don’t want the new data to appear as the control is animating out. You want the change over to happen once the out animation is completed and before the in animation starts.

 BindingExpression exp = this.GetBindingExpression(DataContextProperty);

if (exp != null)
{
    Binding newBinding = new Binding(exp.ParentBinding.Path.Path);

    newBinding.Source = exp.DataItem;

    //Bind it to the special context property
    this.SetBinding(SpecialContextProperty, newBinding);

    this.DataContext = this.DataContext; //break the binding on datacontext (setting a property breaks binding)
}      

The code removes the binding from DataContext (but setting it to itself… this clears binding). Now the control is intercepting changes to data context.

Next, in OnApplyTemplate(), the control picks out the Visual State Storyboards from the template. This is so it can detect when the state transitions have completed.

The SpecialContextProperty dependency property is the “new” DataContext property. Changes are collected and pumped in to onDataContextChange where the code selects which state to transition to.

The most exciting state transition is “ContextChanging”. Once it is complete (handled in storyContextChanging_Completed) the control changes the DataContext and moves back to the NormalContext state.

Usage

Usage is very easy… just bind it’s datacontext and off you go. In the example available here the control is bound to the selected item in a list. Click items in the list will cause the control to switch between information which a cool animation.


        

    
	
	
	
    

Templates

There is a default template provided, but to create your own, go in to Blend, right click the control and edit its Control Template! It’s that easy. Set how the control looks in each state and enjoy 🙂

4 thoughts on “Silverlight control that can play animations when the DataContext changes

  1. Hi!

    This sounds about the same as an experimental control I wrote for the Silverlight Toolkit. It is these kinds of small controls that make life easier.
    Mine changes on the content change btw.

    Great,
    rj

  2. Hey Ruurd,

    Your content change control sounds great also, do you have a link to a sample?

    I too love little time savers like this. Integrated in to a larger project you can cut hours and hours out where you might normally write little user controls to do this same stuff.

    Cheers,

    Jordan.

  3. its in the Silverlight toolkit: silverlight.codeplex.com

    It’s experimental (meaning we will probably change it 🙂 ), we’d love feedback if these are useful.

    Cheers,
    rj

Comments are closed.