SvFx 4.1 - Advanced Transition Control for Windows Phone

Author: Steve Li
Posted on: 06 Feb 2011

We already wrote about usage of the Transition Control in Silverlight applications. In this article we'll show how to use TransitionControl inside Windows Phone applications.

Each time when you need to use something more advanced then regular ContentControl, when you need to dynamically change any content on your page like text, images or any FrameworkElements, when you need to navigate through Pages and use animations for that - you need to use TransitionControl.

The following image shows TransitionControl inside Windows Phone application.

TransitionControl inside WinPhone application

Download Source

Let's see steps required to create such application:

First, we need to add 3 assembly references from the installation folder: Cellbi.SvCommon.dll, Cellbi.SvEffects.dll and Cellbi.SvTransitionControl.dll as shown below.

SvFx assembly references

Next we add new namespace prefix for the TransitionControl.

Transition Control namespace prefix

Place TransitionControl declaration into the ContentPanel (inside MainPage.xaml).

TransitionControl declaration

Now we can select animation type from the list of built-in patterns.

TransitionControl Animation Pattern

Now we can set TransitionControl's content. We'll use images, however it is possible to use any content.

TransitionControl can manage animation of text by symbols, words and lines using ready animation patterns.

Let's add code to change content on click.

Include new images into the project.

New Images in Project

Use the first image as a default content of the TransitionControl.

Content for TransitionControl

And add some code to manage content change on click.

The code for TransitionControl slide

We are done. You can use PatternType property to change animation type. There are for about 500 animation patterns and this will not require any changes in the code behind.

It is possible to add your own animation patterns into patterns gallery or change existing animation easily. Read more on this this in the previous article.

Posted in: SvFx
Blog Home...