Panorama Animation

[Ian]

Hi there,

As part of my app, I have a page with a standard panorama control showing details of a single movie. One of the panorama items contains a standard listbox showing other movie titles available. By tapping on one of the items in the listbox, the data displayed in the rest of the panorama changes to reflect the new movie they tapped on. 

To ensure that the panorama returns to the first item when they select a new movie, I set: this.MoviePanorama.DefaultItem = this.MoviePanorama.Items[0];

This is called when the user taps on the new listbox item and has the effect of moving the panorama back to the start.

So far, this is all working fine.  However, I would like to make this more effective by adding a continuum animation. Therefore, when a user selects a movie in the listbox, the movie title animates out before the first panorama item is displayed again.  If possible, this could go further and have the new title animating in to the textblock displayed on the first panorama item.

Firstly, do you think this is possible? Secondly, could you provide me any guidance on how to achieve this? I've looked at a few examples in the page transitions project and examples project, but I'm not getting any luck so far in getting this working.

Many thanks
Ian

[Todor]

Hello Ian,

Please, accept my apologies for the delayed answer. If I understand your scenario right, then you need one animation for your ListBox and another for the TextBlock on the PanoramaItem. I suggest that first you replace your ListBox with our RadDataBoundListBox since it has better behavior with RadAnimation. Here you can see how to add it to your project in case you experience any difficulties.
Now let's create the animations.
First on the SelectionChanged event of the DataBoundListBox with the movies, you should create the animation for the selectedItem. The animation causes the ListBox to disappear so we apply the reversed animation on the list and on the selectedItem as well so we have them back the next time you need them. And finally we add an animation for the TextBlock on your first PanoramaItem. Here is how you can do it:

private void moviesListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            //here you change the information on the rest of the panorama to reflect the new movie

            //now the first animation
            RadContinuumAnimation outAnimation = new RadContinuumAnimation();
            outAnimation.InOutAnimationMode = Telerik.Windows.Controls.Animation.InOutAnimationMode.Out;

            //assuming moviesListBox is the name of your DataBoundListBox with the movies
            this.moviesListBox.SetValue(RadContinuumAnimation.ContinuumElementProperty,
                          this.moviesListBox.GetContainerForItem(this.moviesListBox.SelectedItem));

            RadAnimationManager.Play(this.moviesListBox, outAnimation);

            outAnimation.Ended += new EventHandler<EventArgs>(outAnimation_Ended);
        }

        void outAnimation_Ended(object sender, EventArgs e)
        {
            this.MoviePanorama.DefaultItem = this.MoviePanorama.Items[0];

            //now we reverse the animation so your ListBox appear again
            RadDataBoundListBoxItem container = this.moviesListBox.GetContainerForItem(this.moviesListBox.SelectedItem) as
                     RadDataBoundListBoxItem;

            RadContinuumAnimation outAnimationReverse = new RadContinuumAnimation();
            outAnimationReverse.InOutAnimationMode = Telerik.Windows.Controls.Animation.InOutAnimationMode.In;
            this.moviesListBox.SetValue(RadContinuumAnimation.ContinuumElementProperty,
                    this.moviesListBox.GetContainerForItem(this.moviesListBox.SelectedItem));

            RadAnimationManager.Play(this.moviesListBox, outAnimationReverse);
            RadAnimationManager.Play(container, outAnimationReverse);

            outAnimationReverse.Ended += new EventHandler<EventArgs>(outAnimationReverse_Ended);
        }

        void outAnimationReverse_Ended(object sender, EventArgs e)
        {
            //and finally the animation for your movie title
            RadSlideContinuumAnimation inAnimation = new RadSlideContinuumAnimation();
            inAnimation.InOutAnimationMode = Telerik.Windows.Controls.Animation.InOutAnimationMode.In;

            //assuming that panoramaItem1 is your first PanoramaItem and movieTitle is your TextBlock that you want to animate
            this.panoramaItem1.SetValue(RadSlideContinuumAnimation.ApplicationHeaderElementProperty, this.movieTitle);
            RadAnimationManager.Play(this.panoramaItem1, inAnimation);
        }

I hope this will help you. If you need additional assistance, don't hesitate to write us back.

Kind regards,
Todor
the Telerik team

[Ian]

Hi Todor,

Thank you for getting back to me... it was certainly worth the few days wait! The code you have posted works perfectly.

Thanks very much for the very detailed code examples that meet my requirements perfectly. As always, I'm really impressed with Telerik support.

Regards
Ian