ContentTransition is an advanced content control that allow you to add interactive visual transition when a new object is assigned to the content of the control. 

With a total of 12 predefined transition effects to choose from, you can quickly create compelling user interface that animates as the content changes. ContentTransition includes basic transitions such as fading and sliding, as well as more sophisticated transitions such as zooming, flipping, and even a 3D cube.

Content Control

ContentTransition is inherited from ISContentControl, which means that it can contain a single object of any type (such as a string, an image, or a panel). For more information about this content model, see Content Model Overview.

Using ContentTransition

You use ContentTransition to provide visual transition when the Content of the control is changed. The transition is enabled by default and the default transition is set to Fading.

You can choose one of the TransitionEffect to apply to a ContentTransition control such as listed in the following:

• Fading
• SlideUp
• SlideDown
• SlideLeft
• SlideRight
• ZoomIn
• ZoomOut
• FlipLeft
• FlipRight
• FlipUp
• FlipDown
• Cube
• Direct
• Custom 

The following example shows how to setup a simple ContentTransition control with an Image in its content.

<Intersoft:ContentTransition>

    <Image Source="/ClientUIApplication_Docs;component/Assets/Images/dvdunesk.jpg" VerticalAlignment="Center" />

</Intersoft:ContentTransition>

You can explicitly disable the transition by setting the EnableTransition to false.

Perform Transition on Load

By default, the ContentTransition performs transition only when its content is changed in the runtime which does not apply to the initial content. In certain cases, you may want to apply the transition to the initial content when the ContentTransition is loaded. To achieve this, you set the PerformTransitionOnLoad property to true.

Customizing the Transition for Default and Startup

ContentTransition can automatically select the transition effect to use in certain scenarios. When the content of the control is changed, ContentTransition uses the transition defined in the DefaultTransition property.

If you encounter a scenario where you need to apply a different transition in the intial load, you can set the desired transition in the StartupTransition property. For this to work, you need to enable the transition on load feature such as described in previous section.

The following example shows how to configure the transition for the default and startup transition.

<Intersoft:ContentTransition StartupTransition="FlipLeft"
                             DefaultTransition="SlideUp">

    <Image Source="/ClientUIApplication_Docs;component/Assets/Images/dvdunesk.jpg" VerticalAlignment="Center" />

</Intersoft:ContentTransition>

Customizing the Transition Duration

You can also customize the duration of the transition if you prefer. By default, all transitions have a duration of 0.3 milliseconds.

To customize the transition duration, you set the TransitionDuration property to a number representing the time span in milliseconds measurement.

For the best user experience, particularly in business applications, it is recommended to use a duration of the range between 0.3 and 0.7ms.

Programmatically Setting the Content using Code

You use the SetContent method to set the content programmatically using code, such as shown in the following example.

private void UXButton_Click(object sender, RoutedEventArgs e)
{
    Image image = new Image();
    image.Source = new BitmapImage(
            new Uri("/ClientUIApplication_Docs;component/Assets/Images/ClientUIBg.jpg", UriKind.RelativeOrAbsolute));

    contentTransition1.SetContent(image);
}

Although you can set a new content through the Content property, using the SetContent method has several advantages over the Content property. For example, using SetContent method automatically removes the target element from its parent element and makes the target element visible if it was previously collapsed.

Setting the Content based on the ID of the Target Element

In addition to setting the content programatically using code, you can also set the new content based on its ID (Name). This technique is ideal for MVVM design pattern which provides a way to set the new content based on a string value without the need to establish a strong reference to the UI element.

To set the content based on an element's ID, you set the ContentID property to the name of the desired element, such as shown in the following example.

<Grid>

    <Intersoft:ContentTransition StartupTransition="FlipLeft"
                                 ContentID="PhotoImage"/>

    <Image x:Name="PhotoImage" Source="/ClientUIApplication_Docs;component/Assets/Images/dvdunesk.jpg" 
           VerticalAlignment="Center"/>
</Grid>

Handling Transition Events

ContentTransition provides two events that are raised when performing transition operation such as described in the following list:

• Transitioning. Occurs when the ContentTransition is about to transition the old content to the new content.
• TransitionCompleted. Occurs when the transition to the new content is completed.

The two events described above are routed events, which means the events can be handled from any nodes in the parent visual tree. To learn how to handle a routed event, see How to: Handle a Routed Event. To learn more about the routed event concept, see Routed Events Overview.

Customizing Transition Based on Navigation Direction

