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 .

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"

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 -->
<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="PageTrans">

<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:1">
<ei:ExtendedVisualStateManager.TransitionEffect>
<ee:SlideInTransitionEffect/>
</ei:ExtendedVisualStateManager.TransitionEffect>
<VisualTransition.GeneratedEasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>

<VisualState x:Name="Start"/>

<VisualState x:Name="New"/>
</VisualStateGroup>

</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>

<!-- 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);
}

else
{
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 .