Silverlight - Slide In Transition Effect

In this article we are going to see how we can create a Slide in Transition Effect using Visual State Manager.

We would be using few Blend Dlls . so make sure you have Blend 4 Sdk downloaded and installed from the Net.

Create a new Project and add reference to the Dlls as shown below :


Adding the Required Namespaces :

Make sure you add the following Namespaces in the xaml code .


Creating the Visual State Manager:

Below is the code for creating a Visual State Manager . Have created a VisualStateGroup . Have added two states namely Start and New.

In our case Start refers to the Initial State and New refers to the Modified State . Here I have created an example to demonstrate the Slide in Transition Effect.

   <!-- Visual State Created -->
<VisualStateGroup x:Name="PageTrans">
                    <VisualTransition GeneratedDuration="0:0:1">
                            <CubicEase EasingMode="EaseInOut"/>

                <VisualState x:Name="Start"/>

                <VisualState x:Name="New"/>


        <!-- Visual State End-->

Swapping between the Visual States:

bool state;  // A boolean variable

The following code will help us swap between the states . You can place the code in a Button Event Handler to visually make the effect appealing . I just place it in the Constructor of the MainPage.xaml.cs.

if (state = state ^ true)
         VisualStateManager.GoToState(this, "Start", true);

         VisualStateManager.GoToState(this, "New", true);

Go ahead and Modify the Color of the Grid in the MainPage to Black.

Run the code and experience the Slide In Transition Effect . The same effect can be created using the Blend instead of Visual Studio with much lesser effect. We will check that out in the Blend series .