Beside the basic transitions that describes in previous section, ContentTransition also provides a more efficient way to manage the transitions. For example, you can configure ContentTransition to automatically select the transition to apply based on navigation direction. This feature is particularly useful in scenarios typically found in modern UI applications, for instances, perform a sliding transition when navigation backward or a flip effect when showing options, and many more.

To customize the transition based on navigation direction, you set the NavigationDirection property of the ContentTransition in code before you specify the new content. The value of the NavigationDirection property maps to the specific transition property such as described in the following table.

The following example shows how to setup the ContentTransition to automatically apply FlipUp transition which is specified in the BackTransition property when the NavigationDirection is set to Back.

<Intersoft:ContentTransition BackTransition="FlipUp">

    <Image Source="/ClientUIApplication_Docs;component/Assets/Images/dvdunesk.jpg" VerticalAlignment="Center" />

</Intersoft:ContentTransition>

private void UXButton_Click(object sender, RoutedEventArgs e)
{
    contentTransition1.NavigationDirection = Intersoft.Client.UI.Controls.TransitionContentDirection.Back;

    Image image = new Image();
    image.Source = new BitmapImage(
            new Uri("/ClientUIApplication_Docs;component/Assets/Images/ClientUIBg.jpg", UriKind.RelativeOrAbsolute));

    contentTransition1.SetContent(image);
}

Since the ContentTransition is a standalone content control, you are required to set the navigation direction manually to apply the effect differently. For navigation scenarios that use this feature automatically, please use UXFrame instance. For more information, see Navigation Overview.

Resolving Transition Conflict

In rare cases, you may run into situations where one or more transitions are overlapping each other. This scenario may occured when there's new content that is assigned before the current transition is completed.

ContentTransition provides built-in feature to resolve conflicting transition. You can set the ConflictAction property to one of the following values:

• QueueNextTransition
  The conflicting transition will be queued and hence applied when the current transition completes. This is the default value of the ConflictAction property.
   
• CancelCurrentTransition
  The conflicting transition causes the current transition to be stopped. Consequently, the conflicting transition becomes the current transition which is applied to the content immediately.
   

Transitioning Static Content

ContentTransition is generally a content control which performs transition when its Content property changes. This means that you need to assign a new content for the ContentTransition to run its transition. In certain cases, this may not be ideal when the new content is a complex object that takes time to recreate and render. Doing so may affect the smoothness of the animation while transitioning to the particular complex object.

To address the performance issue in such scenario, you may want to reuse the existing content and perform modification to the existing object, while being able to transition the previous and the next state of the content. This approach is called static content transition mechanism where the transition is performed on an existing content rather than a new content.

To enable the static transition mechanism, you set the IsStaticContent and the UseCachedVisualForTransition property of the control to true. Next, you call the PlayTransition method in the code and then pass-in the delegate to be called when the transition is performing.

The following code shows how to transition a GlassLabel control by animating its original state to a new state where the Background is set to Blue color.

<Grid x:Name="LayoutRoot">
        <StackPanel VerticalAlignment="Center">
            <Intersoft:ContentTransition x:Name="Transition1" Width="300" Height="100" 
                                         DefaultTransition="FlipUp"
                                         IsStaticContent="True"
                                         UseCachedVisualForTransition="True">
                <Intersoft:GlassLabel x:Name="GlassLabel1" Content="Welcome"/>
            </Intersoft:ContentTransition>
            <Intersoft:UXButton x:Name="ChangeButton" Content="Change Background" Margin="10" HorizontalAlignment="Center"
                            Click="ChangeButton_Click"/>
        </StackPanel>
</Grid>

private void ChangeButton_Click(object sender, RoutedEventArgs e)
        {
            Transition1.PlayTransition(
                () =>
                {
                    GlassLabel1.Background = new SolidColorBrush(Color.FromArgb(255, 35, 57, 102));
                });
        }

Creating Custom Transition

ContentTransition is built upon elegant architecture that allows you to extend the animation library with your custom transitions. To use custom transition, first you set the DefaultTransition to Custom, and then set the CustomDefaultTransition to the name of the custom visual state that you define. The same concept is also applied to transitions that based on navigation mode, which maps to CustomBackTransition, CustomForwardTransition, and CustomReplaceTransition respectively.

To learn more how to customize the control template and create a custom visual state, see Styles and Template Overview.

Samples and Walkthroughs

For the list of ClientUI walkthroughs, see Walkthroughs and How-to Topics.

For the list of ClientUI samples available in local installation, see Locating the Samples in Local Installation.