.Net Technical Blog

The idea behind the animation is to inform the users of the new items that were added to the ItemsControl. The new items will fly into the screen from left and right.

Let’s take an existing example from here by Tim Heuer:
Twitter Search Monitor

The ItemsControl in the example consists of a DataTemplate defined in a resource.

Let’s check the following original code snippet from Search.xaml:

If we examine the ItemsControl, we can see that it has a reference to a SearchResultsTemplate Resource. This DataTemplate Resource is defined in the SearchPage. To interact with the items, we need to copy this DataTemplate to a new UserControl.

Now we want to change the reference to the DataTemplate in the Page.Resources to our own UserControl (TwitterItem) in Search.xaml:

We can now add some Storyboards to our TwitterItem.xaml:

And we can start the animation in code when our ItemsControl is creating the Items:

public TwitterItem()
        {
            // Required to initialize variables
            InitializeComponent();

            // Global variable to see how many items we already have. Alternate the animation.
            if (((App)App.Current).ItemsCount % 2 == 0)
                FlyLeftToRight.Begin();
            else
                FlyRightToLeft.Begin();
            ((App)App.Current).ItemsCount++;
        }

Here is the final version with some User Interface tweaks. When you search for an item, new items will fade in from left to right and right to left. The application will look up new items each 15 seconds.

TwitterSearchMonitor Animated Source (Visual Studio 2010)

If you’re getting a page not found error, click here to view the application.