Adding animation to a web application

11-02-2009 4:21 PM |

I've been kindly asked to repost this question here.

I created a Silverlight application, consisting of two projects - TheCoolest and TheCoolest.Web. The current functionality is (the coolestly possible) dragging and dropping a rectangle within a canvas. So far, so good.

Now, i'd like to make the rectangle pulse shifting colors while dragged (or just hoovered upon). After several hours of different approaches, all of which resulted in failures (run-time crashes with different error messages, no pulsing nor dragging etc.), i realized that my ratio of patience to competence doesn't bear this anymore.

So, i'm going to restart and i'd like someone to hold my hand on this. My best (still not working) attempt is as follows.

In the XAML i add the event of mouse entering.

<UserControl ...>
  <Canvas>
    <Rectangle ...
      MouseEnter="Rectangle_MouseEnter"
      Name="Rectumangle"
      ... /> 
  </Canvas>
</UserControl>

In the code behind, i add a Storyboard object as a private field and in the constructor i create and add a ColorAnimation object to it. Also, i configure the rectangle and its property to be targeted by the storyboard/animation.

1    public partial class MainPage : UserControl
2    {
3      private Storyboard _storyboard;
4      ...
5    
6      public MainPage()
7      {
8        InitializeComponent();
9    
10       ColorAnimation animation = new ColorAnimation
11       {
12         From = Colors.Blue,
13         To = Colors.Yellow,
14         Duration = TimeSpan.FromSeconds(5),
15         AutoReverse = true,
16         RepeatBehavior = RepeatBehavior.Forever,
17       };
18   
19       _storyboard = new Storyboard();
20       _storyboard.Children.Add(animation);
21       Storyboard.SetTargetName(animation, Rectumangle.Name);
22       Storyboard.SetTargetProperty(animation, new PropertyPath(SolidColorBrush.ColorProperty));
23     }
24     ...
25     private void Rectangle_MouseEnter(Object sender, MouseEventArgs eventaArgs)
26     {
27       _storyboard.Begin();
28     }
29   }
30   ...

This doesn't work, because the storyboard hasn't any knowledge about the rectangle Rectumangle. I understand i should register it somehow BUT the examples i've seen refer to methods and classes in WPF application (e.g. NameScope in PresentationFramwork.DLL), which i can't add as a reference to the project.

Should i register it in an other way? If so, what way? If it's correct to use NameScope - how do i get to make it available? (I've installed SL3, latest version on the site and i'm using VS2008SP1.)

Suggestions?

Re: Adding animation to a web application

11-03-2009 5:11 AM |

 My advice is to have a look at Blend 3 and specifically at the VisualStateManager, animations and behaviors. There are some great videos right here on silverlight.net that can help you understand how to use all that to solve your problems in a much easier way.

HTH.

Re: Adding animation to a web application

11-05-2009 2:39 AM |

Hi

  I changed a little of your code. It should work now(i tested on my computer, it works).

  Code - behind

        ColorAnimation animation = new ColorAnimation{  To = Colors.Yellow,  Duration = new Duration(new TimeSpan(0,0,5)), AutoReverse = true,   RepeatBehavior = RepeatBehavior.Forever};
            _storyboard = new Storyboard();
            _storyboard.Children.Add(animation);
            Storyboard.SetTarget(animation, brush);
            Storyboard.SetTargetProperty(animation,new PropertyPath("Color"));

   xaml:

        <Canvas Width="500" Height="600">
           <Rectangle MouseEnter="Rectangle_MouseEnter" Width="100" Height="100"   x:Name="Rectumangle" >
                <Rectangle.Fill>
                    <SolidColorBrush  x:Name="brush" Color="Red" />                    
                </Rectangle.Fill>
            </Rectangle>
        </Canvas>

Best Regards