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> |
|
| 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++; } } |
|