Click here to Skip to main content
15,436,928 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
Sergey Alexandrovich Kryukov 5-May-14 15:42pm     CRLF
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     CRLF
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
 
Share this answer
 
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.
 
Share this answer
 

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