Silverlight Dynamic Layout and Triggers Transitions

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.