Click here to Skip to main content
14,934,026 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Storyboard animation in WPF

I have written an animation in WPF storyboard: The following is the code:

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
HTML
<window x:class="animfromcodebehindWpfApplication1.MainWindow" xmlns:x="#unknown">
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<window.resources>
<storyboard x:key="Storyboard1">
<doubleanimationusingkeyframes storyboard.targetproperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" storyboard.targetname="rectangle1">
<easingdoublekeyframe keytime="0:0:1" value="-36" />
</doubleanimationusingkeyframes>
<doubleanimationusingkeyframes storyboard.targetproperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" storyboard.targetname="rectangle1">
<easingdoublekeyframe keytime="0:0:1" value="-46" />
</doubleanimationusingkeyframes>
<doubleanimationusingkeyframes storyboard.targetproperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" storyboard.targetname="rectangle1">
<easingdoublekeyframe keytime="0:0:1" value="359.484" />
</doubleanimationusingkeyframes>
</storyboard>
</window.resources>
<window.triggers>
<eventtrigger routedevent="FrameworkElement.Loaded">
<beginstoryboard storyboard="{StaticResource Storyboard1}" />
</eventtrigger>
</window.triggers>
<grid>
<rectangle height="100" horizontalalignment="Left" margin="84,82,0,0" name="rectangle1" stroke="Black" verticalalignment="Top" width="200" fill="#FDFFFF0D" rendertransformorigin="0.5,0.5">
<rectangle.rendertransform>
<transformgroup>
<scaletransform />
<skewtransform />
<rotatetransform />
<translatetransform />
</transformgroup>
</rectangle.rendertransform>
</rectangle>
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="344,72,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
</grid>
</window>


----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

In the code behind I have written

C#
public void AnimateRectangle()
{
Storyboard rectrotate = (Storyboard)FindResource("Storyboard1");
rectrotate.Begin();
}


I call this function on button click event.
When I click the button nothing happens.
Addition : The storyboard animates when the window loads but not on clicking the button. Please help

Please help.

EDIT: Fixed code markup with tags.
Posted
Updated 5-May-14 9:30am
v3
Comments
   
Where is the button click event handler set? Did you run through this point in the debugger, as well as the handler itself?
—SA
Madhukar Krishna 6-May-14 1:10am
   
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation; // for storyboard

namespace animfromcodebehindWpfApplication1
{
///
/// Interaction logic for MainWindow.xaml
///

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void button1_Click(object sender, RoutedEventArgs e)
{
AnimateRectangle();
}

public void AnimateRectangle()
{
Storyboard rectrotate = (Storyboard)FindResource("Storyboard1");
rectrotate.Begin();
}
}
}
thatraja 6-May-14 3:07am
   
Move this code to your question(Yes, update)
Madhukar Krishna 6-May-14 5:53am
   
yes update

The problem is that the Storyboard is already executed when the Window is loaded. So, it is fired but you dont see any result because the result is already there.

You have to specify an storyboard when entering and when exit, look at StoryBoard properties.

Result: The animation is already done, and you are specifying an increment to a fixed value, and that value is already reached when you load the page
   
Comments
Madhukar Krishna 10-May-14 9:57am
   
good suggestion! But could you give me the code please! How to do that?
Found out guys !

Found out that FillBehavior="Stop" should be used to bring the timeline back to zero so that animation could restart. I can also try autoreverse="true" but that reverses the animation.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900