This example shows how to configure the transition effects in ContentTransition.

Example

Description

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 The transition effect will appear when the content of the ContentTransition is changed.

The following code shows the content of ContentTransition will be changed every three second. The ContentTransition will be using default transition effect with 0.7 second as the TransitionDuration.

Code

XAML	Copy Code
<Grid x:Name="LayoutRoot"> <Intersoft:ContentTransition Height="200" HorizontalAlignment="Left" Name="contentTransition1" VerticalAlignment="Top" Width="200" TransitionDuration="0.7"> <Image Source="/ClientUIApplication1;component/Images/Application_and_Software_1.jpg"></Image> </Intersoft:ContentTransition> </Grid>

XAML

Copy Code

<Grid x:Name="LayoutRoot">
    <Intersoft:ContentTransition Height="200" HorizontalAlignment="Left" Name="contentTransition1" VerticalAlignment="Top" Width="200" TransitionDuration="0.7">
        <Image Source="/ClientUIApplication1;component/Images/Application_and_Software_1.jpg"></Image>
    </Intersoft:ContentTransition>
</Grid>

C#	Copy Code
public partial class Transition : UXPage { DispatcherTimer dt; private int CurrentIndex { get; set; } static readonly List<string> Images = new List<string>() { "Application_and_Software_1.jpg", "Application_and_Software_2.jpg", "Computer_programming_1.jpg", "Computer_programming_2.jpg", "Computer_science_1.jpg" }; public Transition() { dt = new DispatcherTimer(); CurrentIndex = 1; InitializeComponent(); //Define the event that will occur at timer tick dt.Tick += new EventHandler(ChangeImage); //Set the timer interval dt.Interval = TimeSpan.FromSeconds(3); //strat the timer dt.Start(); } void ChangeImage(object sender, EventArgs e) { Image newImage= new Image(); newImage.Source = new BitmapImage( new Uri("/ClientUIApplication1;component/Images/" + Images[CurrentIndex], UriKind.RelativeOrAbsolute)); contentTransition1.Content = newImage; if (CurrentIndex == 4) CurrentIndex = 0; else CurrentIndex++; } }

Copy Code

public partial class Transition : UXPage
{
    DispatcherTimer dt;
    private int CurrentIndex { get; set; }
    static readonly List<string> Images = new List<string>()
    {
        "Application_and_Software_1.jpg", "Application_and_Software_2.jpg", "Computer_programming_1.jpg", "Computer_programming_2.jpg", "Computer_science_1.jpg"
    };

    public Transition()
    {
        dt = new DispatcherTimer();
        CurrentIndex = 1;

        InitializeComponent();

        //Define the event that will occur at timer tick
        dt.Tick += new EventHandler(ChangeImage);
        //Set the timer interval
        dt.Interval = TimeSpan.FromSeconds(3);
        //strat the timer
        dt.Start();
    }

    void ChangeImage(object sender, EventArgs e)
    {
        Image newImage= new Image();
        newImage.Source = new BitmapImage(
            new Uri("/ClientUIApplication1;component/Images/" + Images[CurrentIndex], UriKind.RelativeOrAbsolute));

        contentTransition1.Content = newImage;

        if (CurrentIndex == 4)
            CurrentIndex = 0;
        else
            CurrentIndex++;
    }
}

Concepts

Content Model Overview

Other Resources

Locating the Samples in Local Installation

Walkthroughs and How-to Topics