Developer Flotsam

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.

<ListBox x:Name="list" ItemsSource="{Binding Path=List}" ItemTemplate="{StaticResource DataTemplate1}" SelectedItem="{Binding Mode=TwoWay, Path=SelectedClass}" Grid.RowSpan="2"/>

<webjak:ContextContentControl DataContext="{Binding Path=SelectedClass}" Margin="8,8,0,0" VerticalAlignment="Stretch" Grid.Row="1" Height="174" Width="320" HorizontalAlignment="Stretch">
    <StackPanel>
	<TextBlock Text="{Binding Name}" Foreground="#FFFFFFFF" FontSize="18" FontFamily="Georgia"/>
	<TextBlock Text="{Binding Age}" Foreground="#FFFFFFFF" FontSize="18" FontFamily="Georgia"/>
	<TextBlock Text="{Binding Phone}" Foreground="#FFFFFFFF" FontSize="18" FontFamily="Georgia"/>
    </StackPanel>
</webjak:ContextContentControl>

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