Scroll text and images together question

Question

Hi,

i have a question regarding text and images that need to be scrolling together.

(like a ticker tape)

 

In the past (windows forms) is created a usercontrol that made a bitmap that consists of text and images.

this bitmap was copied to the visible part of the usercontrol.

 

My qs now is how to tackle this in wpf. Should i create a bitmap as in the previous version, or is the current system so better that the best way is to use elements that are moved...

 

Regards,

 

Willie Jan

Answer 1

Hello, is this what you want?

        <ScrollViewer>

            <StackPanel>

                <TextBlock>abc</TextBlock>

                <Image Source="image.jpg"/>

            </StackPanel>

        </ScrollViewer>

 

Answer 2

 

Hi,

 

what I tried is using a Grid,

 

But when the control is hosted into for example a Border Control, it will resize automatically to the measurements of the border size, and it must retain the full size...

besides that I have to wait for the layout engine to have calculated the pixels before i can add a animation.

 

is the scrollviewer able to get the same speed as using a grid to create a ticker tape?

The speed of a grid running is ok.

 

i will have a look at the scrollviewer.

 

Thanks for your help.

Answer 3

Border or Grid won't make your content scroll. If you need scrolling, you'll need a ScrollViewer. You can put your Border insider the ScrollViewer:

<ScrollViewer>

<Border>

...

</Border>

</ScrollViewer>

 

Answer 4

I create a animation which scrolls the grid through the border control. with clipping turned on, it looks like a ticker tape ...

 

Answer 5

 

Are you looking for something like this:

 

Code Snippet

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Border BorderBrush="Red" BorderThickness="2,2,2,2" CornerRadius="15,0,15,15" Canvas.Top="50" Canvas.Left="50" ClipToBounds="True" Width="300" Height="75">

 <Canvas Canvas.Top="60" Canvas.Left="60" Height="60">
 <Canvas.RenderTransform>
   <TranslateTransform X="300"/>
 </Canvas.RenderTransform>
 <Canvas.Triggers>
   <EventTrigger RoutedEvent="FrameworkElement.Loaded">
    <BeginStoryboard>
     <Storyboard>
      <DoubleAnimation Storyboard.TargetProperty="(Canvas.RenderTransform).(TranslateTransform.X)"  To="-700" RepeatBehavior="Forever" Duration="0:0:8" />
     </Storyboard>
    </BeginStoryboard>
   </EventTrigger>
 </Canvas.Triggers>

   <TextBlock>This is my looooooooooooooooooooooooooooooooooooooong scrolling text. It goes on and on and on</TextBlock>
   <Image Canvas.Left="570" Source="c:\image.jpg"/>
 </Canvas>

</Border>

</Canvas>

 

 

 

Answer 6

I think steve, that's the way to go...

I have to do some performance tests to see how it works out.

Maybe i'm still a little affraid of all performance problems under VS 2005 with elements and moving them around

looks like the direct-x under the new framework is doing some good job here...

 

thanks.

Answer 7

Since the sample above is using RenderTransform you don't have to worry about triggering a layout pass every time you move the elements, so performance should be pretty good