Storyboard animation in XAML

Question

0.00/5 (No votes)

See more:

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 5-May-14 9:19am

Madhukar Krishna

Updated 5-May-14 9:30am

Matt T Heffron

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 5-May-14 15:42pm

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

2 solutions

Solution 1

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

Posted 9-May-14 5:25am

Gergilcan

Comments

Madhukar Krishna 10-May-14 9:57am

good suggestion! But could you give me the code please! How to do that?

Add a Solution

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

Madhukar Krishna · Accepted Answer · 2014-05-11T17:31:00

Solution 2

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.

Posted 11-May-14 17:31pm

Madhukar Krishna

Storyboard animation in XAML

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Storyboard animation in XAML

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us