Working out speed for marquee-type animation in Silverlight

Question

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.

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:

<Canvas Height="20" VerticalAlignment="Stretch" x:Name="canvasInfo">
  <Canvas.Resources>
    <Storyboard x:Name="storyBoardMarquee">
      <DoubleAnimation x:Name="marquee" BeginTime="00:00:00" Storyboard.TargetName="spMarquee" Storyboard.TargetProperty="(Canvas.Left)" From="0"/>
    </Storyboard>
  </Canvas.Resources>
  <StackPanel Orientation="Horizontal" x:Name="spMarquee" >
    <StackPanel.Resources>
      <Style TargetType="HyperlinkButton">
        <Setter Property="Margin" Value="200,0,0,0"/>
      </Style>
    </StackPanel.Resources>
  </StackPanel>
</Canvas>

I then have a function that I call once I've populated the StackPanel with the HyperLinkButtons,

//Start with element off screen to right, scroll until off left
marquee.From = canvasInfo.ActualWidth;
marquee.To = -spMarquee.ActualWidth;

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).

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.

Answer 1

The formula is:

• time = distance / speed

Pick a speed like 100 pixels / second and plug it in:

double speed = 100.0;
marquee.Duration = new Duration(TimeSpan.FromSeconds(Math.Abs(marquee.From.Value - marquee.To.Value) / speed));