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
Create a new Project and add reference to the Dlls as shown below
the Required Namespaces :
Make sure you add the following Namespaces
in the xaml code .xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
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.
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
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 .