title: Working out speed for marquee-type animation in Silverlight
body: <p>I have a StackPanel element onto which I add HyperLinkButton controls, one for each element in a return IEnumerable.  This StackPanel is contained within a Canvas element.</p>
  
  <p>Once I've populated the StackPanel I run an animation to change the Canvas.Left property to make the Hyperlinks scroll from left to right. My XAML is something like:</p>
  
  <pre><code>&lt;Canvas Height="20" VerticalAlignment="Stretch" x:Name="canvasInfo"&gt;
    &lt;Canvas.Resources&gt;
      &lt;Storyboard x:Name="storyBoardMarquee"&gt;
        &lt;DoubleAnimation x:Name="marquee" BeginTime="00:00:00" Storyboard.TargetName="spMarquee" Storyboard.TargetProperty="(Canvas.Left)" From="0"/&gt;
      &lt;/Storyboard&gt;
    &lt;/Canvas.Resources&gt;
    &lt;StackPanel Orientation="Horizontal" x:Name="spMarquee" &gt;
      &lt;StackPanel.Resources&gt;
        &lt;Style TargetType="HyperlinkButton"&gt;
          &lt;Setter Property="Margin" Value="200,0,0,0"/&gt;
        &lt;/Style&gt;
      &lt;/StackPanel.Resources&gt;
    &lt;/StackPanel&gt;
  &lt;/Canvas&gt;
  </code></pre>
  
  <p>I then have a function that I call once I've populated the StackPanel with the HyperLinkButtons,</p>
  
  <pre><code>//Start with element off screen to right, scroll until off left
  marquee.From = canvasInfo.ActualWidth;
  marquee.To = -spMarquee.ActualWidth;
  </code></pre>
  
  <p>The problem that I'm having is that I can't workout a suitable algorithm for the Duration of the animation.  Whatever I try isn't consistent (e.g. 1 element moves too fast, 30 elements move too slow).</p>
  
  <p>Does anyone have any suggestions for working out a duration for this animation, i'm guessing it has to do with the width of the StackPanel and the number of elements but I just can't get anything suitable and consistent.</p>