Scrolling Marquee in Silverlight

Question

I need to create a scrolling marquee in my Silverlight application. The marquee needs to scroll from right-to-left. When its done scrolling, it needs to restart automatically The trick is, that I need to use an ItemsControl as items will be added to the list as it scrolls. I have no clue how to do this and I assumed there would be a control online that would demonstrate this. However, I have been unsuccesful in finding one. Does anybody know of an existing control or know how to do this?

Thanks!

Answer 1

This is only idea how you can build simple marquee. You must calculate "from" and "to" by measure width (ActualWidth) of ItemsControl and calculate storyboard duration time. Instead of hardcoded item use binding of course.

 <ScrollViewer Width="Auto"
              Height="Auto"
              BorderThickness="0"
              HorizontalContentAlignment="Stretch"
              VerticalContentAlignment="Stretch"
              VerticalScrollBarVisibility="Disabled"
              Margin="0"
              Padding="0">
                <Canvas>
                    <Canvas.Resources>
                        <Storyboard x:Name="Anim">
                            <DoubleAnimation From="480" To="-480" Storyboard.TargetName="Marquee"
                                             Duration="0:0:10"
                                             RepeatBehavior="Forever"
                                             Storyboard.TargetProperty="(Canvas.Left)"/>
                        </Storyboard>
                    </Canvas.Resources>
                    <ItemsControl Canvas.Left="0" Name="Marquee">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.Items>
                            <TextBlock Text="Item1" Margin="10 0 0 0"/>
                            <TextBlock Text="Item2" Margin="10 0 0 0"/>
                            <TextBlock Text="Item3" Margin="10 0 0 0"/>
                            <TextBlock Text="Item4" Margin="10 0 0 0"/>
                        </ItemsControl.Items>
                    </ItemsControl>
                </Canvas>
  </ScrollViewer>