sdk/samples/WPFSamples/SamplesGallery/csharp/samps/interpolationmethods_samp.xaml

   1 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   2       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   3       Title="Interpolation Methods"
   4       Name="myRootElement"
   5       x:Class="InterpolationMethods.Page1"
   6       Loaded="checkLang">
   7
   8 <TabControl MinHeight="500" MaxHeight="700" MinWidth="400">
   9         <TabItem Style="{StaticResource TabStyle}" Header="Interpolation Methods Sample" IsSelected="true">
  10           <StackPanel>
  11             <TextBlock Style="{StaticResource HeaderStyle}">Interpolation Methods Sample</TextBlock>
  12
  13             <TextBlock Style="{StaticResource mainContentStyle}">This example demonstrates different methods of moving between two keyframes in an animation.</TextBlock>
  14
  15           </StackPanel>
  16         </TabItem>
  17
  18         <TabItem Name="xaml" Style="{StaticResource TabStyle}" Header="XAML">
  19  <ScrollViewer>
  20
  21           <TextBlock Name="xamlCheck" Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
  22 <![CDATA[<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" Margin="20">
  23     <Canvas Width="600" Height="300">
  24
  25       <!-- Mark the key frame points for illustrative purposes. -->
  26       <Rectangle
  27         Style="{StaticResource MyMarkerRectangleStyle}"
  28         Canvas.Left="10" Canvas.Top="50" />
  29       <TextBlock Canvas.Left="10">Starting Value</TextBlock>
  30
  31       <Rectangle
  32         Style="{StaticResource MyMarkerRectangleStyle}"
  33         Canvas.Left="500" Canvas.Top="50" />
  34
  35       <TextBlock Canvas.Left="500">1. Value = 500 <LineBreak /> KeyTime = 0:0:7</TextBlock>
  36       <Rectangle Style="{StaticResource MyMarkerRectangleStyle}"
  37         Canvas.Left="200" Canvas.Top="50"/>
  38       <TextBlock Canvas.Left="200">2. Value = 200 <LineBreak /> KeyTime = 0:0:10</TextBlock>
  39       <Rectangle Style="{StaticResource MyMarkerRectangleStyle}"
  40         Canvas.Left="350" Canvas.Top="50" />
  41       <TextBlock Canvas.Left="350">3. Value = 350 <LineBreak /> KeyTime = 0:0:15</TextBlock>
  42
  43
  44       <!-- This rectangle is animated using a key frame animation
  45            with linear interpolation. -->
  46       <Rectangle Name="linearKeyFrameRectangle"
  47         Canvas.Top="50"
  48         Canvas.Left="10"
  49         Height="50"
  50         Width="50"
  51         Stroke="Black"
  52         StrokeThickness="5">
  53         <Rectangle.Fill>
  54           <SolidColorBrush Color="Blue" Opacity="0.4" />
  55         </Rectangle.Fill>
  56       </Rectangle>
  57
  58       <!-- This rectangle is animated using a key frame animation
  59            with splined interpolation. -->
  60       <Rectangle Name="splineKeyFrameRectangle"
  61         Canvas.Top="110"
  62         Canvas.Left="10"
  63         Height="50"
  64         Width="50"
  65         Stroke="Black"
  66         StrokeThickness="5">
  67         <Rectangle.Fill>
  68           <SolidColorBrush Color="Purple" Opacity="0.4" />
  69           </Rectangle.Fill>
  70       </Rectangle>
  71
  72       <!-- This rectangle is animated using a key frame animation
  73            with discrete interpolation. -->
  74       <Rectangle Name="discreteKeyFrameRectangle"
  75         Canvas.Top="170"
  76         Canvas.Left="10"
  77         Height="50"
  78         Width="50"
  79         Stroke="Black"
  80         StrokeThickness="5">
  81         <Rectangle.Fill>
  82           <SolidColorBrush Color="Lime" Opacity="0.4" />
  83         </Rectangle.Fill>
  84       </Rectangle>
  85
  86       <!-- This rectangle is animated using a key frame animation
  87            with a combination of interpolation methods. -->
  88       <Rectangle Name="combinationKeyFrameRectangle"
  89         Canvas.Top="230"
  90         Canvas.Left="10"
  91         Height="50"
  92         Width="50"
  93         Stroke="Black"
  94         StrokeThickness="5">
  95         <Rectangle.Fill>
  96           <SolidColorBrush Color="Orange" Opacity="0.4" />
  97         </Rectangle.Fill>
  98       </Rectangle>
  99
 100
 101
 102
 103     </Canvas>
 104
 105
 106
 107     <!-- These buttons are used to restart, pause, resume, and stop the animations. -->
 108     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
 109       <StackPanel.Triggers>
 110         <EventTrigger SourceName="restartButton"
 111           RoutedEvent="Button.Click">
 112           <BeginStoryboard Name="myBeginStoryboard">
 113             <Storyboard>
 114               <!-- Animates the position of a Rectangle from a base value of 10
 115                   to 500, 200, and then 350 using linear interpolation. -->
 116               <DoubleAnimationUsingKeyFrames
 117                 Storyboard.TargetName="linearKeyFrameRectangle" Storyboard.TargetProperty="(Canvas.Left)"
 118                 Duration="0:0:15" FillBehavior="HoldEnd">
 119                 <DoubleAnimationUsingKeyFrames.KeyFrames>
 120                   <LinearDoubleKeyFrame Value="500" KeyTime="0:0:7" />
 121                   <LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
 122                   <LinearDoubleKeyFrame Value="350" KeyTime="0:0:15" />
 123                 </DoubleAnimationUsingKeyFrames.KeyFrames>
 124               </DoubleAnimationUsingKeyFrames>
 125
 126               <!-- Animates the position of a Rectangle from a base value of 10
 127                    to 500, 200, and then 350 using splined interpolation. -->
 128               <DoubleAnimationUsingKeyFrames Storyboard.TargetName="splineKeyFrameRectangle" Storyboard.TargetProperty="(Canvas.Left)"
 129                 Duration="0:0:15" FillBehavior="HoldEnd">
 130                 <DoubleAnimationUsingKeyFrames.KeyFrames>
 131                   <SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.25,0.5 0.75,1" /><!--IB: was 7.5-->
 132                   <SplineDoubleKeyFrame Value="200" KeyTime="0:0:10"  KeySpline="0.25,0.5 0.75,1" />
 133                   <SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  KeySpline="0.25,0.5 0.75,1" />
 134                 </DoubleAnimationUsingKeyFrames.KeyFrames>
 135               </DoubleAnimationUsingKeyFrames>
 136
 137               <!-- Animates the position of a Rectangle from a base value of 10
 138                    to 500, 200, and then 350 using discrete interpolation. -->
 139               <DoubleAnimationUsingKeyFrames Storyboard.TargetName="discreteKeyFrameRectangle" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:15" FillBehavior="HoldEnd">
 140                 <DoubleAnimationUsingKeyFrames.KeyFrames>
 141                   <DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
 142                   <DiscreteDoubleKeyFrame Value="200" KeyTime="0:0:10" />
 143                   <DiscreteDoubleKeyFrame Value="350" KeyTime="0:0:15" />
 144                 </DoubleAnimationUsingKeyFrames.KeyFrames>
 145               </DoubleAnimationUsingKeyFrames>
 146
 147               <!-- Animates the position of a Rectangle from a base value of 10
 148                    to 500, 200, and then 350 using a variety of interpolation methods. -->
 149               <DoubleAnimationUsingKeyFrames
 150                 Storyboard.TargetName="combinationKeyFrameRectangle"
 151                 Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:15" FillBehavior="HoldEnd">
 152                 <DoubleAnimationUsingKeyFrames.KeyFrames>
 153                   <DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
 154                   <LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
 155                   <SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  KeySpline="0.25,0.5 0.75,1" />
 156                 </DoubleAnimationUsingKeyFrames.KeyFrames>
 157               </DoubleAnimationUsingKeyFrames>
 158
 159             </Storyboard>
 160           </BeginStoryboard>
 161         </EventTrigger>
 162
 163         <EventTrigger
 164           SourceName="pauseButton"
 165           RoutedEvent="Button.Click">
 166           <PauseStoryboard BeginStoryboardName="myBeginStoryboard"  />
 167         </EventTrigger>
 168         <EventTrigger
 169           SourceName="resumeButton"
 170           RoutedEvent="Button.Click">
 171           <ResumeStoryboard BeginStoryboardName="myBeginStoryboard"  />
 172         </EventTrigger>
 173         <EventTrigger
 174           SourceName="skipToEndButton"
 175           RoutedEvent="Button.Click">
 176           <SkipStoryboardToFill BeginStoryboardName="myBeginStoryboard"  />
 177         </EventTrigger>
 178         <EventTrigger
 179           SourceName="stopButton"
 180           RoutedEvent="Button.Click">
 181           <StopStoryboard BeginStoryboardName="myBeginStoryboard"  />
 182         </EventTrigger>
 183       </StackPanel.Triggers>
 184
 185       <Button Name="restartButton">Restart</Button>
 186       <Button Name="pauseButton">Pause</Button>
 187       <Button Name="resumeButton">Resume</Button>
 188       <Button Name="skipToEndButton">Skip To End</Button>
 189       <Button Name="stopButton">Stop</Button>
 190     </StackPanel>
 191 </StackPanel>]]>
 192
 193           </TextBlock>
 194 </ScrollViewer>
 195         </TabItem>
 196         <TabItem Name="xamlcsharp" Style="{StaticResource TabStyle}" Header="XAML + C#">
 197           <TabControl TabStripPlacement="Right">
 198             <TabItem Name="xcsharpCheck" Style="{StaticResource TabStyle2}" Header="XAML"></TabItem>
 199             <TabItem Style="{StaticResource TabStyle2}" Header="C#"></TabItem>
 200           </TabControl>
 201         </TabItem>
 202
 203         <TabItem Name="xamlvb" Style="{StaticResource TabStyle}" Header="XAML + Visual Basic.NET">
 204           <TabControl TabStripPlacement="Right">
 205             <TabItem Name="xvbCheck" Style="{StaticResource TabStyle2}" Header="XAML"></TabItem>
 206             <TabItem Style="{StaticResource TabStyle2}" Header="VB.NET"></TabItem>
 207           </TabControl>
 208         </TabItem>
 209
 210         <TabItem Name="csharp" Style="{StaticResource TabStyle}" Header="C#"></TabItem>
 211
 212         <TabItem Name="vb" Style="{StaticResource TabStyle}" Header="Visual Basic.NET"></TabItem>
 213
 214         <TabItem Name="managedcpp" Style="{StaticResource TabStyle}" Header="Managed C++"></TabItem>
 215
 216         <TabItem Style="{StaticResource TabStyle}" Header="Preview Sample">
 217 <!-- Demonstrates the DoubleAnimationUsingKeyFrames class. DoubleAnimationUsingKeyFrames objects are
 218      used to animate the position of rectangles across a canvas. -->
 219 <Canvas>
 220   <Canvas.Resources>
 221     <Style x:Key="MyMarkerRectangleStyle">
 222       <Setter Property="Rectangle.Height" Value="230"/>
 223       <Setter Property="Rectangle.Width" Value="50"/>
 224       <Setter Property="Rectangle.Fill">
 225         <Setter.Value>
 226           <SolidColorBrush Color="Gray" Opacity="0.25" />
 227         </Setter.Value>
 228       </Setter>
 229     </Style>
 230 </Canvas.Resources>
 231  <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" Margin="20">
 232     <Canvas Width="600" Height="300">
 233
 234       <!-- Mark the key frame points for illustrative purposes. -->
 235       <Rectangle
 236         Style="{StaticResource MyMarkerRectangleStyle}"
 237         Canvas.Left="10" Canvas.Top="50" />
 238       <TextBlock Canvas.Left="10">Starting Value</TextBlock>
 239
 240       <Rectangle
 241         Style="{StaticResource MyMarkerRectangleStyle}"
 242         Canvas.Left="500" Canvas.Top="50" />
 243
 244       <TextBlock Canvas.Left="500">1. Value = 500 <LineBreak /> KeyTime = 0:0:7</TextBlock>
 245       <Rectangle Style="{StaticResource MyMarkerRectangleStyle}"
 246         Canvas.Left="200" Canvas.Top="50"/>
 247       <TextBlock Canvas.Left="200">2. Value = 200 <LineBreak /> KeyTime = 0:0:10</TextBlock>
 248       <Rectangle Style="{StaticResource MyMarkerRectangleStyle}"
 249         Canvas.Left="350" Canvas.Top="50" />
 250       <TextBlock Canvas.Left="350">3. Value = 350 <LineBreak /> KeyTime = 0:0:15</TextBlock>
 251
 252
 253       <!-- This rectangle is animated using a key frame animation
 254            with linear interpolation. -->
 255       <Rectangle Name="linearKeyFrameRectangle"
 256         Canvas.Top="50"
 257         Canvas.Left="10"
 258         Height="50"
 259         Width="50"
 260         Stroke="Black"
 261         StrokeThickness="5">
 262         <Rectangle.Fill>
 263           <SolidColorBrush Color="Blue" Opacity="0.4" />
 264         </Rectangle.Fill>
 265       </Rectangle>
 266
 267       <!-- This rectangle is animated using a key frame animation
 268            with splined interpolation. -->
 269       <Rectangle Name="splineKeyFrameRectangle"
 270         Canvas.Top="110"
 271         Canvas.Left="10"
 272         Height="50"
 273         Width="50"
 274         Stroke="Black"
 275         StrokeThickness="5">
 276         <Rectangle.Fill>
 277           <SolidColorBrush Color="Purple" Opacity="0.4" />
 278           </Rectangle.Fill>
 279       </Rectangle>
 280
 281       <!-- This rectangle is animated using a key frame animation
 282            with discrete interpolation. -->
 283       <Rectangle Name="discreteKeyFrameRectangle"
 284         Canvas.Top="170"
 285         Canvas.Left="10"
 286         Height="50"
 287         Width="50"
 288         Stroke="Black"
 289         StrokeThickness="5">
 290         <Rectangle.Fill>
 291           <SolidColorBrush Color="Lime" Opacity="0.4" />
 292         </Rectangle.Fill>
 293       </Rectangle>
 294
 295       <!-- This rectangle is animated using a key frame animation
 296            with a combination of interpolation methods. -->
 297       <Rectangle Name="combinationKeyFrameRectangle"
 298         Canvas.Top="230"
 299         Canvas.Left="10"
 300         Height="50"
 301         Width="50"
 302         Stroke="Black"
 303         StrokeThickness="5">
 304         <Rectangle.Fill>
 305           <SolidColorBrush Color="Orange" Opacity="0.4" />
 306         </Rectangle.Fill>
 307       </Rectangle>
 308
 309
 310
 311
 312     </Canvas>
 313
 314
 315
 316     <!-- These buttons are used to restart, pause, resume, and stop the animations. -->
 317     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
 318       <StackPanel.Triggers>
 319         <EventTrigger SourceName="restartButton"
 320           RoutedEvent="Button.Click">
 321           <BeginStoryboard Name="myBeginStoryboard">
 322             <Storyboard>
 323               <!-- Animates the position of a Rectangle from a base value of 10
 324                   to 500, 200, and then 350 using linear interpolation. -->
 325               <DoubleAnimationUsingKeyFrames
 326                 Storyboard.TargetName="linearKeyFrameRectangle" Storyboard.TargetProperty="(Canvas.Left)"
 327                 Duration="0:0:15" FillBehavior="HoldEnd">
 328                 <DoubleAnimationUsingKeyFrames.KeyFrames>
 329                   <LinearDoubleKeyFrame Value="500" KeyTime="0:0:7" />
 330                   <LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
 331                   <LinearDoubleKeyFrame Value="350" KeyTime="0:0:15" />
 332                 </DoubleAnimationUsingKeyFrames.KeyFrames>
 333               </DoubleAnimationUsingKeyFrames>
 334
 335               <!-- Animates the position of a Rectangle from a base value of 10
 336                    to 500, 200, and then 350 using splined interpolation. -->
 337               <DoubleAnimationUsingKeyFrames Storyboard.TargetName="splineKeyFrameRectangle" Storyboard.TargetProperty="(Canvas.Left)"
 338                 Duration="0:0:15" FillBehavior="HoldEnd">
 339                 <DoubleAnimationUsingKeyFrames.KeyFrames>
 340                   <SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.25,0.5 0.75,1" />
 341                   <SplineDoubleKeyFrame Value="200" KeyTime="0:0:10"  KeySpline="0.25,0.5 0.75,1" />
 342                   <SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  KeySpline="0.25,0.5 0.75,1" />
 343                 </DoubleAnimationUsingKeyFrames.KeyFrames>
 344               </DoubleAnimationUsingKeyFrames>
 345
 346               <!-- Animates the position of a Rectangle from a base value of 10
 347                    to 500, 200, and then 350 using discrete interpolation. -->
 348               <DoubleAnimationUsingKeyFrames
 349                 Storyboard.TargetName="discreteKeyFrameRectangle"
 350                 Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:15" FillBehavior="HoldEnd">
 351                 <DoubleAnimationUsingKeyFrames.KeyFrames>
 352                   <DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
 353                   <DiscreteDoubleKeyFrame Value="200" KeyTime="0:0:10" />
 354                   <DiscreteDoubleKeyFrame Value="350" KeyTime="0:0:15" />
 355                 </DoubleAnimationUsingKeyFrames.KeyFrames>
 356               </DoubleAnimationUsingKeyFrames>
 357
 358               <!-- Animates the position of a Rectangle from a base value of 10
 359                    to 500, 200, and then 350 using a variety of interpolation methods. -->
 360               <DoubleAnimationUsingKeyFrames
 361                 Storyboard.TargetName="combinationKeyFrameRectangle"
 362                 Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:15" FillBehavior="HoldEnd">
 363                 <DoubleAnimationUsingKeyFrames.KeyFrames>
 364                   <DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
 365                   <LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
 366                   <SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  KeySpline="0.25,0.5 0.75,1" />
 367                 </DoubleAnimationUsingKeyFrames.KeyFrames>
 368               </DoubleAnimationUsingKeyFrames>
 369
 370
 371             </Storyboard>
 372           </BeginStoryboard>
 373         </EventTrigger>
 374
 375         <EventTrigger
 376           SourceName="pauseButton"
 377           RoutedEvent="Button.Click">
 378           <PauseStoryboard BeginStoryboardName="myBeginStoryboard"  />
 379         </EventTrigger>
 380         <EventTrigger
 381           SourceName="resumeButton"
 382           RoutedEvent="Button.Click">
 383           <ResumeStoryboard BeginStoryboardName="myBeginStoryboard"  />
 384         </EventTrigger>
 385         <EventTrigger
 386           SourceName="skipToEndButton"
 387           RoutedEvent="Button.Click">
 388           <SkipStoryboardToFill BeginStoryboardName="myBeginStoryboard"  />
 389         </EventTrigger>
 390         <EventTrigger
 391           SourceName="stopButton"
 392           RoutedEvent="Button.Click">
 393           <StopStoryboard BeginStoryboardName="myBeginStoryboard"  />
 394         </EventTrigger>
 395       </StackPanel.Triggers>
 396
 397       <Button Name="restartButton">Restart</Button>
 398       <Button Name="pauseButton">Pause</Button>
 399       <Button Name="resumeButton">Resume</Button>
 400       <Button Name="skipToEndButton">Skip To End</Button>
 401       <Button Name="stopButton">Stop</Button>
 402     </StackPanel>
 403 </StackPanel>
 404 </Canvas>
 405
 406         </TabItem>
 407       </TabControl>
 408
 409 </Page>