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 :

Silverlight

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.


<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>

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

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 .

1 Comment

Join the conversation! Your thoughts help the community grow.

Patrick15y ago
This is great - I wasn't even aware of this nifty method of doing transitions. Question - is there any way to have the transition target just a sub-component of the page? It looks like the visual state group MUST be the first child of the element it animates. What I'm thinking of using it for is animating the transition between views in MVVM - any thoughts on how I'd use this to accomplish that? Even showing how this can be used to animate a SET of items would be all I need to get going but I simply can't penetrate the black box that is the ExtendedVisualStateManager.