This example shows how to configure the transition effects based on NavigationDirection 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 of the ContentTransition will appear when the content is changed. The effect is based on NavigationDirection and TransitionDuration property.

The following code shows the content of ContentTransition will be changed every three second with Back as the NavigationDirection value and 1 second as the TransitionDuration effect.

Code

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

XAML

Copy Code

<Grid x:Name="LayoutRoot">
    <Intersoft:ContentTransition Height="200" HorizontalAlignment="Left" Name="contentTransition1" VerticalAlignment="Top" Width="200" TransitionDuration="1" NavigationDirection="Back">
        <Image Source="/ClientUIApplication1;component/Images/Application_and_Software_1.jpg" Margin="5"></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.Margin = new Thickness(5,5,5,5); 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.Margin = new Thickness(5,5,5,5);
        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