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 .

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.