I like to have my animations apart from the rest of the XAML, because they can become very lengthy and are not really relevant to the functionality of the UI. It’s better to edit them separately.
The animations in Silverlight have to be started using Event Handlers in a Code Behind file in Silverlight instead of the Triggers used in WPF. The Triggers were able to connect to the target object for an animation. The Event Handlers won’t do that for you.
You’ll have to find the Animation Resource, assign it to a Storyboard object in the Code Behind file of your page and set the Target element for that Storyboard before starting the animation.
Michel Heijman helped me out with this. This is his solution:
Create a helper class that can find Resources for you (like in WPF). Save this in the root of your project and name it ResourceLocator.cs.
[sourcecode language=”C#”]
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace AnimationsAsApplicationResources
{
public static class ResourceLocator
{
///
///
///
///
public static object FindResource(string name)
{
if (App.Current.Resources.Contains(name))
{
return App.Current.Resources[name];
}
else
{
FrameworkElement root = App.Current.RootVisual as FrameworkElement;
return root.FindName(name);
}
}
}
}
[/sourcecode]
In the Code Behind of your page, add the following to access the Animation Resource, set the TargetName for it and to run the Animation:
[sourcecode language=”C#”]
private void startStoryboard1(object sender, RoutedEventArgs e)
{
// find the storyboard with helper class:
Storyboard Storyboard1Resource = ResourceLocator.FindResource(“Storyboard1” ) as Storyboard;
if (Storyboard1Resource != null)
{
// Set target for storyboard:
Storyboard.SetTarget(Storyboard1Resource, Rectangle1);
// Begin storyboard:
Storyboard1Resource.Begin();
}
}
[/sourcecode]
Don’t forget to place your animation in app.xaml now 🙂 No need to change the app.xaml.cs file for this…
Njoy!