Hi there.

I just spent several hours figuring out how to make a simple Storyboard work in C# (using Silverlight 2.0 Beta 2). I want to share my experience here, as some other folks may encounter the same problems. Drop me a line if you find this useful.

For those of you who are impatient (that's probably most of us), here is the solution which DOES work well:

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media.Animation;

public partial class Page : UserControl

{

Storyboard storyboard;

TextBlock debugMessage;

public Page()

{

InitializeComponent();

// Create a text box for debug messages

debugMessage = new TextBlock();

debugMessage.FontSize = 9;

((Grid)Content).Children.Add(debugMessage);try
{
    Duration d = new Duration(TimeSpan.FromSeconds(1));

    DoubleAnimation doubleAnimation = new DoubleAnimation();
    doubleAnimation.From = 100;
    doubleAnimation.To = 300;
    doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
    doubleAnimation.AutoReverse = true;
    doubleAnimation.Duration = d;

    Storyboard.SetTarget(doubleAnimation, LayoutRoot);
    Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(UIElement.Width)", new object[0]));

    storyboard = new Storyboard();
    storyboard.Duration = d;
    storyboard.RepeatBehavior = RepeatBehavior.Forever;
    storyboard.AutoReverse = true;
    storyboard.Children.Add(doubleAnimation);
    storyboard.Begin();

}

catch (Exception ex)

{

debugMessage.Text = ex.Message + "\n" + ex.StackTrace;

}

}

}

Where I had trouble was the line where I set the TargetProperty. The documentation on the Microsoft Website seems to be a bit outdated and maybe a bit inaccurate. For example, at http://msdn.microsoft.com/en-us/library/cc190707(VS.95).aspx, it was suggested not to create a new PropertyPath, but to simply use a String instead. I assume that this worked fine for an older version of Silverlight.

     Storyboard.SetTargetProperty(doubleAnimation, "(UIElement.Width)");      DOES NOT WORK

Next, I found this article: http://msdn.microsoft.com/en-us/library/ms587924(VS.95).aspx. Hereis was suggested: "Always use the path parameter to specify a path string as documented in the topic Property Path Syntax (Silverlight 2.0), and always leave pathParameters as nullNothingnullptra null reference (Nothing in Visual Basic)." So, I thought that the following line should work (bu it does not work):

     Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(UIElement.Width)", null));     DOES NOT WORK

After some more try-and-error, I finally found the above solution. 

Creating a new Storyboard should be like this

                    Storyboard Reflection_Story1 = new Storyboard();
                    DoubleAnimation Reflection_fades = new DoubleAnimation();
                    Reflection_fades.From = 100;
                    Reflection_fades.To = 300;
                    Reflection_fades.RepeatBehavior = RepeatBehavior.Forever;
                    Reflection_fades.Duration = new Duration(TimeSpan.Parse("0:0:1"));
                    Storyboard.SetTarget(Reflection_fades, LayoutRoot);
                    Storyboard.SetTargetProperty(Reflection_fades, new Property("(LayoutRoot.Width)"));
                    Reflection_Story1.Children.Add(Reflection_fades);
                    LayoutRoot.Resources.Add(Reflection_Story1);
                    Reflection_Story1.Begin();

• Please make sure you have the width in your LayoutRoot 

Regards,
SteveWong (HongKong)
Please mark post as answer if they help you
TestPage

Steve,

 your approach is identical to my approach with the only exception of the following line:

Storyboard.SetTargetProperty(Reflection_fades, new Property("(LayoutRoot.Width)")); 

You use Property, I use PropertyPath. The class Property does not seem to exist in Silverlight 2.0 Beta 2; or atleast I am not able to find it.

Regards

Andreas

Sorry for my mistake

It should be something like this

Creating a new Storyboard should be like this

                    Storyboard Reflection_Story1 = new Storyboard();
                    DoubleAnimation Reflection_fades = new DoubleAnimation();
                    Reflection_fades.From = 100;
                    Reflection_fades.To = 300;
                    Reflection_fades.RepeatBehavior = RepeatBehavior.Forever;
                    Reflection_fades.Duration = new Duration(TimeSpan.Parse("0:0:1"));
                    Storyboard.SetTarget(Reflection_fades, LayoutRoot);
                    Storyboard.SetTargetProperty(Reflection_fades, new PropertyPath("(LayoutRoot.Width)"));
                    Reflection_Story1.Children.Add(Reflection_fades);
                    LayoutRoot.Resources.Add(Reflection_Story1);
                    Reflection_Story1.Begin();

• Please make sure you have the width in your LayoutRoot 
• It doesnt require you to set the null for it

Regards,
SteveWong (HongKong)
Please mark post as answer if they help you
TestPage

And also by the release of Beta 2, there are breaking changes between Beta 1 and Beta 2

The SetTargetProperty and GetTargetProperty Changes have included in the documentation.

Regards,
SteveWong (HongKong)
Please mark post as answer if they help you
TestPage

BlueAquarius:

After some more try-and-error, I finally found the above solution. 

Well, this was documented in the breaking changes doc: http://msdn.microsoft.com/en-us/library/cc645049(VS.95).aspx#SetTargetProperty_and_GetTargetProperty

Jim (http://jimmangaly.blogspot.com/)

Please MARK the replies as answers if they answered your question

http://www.identitymine.com/

Jim Mangaly,

interestingly, the "breaking changes" page which you are referring to suggests the following line of code for Silverlight 2.0 Beta 2:

Storyboard.SetTargetProperty(timeline, new PropertyPath("(Canvas.Left)")); 

I believe that this is incorrect, too. I do not think that there is a contructor for PropertyPath which takes one argument. See http://msdn.microsoft.com/en-us/library/ms587924(VS.95).aspx 

 Storyboard.SetTargetProperty(timeline, new PropertyPath("(Canvas.Left)"))  is correct syntax in SL 2 beta 2. The documentation probably missed that.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

The sublety is the "params" keyword that lets this syntax work without explicitly setting the second parameter, and yeah the docs did miss that. (In fact, the stuff that suggests setting explicit to null will get you into trouble.) Sorry ... will fix the doc for RTM.

Hi, My name is Ibrahim working as SE in Hyd,India. Well I am new to Silverlight

I have created a line dynamically on canvas with position (x1,x2,y1,y2)=(80,230,50,50). and added to the canvas successfully at runtime.

i have written the code for animating a Line which was created dynamically. I want to deacrease/increase width From 10 To 100. For this Scenario I have written the Code

as shown below.

  private void DrawLine(double x1,double x2,double y1,double y2)
        {
            Line horline1 = new Line();
            horline1.Width = 150;
            horline1.Height = 1;
            horline1.X1 = x1;
            horline1.X2 = x2;
            horline1.Y1 = y1;
            horline1.Y2 = y2;
            SolidColorBrush stroke = new SolidColorBrush();
            stroke.Color = Colors.White;
            horline1.Stroke = stroke;
            horline1.StrokeThickness = 1;
            //surface is my convas name
            surface.Children.Add(horline1);
            Duration duration = new Duration(TimeSpan.FromSeconds(10));
            DoubleAnimation doubleAnimation = new DoubleAnimation();
            doubleAnimation.From = 10;
            doubleAnimation.To = 100;
            doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
            doubleAnimation.AutoReverse = true;
            doubleAnimation.Duration = duration;
            Line line = new Line();
            Storyboard.SetTarget(doubleAnimation, horline1);//if i created this line as Storyboard.SetTarget(doubleAnimation, new Line()); then line appears
            //but not animating...
            //Storyboard.SetTargetProperty(doubleAnimation, new  PropertyPath("(horline1.Width)"));
           
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("Width"));
           Storyboard storyboard = new Storyboard();
            storyboard.Duration = duration;
            storyboard.RepeatBehavior = RepeatBehavior.Forever;
            storyboard.AutoReverse = true;
            storyboard.Children.Add(doubleAnimation);
            storyboard.Begin();
        }

After i call this method in my surface_loaded(canvas loaded) what i see is the line is not appearing.

 
any help will be appretiated...

 
Thanks in Advance

Ibrahim.

 

Ibrahim,

I hope this helps:

//horline1.Width = 150;

//horline1.Height = 1;

//surface is my convas name

Storyboard.SetTarget(doubleAnimation, horline1);

storyboard.RepeatBehavior = RepeatBehavior.Forever;

I don't what you are trying to do. You have a line object, you want to animate the Width of the line?

Width/Height in line does no have any meaning. If you want animate the action of drawing a line you need to set the animation target to the line end position which is (X2, Y2).

Or if you want to change width of the line you need to set the target to the StrokeThickness not the Width property.

By the way, if your "surface" canvas has white background, you need to set the line stroke color to something else than white (you have Color = Colors.White;)

If you take off those two lines, and make sure your the line stroke color is different than the background color of your canvas, the line should appear.

horline1.Width = 150;
horline1.Height = 1;

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Ibrahim,

one additional comment to my previous response: I suggest to convert the method-level valiable 'storyboard' into a class-level valiable. Once your method execution is completed, all method-level variables will be recycled. I assume that this is true for the storyboard as well.

BlueAquarius

I was able to animate Line using the help provided the thread starter.

 Here's some sample code:

// Create a DoubleAnimation to animate the width of the button.

// Configure the animation to target the button's Width property.

return sb;