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 .