Basic WPF Animation Question

Friday, July 20, 2007 11:05 PMMattCheshire

0
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>
- Reply
- Quote

Answers

Saturday, July 21, 2007 3:55 PMMatt Hohn

0
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>
- Reply
- Quote

All Replies

Saturday, July 21, 2007 3:20 PMMatt Hohn

0
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>
- Reply
- Quote
Saturday, July 21, 2007 3:52 PMMattCheshire

0
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)?
- Reply
- Quote
Saturday, July 21, 2007 4:01 PMMattCheshire

0
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" />
- Reply
- Quote
Saturday, July 21, 2007 4:13 PMMatt Hohn

0
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.
- Reply
- Quote