Basic WPF Animation Question

Question

How can I scroll the label within the border element. I want it to scroll so it roll off the left and eventually comes back on the right (similar to having a scroll tag within a td).   I'm hitting a brick wall at stage one, I figure this would happen by manipulating the margin property (via animation eventually) however say I set to -5,-5,-0,0 it doesn't clip it just moves it out of the element?

<Grid>
      <Border Margin="20,20,20,20" BorderThickness="2" BorderBrush="#78C730">

        <Label>Scrolling Text</Label>
      </Border>
       
    </Grid>

Answer 1

Is this what you wanted?  May be a little rough, but you can clean the code up if this is what you want...

 

Code Snippet

     <Border x:Name="border" Margin="20,20,20,20" BorderThickness="2" BorderBrush="#78C730">

        <Label x:Name="label">
            <Label.RenderTransform>
                <TranslateTransform x:Name="translate2" />
            </Label.RenderTransform>
            <Label.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation
                                From="{Binding ElementName=border, Path=ActualWidth}" To="-300"
                                Storyboard.TargetName="translate2"
                                Storyboard.TargetProperty="X"
                                Duration="0:0:5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Label.Triggers>Scrolling Text</Label>
      </Border>

 

 

Answer 2

Many thanks John, however its not quite what I want.

When the text scrolls over the border brush line it should disspear (like the border region is the only visible part one should be able to see the text)?

Answer 3

Maybe this will work..  setting ClipToBounds on the Border element

 

Code Snippet

        <Border Width="150" Height="150" x:Name="border" Margin="20,20,20,20" ClipToBounds="true" BorderThickness="2" BorderBrush="#78C730">

        <Label x:Name="label">
            <Label.RenderTransform>
                <TranslateTransform x:Name="translate2" />
            </Label.RenderTransform>
            <Label.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation
                                From="{Binding ElementName=border, Path=ActualWidth}" To="-300"
                                Storyboard.TargetName="translate2"
                                Storyboard.TargetProperty="X"
                                Duration="0:0:5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Label.Triggers>Scrolling Text</Label>
      </Border>

 

 

Answer 4

Matt,

Thanks that resolves the over scrolling bit One more problem, is that the "Binding ElelmentName=border, Path=ActualWidth" seem to be evaluating to zero (it just scroll left from its current position - same effect as hardcoding zero).

 

<DoubleAnimation

From="{Binding ElementName=border, Path=ActualWidth}" To="-300"

Storyboard.TargetName="translate2"

Storyboard.TargetProperty="X"

Duration="0:0:5" />

Answer 5

i wasn't to sure what you wanted there and that will work if you have a width set on the border.  The idea had with that is that the starting point would be == border.actualwidth, essentially starting at the far right of the border.  That value should be what ever you want (From="200" or something like that), i put the sample together pretty quick.  Sorry for any confusion.