Circular effect in ticker-silverlight

Question

Hi All, I am working on a silverlight ticker application, something like 5 links will be visible and they will be moving like a ticker(right to left). I am able to parse the i/p xml file and also getting the Title and corresponding urls, those are coming properly in the page, also its moving like a ticker , but the circular effect is missing.means the continuous flow of links are not proper.

  <Grid x:Name="LayoutRoot">
    <StackPanel x:Name="mystackpanel" Grid.Column="1" Orientation="Vertical">
        <Canvas>
            <Canvas.Resources>
                <Storyboard x:Name="sb">
                    <DoubleAnimation x:Name="da" BeginTime="00:00:05"
                Storyboard.TargetName="LinkList"
                Storyboard.TargetProperty="(Canvas.Left)"
                From="0" To="-500" Duration="0:0:5" RepeatBehavior="Forever"/>

                </Storyboard>
            </Canvas.Resources>
            <ListBox x:Name="LinkList" 
                     BorderThickness="0" 
                     Opacity="0.5" 
                     HorizontalAlignment="Left"
                     >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel x:Name="panel" Orientation="Horizontal"  HorizontalAlignment="Left"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <HyperlinkButton x:Name="mylink"
                                         Foreground="Black"
                                         FontSize="10"
                                         FontWeight="Bold"
                                         ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                         Tag="{Binding}"
                                         Content="{Binding Path=Title}"
                                         NavigateUri="{Binding Path=URi}"
                                         IsTabStop="False"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

</Canvas>

</StackPanel>

    </Grid>

How to get the circular effect?

Answer 1

Here is the the simplest approach to get the effect you need.

• Set the From in the double animation to the width of the outer StackPanel. That way your URLs start from the extreme right.
• Make sure the To value is the negative of at least the full width of the content to be scrolled.
• Add a RectangleGeometry to your outer StackPanel that starts at 0,0 and has the width and height of your StackPanel.
• Adjust the Duration to get a reasonable pixels/second rate (you want a constant speed not appearing to increase in speed as more content is present).