/
IsCumulativeExample.xaml
105 lines (98 loc) · 4.62 KB
/
IsCumulativeExample.xaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!-- IsCumulativeExample.xaml
This example shows how to use the IsCumulative property to accumlate the values being animated over repeat cycles -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="AnimationTiming.IsCumulativeExample"
WindowTitle="IsCumulative Example">
<StackPanel Margin="20" Background="{StaticResource MyGridBrushResource}" >
<Border>
<TextBlock Margin="20">
This example shows how to use the IsCumulative property to make an animation build upon each iteration. The rectangles below are animated
by DoubleAnimations with identical durations, target values, AutoReverse, and RepeatBehavior but one has the IsCumulative property set to True while the
other does not.
</TextBlock>
</Border>
<!-- TextBlock displays animation code to user for IsCumulative set to "True". -->
<TextBlock Margin="10,0,0,0" xml:space="preserve">
<DoubleAnimation ... <TextBlock FontWeight="Bold">IsCumulative="True"</TextBlock>
Duration="0:0:1" From="100" By="100" RepeatBehavior="4x" AutoReverse="True" />
</TextBlock>
<!-- This rectangle is animated with IsCumulative set to "True". -->
<Rectangle Name="withIsCumulative"
Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />
<!-- Measuring Stick -->
<Path Stroke="Black" StrokeThickness="2"
Data="M 12,0 L 112,0" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 112,0 L 112,8" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 112,-9 L 212,-9" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 212,-9 L 212,0" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 212,-9 L 312,-9" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 312,-9 L 312,0" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 312,-9 L 412,-9" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 412,-9 L 412,0" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 412,-9 L 512,-9" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 512,-9 L 512,0" />
<!-- End of Measuring Stick -->
<!-- TextBlock displays animation code to user for IsCumulative set to "False". -->
<TextBlock Margin="10,0,0,0" xml:space="preserve">
<DoubleAnimation ... <TextBlock FontWeight="Bold">IsCumulative="False"</TextBlock>
Duration="0:0:1" From="100" By="100" RepeatBehavior="4x" AutoReverse="True" />
</TextBlock>
<!-- This rectangle is animated with IsCumulative set to "False". -->
<Rectangle Name="withoutIsCumulative"
Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />
<!-- Measuring Stick -->
<Path Stroke="Black" StrokeThickness="2"
Data="M 12,0 L 112,0" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 112,0 L 112,8" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 112,-9 L 212,-9" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 212,-9 L 212,0" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 212,-9 L 312,-9" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 312,-9 L 312,0" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 312,-9 L 412,-9" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 412,-9 L 412,0" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 412,-9 L 512,-9" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 512,-9 L 512,0" />
<!-- End of Measuring Stick -->
<!-- Create a button to restart the animations. -->
<Button Margin="0,30,0,0" HorizontalAlignment="Left">
Restart Animations
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<!-- Animation with IsCumulative set to "True". -->
<DoubleAnimation
Storyboard.TargetName="withIsCumulative"
Storyboard.TargetProperty="(Rectangle.Width)"
Duration="0:0:1" From="100" By="100" IsCumulative="True" RepeatBehavior="4x" AutoReverse="True" />
<!-- Animation with IsCumulative set to "False". -->
<DoubleAnimation
Storyboard.TargetName="withoutIsCumulative"
Storyboard.TargetProperty="(Rectangle.Width)"
Duration="0:0:1" From="100" By="100" IsCumulative="False" RepeatBehavior="4x" AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>