Animation via Code

Animation via XAML




WPF Tutorial Contents

APL  Home Page



Animation via Code


Define a simple form containing two buttons, the idea is that when the "Start" button is pressed, the other button grows...

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Animated Buttons">
  <StackPanel>
    <Button Name="btnStart" Content="Start" Width="100"/>
    <Button Name="btnA" Content="Button A" Width="100"/>
</StackPanel>
</Window>


And the code, to display...

 foo w;⎕IO;⎕ML;frm;names;callbacks
⍝ Experiments with animation
 ⎕IO ⎕ML←0 3
 frm←#.UTIL.WPF.LoadXamlFile w
 frm.(btnStart btnA)←frm.FindName¨⊂¨'btnStart' 'btnA'
 frm.btnStart.onClick←'#.Start'
 {}#.frm.ShowDialog


And the callback that implements the tasteful action...

 Start w;⎕IO;⎕ML;⎕USING;anim;path;progFiles
⍝ Start the animation
 ⎕IO ⎕ML←0 3
 ⎕USING←,⊂'System'
 ⎕USING,←⊂'System.Windows'
 progFiles←Environment.GetFolderPath Environment.SpecialFolder.ProgramFiles
 path←progFiles,'\Reference Assemblies\Microsoft\Framework\v3.0\'
 ⎕USING,←⊂'System.Windows.Controls,',path,'PresentationFramework.dll'
 ⎕USING,←⊂'System.Windows.Media.Animation,',path,'PresentationCore.dll'
 anim←⎕NEW DoubleAnimation
 anim.From←100
 anim.To←200
 frm.btnA.BeginAnimation(Button.WidthProperty anim)


As always, the tricky bit is finding out what goes into ⎕USING (no prizes awarded for this clunkiness).

Animation via XAML


If you don't like writing APL, you can get XAML to do it all for you, add this button definition to the Window definition above...

<Button Name="btnB" Content="Button B" Width="100">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard TargetProperty="Width">
            <DoubleAnimation From="100" To="200" Duration="0:0:5" AutoReverse="True" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Button.Triggers>
</Button>


Press Button B and watch what happens (this code taken from Nathan's wretched book)