Silverlight Dynamic Layout and Triggers Transitions

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.