sdk/samples/WPFSamples/PathAnimationGallery/csharp/matrixanimationusingpathexample.xaml

   1 <!-- MatrixAnimationUsingPath.XAML
   2      This example shows how to use PathGeometry and MatrixAnimationUsingPath to animate along a path. -->
   3
   4 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   5   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   6   WindowTitle="MatrixAnimationUsingPath Example"
   7   Background="{StaticResource MyGridBrushResource}">
   8
   9
  10   <DockPanel Margin="20">
  11       <Border Background="#99FFFFFF" BorderBrush="#CCCCFF" BorderThickness="2"
  12         Margin="0,0,0,20" Padding="20" DockPanel.Dock="Top" >
  13         <TextBlock Width="750">
  14           This example animates an object (button) across the screen along a path. To do this, the Matrix value of the RenderTransform property is animated
  15           along a PathGeometry. MatrixAnimationUsingPath is used to animate the matrix value.
  16         </TextBlock>
  17       </Border>
  18
  19     <StackPanel DockPanel.Dock="Left">
  20     <Canvas HorizontalAlignment="Left" Width="340" Height="240" >
  21
  22       <!-- This Path is only to show the path that the animated object will follow. -->
  23       <Path VerticalAlignment="Top" Margin="15,15,15,15"
  24         Data="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
  25         Stroke="Black" StrokeThickness="2"
  26         Stretch="None" />
  27
  28       <!-- The Button that is animated across the screen. -->
  29         <Path Fill="Blue" Margin="0,0,15,15">
  30           <Path.Data>
  31             <RectangleGeometry  x:Name="MyAnimatedRectGeometry" Rect="0,0 30 30" />
  32           </Path.Data>
  33           <Path.RenderTransform>
  34             <MatrixTransform x:Name="myMatrixTransform">
  35               <MatrixTransform.Matrix >
  36                 <Matrix OffsetX="10" OffsetY="100"/>
  37               </MatrixTransform.Matrix>
  38             </MatrixTransform>
  39           </Path.RenderTransform>
  40         </Path>
  41     </Canvas>
  42
  43     <!-- Create a button to restart the animation. -->
  44     <Button Width="300" HorizontalAlignment="Left" >
  45       Start Animation
  46
  47       <!-- Trigger and StoryBoard to initiate the animation when the button is clicked. -->
  48       <Button.Triggers>
  49         <EventTrigger RoutedEvent="Button.Click">
  50           <BeginStoryboard>
  51             <Storyboard>
  52
  53               <!-- Animates the button along the path. -->
  54               <MatrixAnimationUsingPath
  55                 Storyboard.TargetName="myMatrixTransform"
  56                 Storyboard.TargetProperty="Matrix"
  57                 Duration="0:0:5"
  58                 RepeatBehavior="Forever" AutoReverse="True" >
  59                 <MatrixAnimationUsingPath.PathGeometry>
  60                   <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
  61                 </MatrixAnimationUsingPath.PathGeometry>
  62               </MatrixAnimationUsingPath>
  63             </Storyboard>
  64           </BeginStoryboard>
  65         </EventTrigger>
  66       </Button.Triggers>
  67     </Button>
  68
  69     <!-- This button starts an animation that follows the tangent
  70     of the path because DoesRotateWithTangent is set to "True".-->
  71     <Button Width="300" HorizontalAlignment="Left" >
  72       Start Animation with DoesRotateWithTangent="True"
  73
  74       <!-- Trigger and StoryBoard to initiate the animation when the button is clicked. -->
  75       <Button.Triggers>
  76         <EventTrigger RoutedEvent="Button.Click">
  77           <BeginStoryboard>
  78             <Storyboard>
  79
  80               <!-- Animates the button along the path following the tangent of the path. -->
  81               <MatrixAnimationUsingPath
  82                 Storyboard.TargetName="myMatrixTransform"
  83                 Storyboard.TargetProperty="Matrix"
  84                 DoesRotateWithTangent="True"
  85                 Duration="0:0:5"
  86                 RepeatBehavior="Forever" AutoReverse="True" >
  87                 <MatrixAnimationUsingPath.PathGeometry>
  88                   <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
  89                 </MatrixAnimationUsingPath.PathGeometry>
  90               </MatrixAnimationUsingPath>
  91             </Storyboard>
  92           </BeginStoryboard>
  93         </EventTrigger>
  94       </Button.Triggers>
  95     </Button>
  96
  97     </StackPanel>
  98
  99
 100       <!-- Displays functional code for demonstration. -->
 101         <Border Background="#EEEEEE" BorderBrush="Black" BorderThickness="1">
 102           <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
 103           <TextBlock Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
 104           ...
 105           &lt;!-- The Button that is animated across the screen. --&gt;
 106           &lt;Button Margin="-30,0,0,0" MinWidth="100"&gt;Click
 107             &lt;Button.RenderTransform&gt;
 108               &lt;MatrixTransform x:Name="myMatrixTransform"&gt;
 109                 &lt;MatrixTransform.Matrix &gt;
 110                   &lt;Matrix OffsetX="10" OffsetY="100"/&gt;
 111                 &lt;/MatrixTransform.Matrix&gt;
 112               &lt;/MatrixTransform&gt;
 113             &lt;/Button.RenderTransform&gt;
 114           &lt;/Button&gt;
 115           ...
 116             <Span Foreground="Green">&lt;!-- Animation with DoesRotateWithTangent set to false (default is false) --&gt;</Span>
 117             &lt;Storyboard>
 118                <Bold>&lt;MatrixAnimationUsingPath
 119                   Storyboard.TargetName="myMatrixTransform"
 120                   Storyboard.TargetProperty="Matrix"
 121                   Duration="0:0:5"
 122                   RepeatBehavior="Forever" AutoReverse="True" &gt;
 123                   &lt;MatrixAnimationUsingPath.PathGeometry&gt;
 124                     &lt;PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" /&gt;
 125                   &lt;/MatrixAnimationUsingPath.PathGeometry&gt;
 126                &lt;/MatrixAnimationUsingPath&gt;
 127                </Bold>
 128             &lt;/Storyboard&gt;
 129             ...
 130             <Span Foreground="Green">&lt;!-- Animation with DoesRotateWithTangent --&gt;</Span>
 131             &lt;Storyboard>
 132                <Bold>&lt;MatrixAnimationUsingPath
 133                   Storyboard.TargetName="myMatrixTransform"
 134                   Storyboard.TargetProperty="Matrix"
 135                   <Span Foreground="Red">DoesRotateWithTangent="True"</Span>
 136                   Duration="0:0:5"
 137                    RepeatBehavior="Forever" AutoReverse="True" &gt;
 138                   &lt;MatrixAnimationUsingPath.PathGeometry&gt;
 139                     &lt;PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" /&gt;
 140                   &lt;/MatrixAnimationUsingPath.PathGeometry&gt;
 141                &lt;/MatrixAnimationUsingPath&gt;
 142                </Bold>
 143             &lt;/Storyboard&gt;
 144           ...
 145           </TextBlock>
 146           </ScrollViewer>
 147         </Border>
 148     <!-- End of Display Canvas -->
 149
 150 </DockPanel>
 151 </Page>