PageTransitions
PageTransitions are used to render a transition between two views, for example in a Carousel or TransitioningContentControlThe duration must be set before the transition is used and must be greater than 0. If not, you will get an error.
The
CrossFade fades out the current view and fades in the new view by animating the opacity.XAML
C#
<CrossFade Duration="0:00:00.500" />
var transition = new CrossFade(TimeSpan.FromMilliseconds(500));
The
PageSlide slides the content either horizontally or vertically. You can specify the slide axis via the Orientation-property. The default value is Horizontal.XAML
C#
<PageSlide Duration="0:00:00.500" Orientation="Vertical" />
var transition = new PageSlide(TimeSpan.FromMilliseconds(500), PageSlide.SlideAxis.Vertical);
The
CompositePageTransition is used create a combined transition of several different transitions. The below sample creates a transition which slides the views diagonal (horizontally and vertically at the same time) and also fades the views out and in.XAML
C#
<CompositePageTransition>
<CrossFade Duration="0:00:00.500" />
<PageSlide Duration="0:00:00.500" Orientation="Horizontal" />
<PageSlide Duration="0:00:00.500" Orientation="Vertical" />
</CompositePageTransition>
var compositeTransition = new CompositePageTransition();
compositeTransition.PageTransitions.Add(new PageSlide(TimeSpan.FromMilliseconds(500), PageSlide.SlideAxis.Vertical));
compositeTransition.PageTransitions.Add(new PageSlide(TimeSpan.FromMilliseconds(500), PageSlide.SlideAxis.Horizontal));
compositeTransition.PageTransitions.Add(new CrossFade(TimeSpan.FromMilliseconds(500)));
You can also create your own
PageTransition by implementing the IPageTransition-interface.The Interface has one member which you need to implement:
public Task Start(Visual? from, Visual? to, bool forward, CancellationToken cancellationToken)
{
// Setup the transition here.
}
Below is a sample which will shrink the old view and grow the new view in vertically direction.
public class CustomTransition : IPageTransition
{
/// <summary>
/// Initializes a new instance of the <see cref="CustomTransition"/> class.
/// </summary>
public CustomTransition()
{
}
/// <summary>
/// Initializes a new instance of the <see cref="CustomTransition"/> class.
/// </summary>
/// <param name="duration">The duration of the animation.</param>
public CustomTransition(TimeSpan duration)
{
Duration = duration;
}
/// <summary>
/// Gets the duration of the animation.
/// </summary>
public TimeSpan Duration { get; set; }
public async Task Start(Visual from, Visual to, bool forward, CancellationToken cancellationToken)
{
if (cancellationToken.IsCancellationRequested)
{
return;
}
var tasks = new List<Task>();
var parent = GetVisualParent(from, to);
var scaleYProperty = ScaleTransform.ScaleYProperty;
if (from != null)
{
var animation = new Animation
{
FillMode = FillMode.Forward,
Children =
{
new KeyFrame
{
Setters = { new Setter { Property = scaleYProperty, Value = 1d } },
Cue = new Cue(0d)
},
new KeyFrame
{
Setters =
{
new Setter
{
Property = scaleYProperty,
Value = 0d
}
},
Cue = new Cue(1d)
}
},
Duration = Duration
};
tasks.Add(animation.RunAsync(from, null, cancellationToken));
}
if (to != null)
{
to.IsVisible = true;
var animation = new Animation
{
FillMode = FillMode.Forward,
Children =
{
new KeyFrame
{
Setters =
{
new Setter
{
Property = scaleYProperty,
Value = 0d
}
},
Cue = new Cue(0d)
},
new KeyFrame
{
Setters = { new Setter { Property = scaleYProperty, Value = 1d } },
Cue = new Cue(1d)
}
},
Duration = Duration
};
tasks.Add(animation.RunAsync(to, null, cancellationToken));
}
await Task.WhenAll(tasks);
if (from != null && !cancellationToken.IsCancellationRequested)
{
from.IsVisible = false;
}
}
/// <summary>
/// Gets the common visual parent of the two control.
/// </summary>
/// <param name="from">The from control.</param>
/// <param name="to">The to control.</param>
/// <returns>The common parent.</returns>
/// <exception cref="ArgumentException">
/// The two controls do not share a common parent.
/// </exception>
/// <remarks>
/// Any one of the parameters may be null, but not both.
/// </remarks>
private static IVisual GetVisualParent(IVisual? from, IVisual? to)
{
var p1 = (from ?? to)!.VisualParent;
var p2 = (to ?? from)!.VisualParent;
if (p1 != null && p2 != null && p1 != p2)
{
throw new ArgumentException("Controls for PageSlide must have same parent.");
}
return p1 ?? throw new InvalidOperationException("Cannot determine visual parent.");
}
}
Custom Transition Example
Last modified 8mo ago