Here we will be learning about the Dynamic Layout Transitions in
Silverlight. Dynamic layout Transition is a very interesting topic. It brings
the concept of Fluid UI to Silverlight.
You could find out lots of stuff about Dynamic Layout Transitions on the internet . What I
have tried to do with this post is break down each key feature of the Fluid UI
Concept in Silverlight.
In this post I am going to discuss about the Transition Effect between states.
Please find the screenshots below:
We have two states, A and B as shown below:
Clicking on B would take us to the State, but with a cool transition effect; caught live below :
Finally the Transition is made and we reach State B. Clicking on A would
give us another Transition effect and we move to State A.
Now let's check out how we can achieve this.
First Step lets add a few References as shown below: These are Blend Dlls. As
we are going to use some Expression Blend SDK stuff here.
Make sure the following namespaces are added .
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
Let's get into the Visual State Manager.
In my VisualStateManager I have created two states as shown below:
State A:
<VisualTransition
From="StateA"
GeneratedDuration="0:0:1"
To="StateB">
<VisualTransition.GeneratedEasingFunction>
<CubicEase
EasingMode="EaseOut"/>
</VisualTransition.GeneratedEasingFunction>
<ei:ExtendedVisualStateManager.TransitionEffect>
<ee:SmoothSwirlGridTransitionEffect/>
</ei:ExtendedVisualStateManager.TransitionEffect>
</VisualTransition>
In the
State A I have used a
SmoothSwirlGridTransitionEffect
Transition Effect.
State B:
<VisualTransition
From="StateB"
GeneratedDuration="0:0:1"
To="StateA">
<VisualTransition.GeneratedEasingFunction>
<CubicEase
EasingMode="EaseOut"/>
</VisualTransition.GeneratedEasingFunction>
<ei:ExtendedVisualStateManager.TransitionEffect>
<ee:WaveTransitionEffect/>
</ei:ExtendedVisualStateManager.TransitionEffect>
</VisualTransition>
In the
state B I have used a
WaveTransitionEffect.
Once we have created our states, let's also add some animations to the states. These would add to the Transition Effects we have already defined for the states.
Let's define the Animations as shown below:
<VisualState
x:Name="StateA">
<Storyboard>
<ColorAnimation
Duration="0"
To="#FF5ED62F"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"Storyboard.TargetName="rectangle"/>
<DoubleAnimation
Duration="0"
To="0"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="textBlock"/>
</Storyboard>
</VisualState>
<VisualState
x:Name="StateB">
<Storyboard>
<ColorAnimation
Duration="0"
To="#FFCB2ED6"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
Storyboard.TargetName="rectangle"/>
<DoubleAnimation
Duration="0"
To="0"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="textBlock1"/>
</Storyboard>
</VisualState>
We are only half way through creating the Transition. We have added the
Animations to our States but we still need to add triggers which will actually trigger the transition.
Here we are going to add the Triggers to the Transitions and also a Slider
control which will control the Transition speed of the Transitions.
Let's start off by add the Triggers which will start up our Transitions when we
move from State A to State B and vice versa.
The State of the Application when the application is loaded is defined as below:
We use the GoToStateAction method which has the Property StateName which
signifies the State to be transitioned to.
<i:Interaction.Triggers>
<i:EventTrigger
EventName="Loaded">
<ei:GoToStateAction
StateName="StateB"
UseTransitions="False"/>
</i:EventTrigger>
</i:Interaction.Triggers>
When clicking Button A, we should transition from State B to A which is
achieved by the below code:
<Button
Content="State
A"
Margin="20,60,0,0"
FontFamily="Segoe
UI"
FontSize="32"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Width="150"
Height="150"
Background="White">
<i:Interaction.Triggers>
<i:EventTrigger
EventName="Click">
<ei:GoToStateAction
StateName="StateA"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
Notice the same GoToStateAction which triggers a transition to State A on the
Button Click Event.
<i:EventTrigger
EventName="Click">
<ei:GoToStateAction
StateName="StateA"/>
</i:EventTrigger>
A similar process is followed for Button B.
The code is shown below:
<Button
Content="State
A"
Margin="20,60,0,0"
FontFamily="Segoe
UI"
FontSize="32"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Width="150"
Height="150"
Background="White">
<i:Interaction.Triggers>
<i:EventTrigger
EventName="Click">
<ei:GoToStateAction
StateName="StateA"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
Now we are ready to run our application.
The Page loads with the State B.
Clicking on A would take us to State A with a transition .
The transition is caught live as shown in the above screenshot. And the Page now
moves to State A .
Adding the Slider to Control the Speed of the Transition:
Let's add a Slider which would control the speed of the Transition.
The XAML code for the Slider is shown below:
<Slider
x:Name="BehaviorSpeed"
HorizontalAlignment="Right"
Height="37"
Margin="0,14,8,0"
VerticalAlignment="Top"
Width="75"
Maximum="5"
Grid.Column="1"
Value="0.75"
Visibility="Visible"/>
And below is the Code Behind:
public MainPage()
{
InitializeComponent();
this.UpdateTransitionDuration();
this.BehaviorSpeed.ValueChanged +=
BehaviorSpeed_ValueChanged;
}
private void
BehaviorSpeed_ValueChanged(object sender,
RoutedPropertyChangedEventArgs<double>
e)
{
this.UpdateTransitionDuration();
}
private void
UpdateTransitionDuration()
{
Duration duration =
new Duration(TimeSpan.FromSeconds(this.BehaviorSpeed.Value));
foreach (VisualTransition
transition in this.States.Transitions)
{
transition.GeneratedDuration = duration;
}
}
Here is the code which gives us the access to the Visual State Manager
transitions and we are able to modify the Duration using transition.GeneratedDuration
foreach
(VisualTransition transition
in
this.States.Transitions)
{
transition.GeneratedDuration
= duration;
}
Now we are ready to use the Slider Control.
Run the application and move the Slider to increase or decrease the speed of the
Transition. Notice that keeping the Slider at 0 makes the Transition so fast,
the Transition is not visible at all.
In the next post we will discuss some other interesting Fluid UI Concepts in
Silverlight.