Click here to Skip to main content
15,040,212 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm trying to animate a Custom User Control on a curve dynamically created.
I need to change 3 properties called .X, .Y and .Angle of that user control.
I use 3 DoubleAnimationUsingKeyFrames, one for each property, but I don't know how to reference properties in SetTargetProperty.

I tryed with 2 only properties X and Y using instead Left and Top properties of my user control and setting them in this way:
Storyboard.SetTargetProperty(Anim_X, New PropertyPath("(Canvas.Left)")
Storyboard.SetTargetProperty(Anim_Y, New PropertyPath("(Canvas.Top)")
It works but how to set Angle rotation?

Mark Salsbery 27-Jun-11 20:08pm
Animate a RotateTransform object on your user control? Something like this maybe? Silverlight RotateTransform Animation Example[^]

1 solution

Hi Mark, many thanks you for your answer. My question was not enought clear so I attached a simplified version of my App, showing the Custom User Control with its three user defined Properties which I don't know how to Set in the MainPage animation (see below the three wrong statemenets in italic).
How can I reference a User defined Property of a Custom user control? Is that possible? Is my approach wrong? I'm very new in Silverlight.

Custom User Control Xaml

<usercontrol x:class="Coach2D_SL.UC1" xmlns:x="#unknown">
    Xmlns … >

    <stackpanel x:name="Sp" background="Transparent" margin="100,100,0,0">
        <border name="Border1" background="transparent" borderbrush="transparent" borderthickness="2" x:uid="mbi">
                                           Width="56" Height="56" />


Partial Public Class UC1
    Inherits UserControl

    Public WriteOnly Property Position As Integer()
        Set(value As Integer())
            Sp.Margin = New Thickness(value(0) - image1.Width / 2, value(1) - image1.Height / 2, 0, 0)
        End Set
    End Property
    Public WriteOnly Property RotationAngle As Double
        Set(value As Double)
            Rotate.Angle = value
            image1.RenderTransform = Rotate
        End Set
    End Property

End Class

. . .
. . .


Imports SilverlightApplication1.UC1
Partial Public Class MainPage
    Inherits UserControl

    Dim Uc1 As New UC1
  Private Sub Canvas1_Loaded(sender As Object, e As System.Windows.RoutedEventArgs) Handles Canvas1.Loaded

      Uc1.Position = {70, 150}
End Sub

    Private Sub Button1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button1.Click
        ' Prepare animation
        Actpts_X = New DoubleCollection
        Actpts_Y = New DoubleCollection
        ActAng = New DoubleCollection
        Dim Anim_X As New DoubleAnimationUsingKeyFrames
        Dim Anim_Y As New DoubleAnimationUsingKeyFrames
        Dim AnimAng As New DoubleAnimationUsingKeyFrames
        Dim d As New Duration(TimeSpan.FromSeconds(T))
        Anim_X.Duration = d
        Anim_Y.Duration = d
        AnimAng.Duration = d
        ' Create Frames 
        For i  = 0 To PolyLine1.Points.Count - 1
            Actpts_X.Add(PolyLine1.Points(i).X - Canvas1.Margin.Left)
            Actpts_Y.Add(PolyLine1.Points(i).Y - Canvas1.Margin.Top)
            Anim_X.KeyFrames.Add(New DiscreteDoubleKeyFrame() With { _
             .Value = PolyLine1.Points(i).X, _
             .KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(i / speed)) _
            Anim_Y.KeyFrames.Add(New DiscreteDoubleKeyFrame() With { _
             .Value = PolyLine1.Points(i).Y, _
             .KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(i / speed)) _
            AnimAng.KeyFrames.Add(New DiscreteDoubleKeyFrame() With { _
             .Value = RotAng(i), _
             .KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(i / speed)) _

        Dim SB As New Storyboard
        Canvas1.Resources.Add("unique_id", SB)
        SB.Duration = d

        Storyboard.SetTargetProperty(Anim_X, New PropertyPath("(Uc1.X)"))
        Storyboard.SetTargetProperty(Anim_Y, New PropertyPath("(Uc1.Y)"))
        Storyboard.SetTargetProperty(AnimAng, New PropertyPath("(Uc1.Angle)"))
        Storyboard.SetTarget(Anim_X, Uc2)
        Storyboard.SetTarget(Anim_Y, Uc2)
        Storyboard.SetTarget(AnimAng, Uc2)
    End Sub
Mark Salsbery 29-Jun-11 17:29pm
You can reference your properties in your usercontrol class but you need to set the data context so the framework knows what object to look at to find those properties. I don't know VB, but you need to set the DataContext of your usercontrol object to a reference to itself.

Also, your PropertyPath strings should simply be "X", "Y", and "Angle", provided those are the property names in the UC1 class (you haven't shown the properties you are trying to bind to).

I'm not sure what you are trying to do here. Your SetTargetProperty() calls on the storyboard look way wrong. You shouldn't be trying to animate the DoubleAnimationUsingKeyFrames objects, you should be animating some properties that actually change the position and angle of whatever element you are animating.

You said it worked when you animated the Canvas.Left/Canvas.Right properties. Instead of that method (which gives you no rotation), you can set the RenderTransform property of your custom control to a TransformGroup containing a TranslateTransform and a RotateTransform. Then you can animate the X and Y properties of the TranslateTransform for position, and the Angle property of the RotateTransform for rotation. See the example code here: DoubleAnimationUsingKeyFrames Class[^]

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