Documentation
API Reference
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.
Build-In PageTransitions
CrossFade
The
CrossFade fades out the current view and fades in the new view by animating the opacity.XAML
C#
1
<CrossFade Duration="0:00:00.500" />
Copied!
1
var transition = new CrossFade(TimeSpan.FromMilliseconds(500));
Copied!
Source code
Reference
PageSlide
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#
1
<PageSlide Duration="0:00:00.500" Orientation="Vertical" />
Copied!
1
var transition = new PageSlide(TimeSpan.FromMilliseconds(500), PageSlide.SlideAxis.Vertical);
Copied!
Source code
Reference
CompositePageTransition
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#
1
<CompositePageTransition>
2
<CrossFade Duration="0:00:00.500" />
3
<PageSlide Duration="0:00:00.500" Orientation="Horizontal" />
4
<PageSlide Duration="0:00:00.500" Orientation="Vertical" />
5
</CompositePageTransition>
Copied!
1
var compositeTransition = new CompositePageTransition();
2
compositeTransition.PageTransitions.Add(new PageSlide(TimeSpan.FromMilliseconds(500), PageSlide.SlideAxis.Vertical));
3
compositeTransition.PageTransitions.Add(new PageSlide(TimeSpan.FromMilliseconds(500), PageSlide.SlideAxis.Horizontal));
4
compositeTransition.PageTransitions.Add(new CrossFade(TimeSpan.FromMilliseconds(500)));
Copied!
Source code
Reference
Custom PageTransitions
You can also create your own
PageTransition by implementing the IPageTransition-interface.The Interface has one member which you need to implement:
1
public Task Start(Visual? from, Visual? to, bool forward, CancellationToken cancellationToken)
2
{
3
// Setup the transition here.
4
}
Copied!
Example
Below is a sample which will shrink the old view and grow the new view in vertically direction.
1
public class CustomTransition : IPageTransition
2
{
3
/// <summary>
4
/// Initializes a new instance of the <see cref="CustomTransition"/> class.
5
/// </summary>
6
public CustomTransition()
7
{
8
}
9
10
/// <summary>
11
/// Initializes a new instance of the <see cref="CustomTransition"/> class.
12
/// </summary>
13
/// <param name="duration">The duration of the animation.</param>
14
public CustomTransition(TimeSpan duration)
15
{
16
Duration = duration;
17
}
18
19
/// <summary>
20
/// Gets the duration of the animation.
21
/// </summary>
22
public TimeSpan Duration { get; set; }
23
24
public async Task Start(Visual from, Visual to, bool forward, CancellationToken cancellationToken)
25
{
26
if (cancellationToken.IsCancellationRequested)
27
{
28
return;
29
}
30
31
var tasks = new List<Task>();
32
var parent = GetVisualParent(from, to);
33
var scaleYProperty = ScaleTransform.ScaleYProperty;
34
35
if (from != null)
36
{
37
var animation = new Animation
38
{
39
FillMode = FillMode.Forward,
40
Children =
41
{
42
new KeyFrame
43
{
44
Setters = { new Setter { Property = scaleYProperty, Value = 1d } },
45
Cue = new Cue(0d)
46
},
47
new KeyFrame
48
{
49
Setters =
50
{
51
new Setter
52
{
53
Property = scaleYProperty,
54
Value = 0d
55
}
56
},
57
Cue = new Cue(1d)
58
}
59
},
60
Duration = Duration
61
};
62
tasks.Add(animation.RunAsync(from, null, cancellationToken));
63
}
64
65
if (to != null)
66
{
67
to.IsVisible = true;
68
var animation = new Animation
69
{
70
FillMode = FillMode.Forward,
71
Children =
72
{
73
new KeyFrame
74
{
75
Setters =
76
{
77
new Setter
78
{
79
Property = scaleYProperty,
80
Value = 0d
81
}
82
},
83
Cue = new Cue(0d)
84
},
85
new KeyFrame
86
{
87
Setters = { new Setter { Property = scaleYProperty, Value = 1d } },
88
Cue = new Cue(1d)
89
}
90
},
91
Duration = Duration
92
};
93
tasks.Add(animation.RunAsync(to, null, cancellationToken));
94
}
95
96
await Task.WhenAll(tasks);
97
98
if (from != null && !cancellationToken.IsCancellationRequested)
99
{
100
from.IsVisible = false;
101
}
102
}
103
104
/// <summary>
105
/// Gets the common visual parent of the two control.
106
/// </summary>
107
/// <param name="from">The from control.</param>
108
/// <param name="to">The to control.</param>
109
/// <returns>The common parent.</returns>
110
/// <exception cref="ArgumentException">
111
/// The two controls do not share a common parent.
112
/// </exception>
113
/// <remarks>
114
/// Any one of the parameters may be null, but not both.
115
/// </remarks>
116
private static IVisual GetVisualParent(IVisual? from, IVisual? to)
117
{
118
var p1 = (from ?? to)!.VisualParent;
119
var p2 = (to ?? from)!.VisualParent;
120
121
if (p1 != null && p2 != null && p1 != p2)
122
{
123
throw new ArgumentException("Controls for PageSlide must have same parent.");
124
}
125
126
return p1 ?? throw new InvalidOperationException("Cannot determine visual parent.");
127
}
128
}
Copied!
Custom Transition Example
Source code
Reference
Last modified 2mo ago
Export as PDF
Copy link
Edit on GitHub