WPF Margin Thickness

Question

Background: I'm loading images into a Stack Panel (called MainStack) displayed horizontally (for argument sake, 10 images) with only room for 4 images in view. As I load the images from the List I'm setting the width of each to 300 so they're all in the same size box.

I want to move the images from right to left using the Stack Panel's Margin (left) property. I want the appearance of scrolling left by exactly the same amount of the width of each image (looped with 4 second delay) until the last image is in view. Here's my code for the Margin animation:

    Dim result As New Storyboard
    Dim animation As New ThicknessAnimation
    animation.From = MainStack.Margin
    animation.EasingFunction = New PowerEase() With {.EasingMode = EasingMode.EaseInOut, .Power = 3}
    animation.To = New Thickness(-300, 0, 0, 0)
    animation.Duration = New Duration(TimeSpan.FromSeconds(1.5))

    Storyboard.SetTarget(animation, MainStack)
    Storyboard.SetTargetProperty(animation, New PropertyPath("Margin"))
    result.Children.Add(animation)
    result.Begin()

Strange thing is happening. The Stack Panel is moving to the left but only by about half the width of the image.

What is going on?!?

/* edit */ As per H.B. suggestion, I've tried to implement a TranslateTransform but not having much success.

Can anyone see any problems with this code?

    Dim translatePosition = New Point(300, 0)

    RenderTransform = New TranslateTransform()
    Dim d As New Duration(New TimeSpan(0, 0, 0, 1, 30))
    Dim x As New DoubleAnimation(translatePosition.X, d)

    Storyboard.SetTarget(x, MainStack)
    Storyboard.SetTargetProperty(x, New PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"))

    Dim sb As New Storyboard()
    sb.Children.Add(x)
    sb.Begin()

Nothing seems to be happening. Ben

Why not apply a TranslateTransform and animate that instead? — H.B., Aug 30 '11 at 12:36
Hi H.B. Thanks for the comment, I'm looking into it. Are you able to suggest any code that I can use? I'm reading TranslateTransform doesn't place nicely with Storyboard. — Ben, Aug 30 '11 at 12:55
http://stackoverflow.com/questions/2957582/wpf-storyboard-settarget-vs-storyboard-settargetname — Ben, Aug 30 '11 at 13:08
Well, you only have one animation, hence you do not need a Storyboard anyway, just use `BeginAnimation` on the transform. — H.B., Aug 30 '11 at 13:21

score 0 · Answer 1 · answered Aug 30 '11 at 13:54

0

I think you should try putting your entire stackpanel in a canvas and just animating the Canvas.Left property to scroll the images.

answered Aug 30 '11 at 13:54

mdm20

4,475
2
22
24

score 0 · Answer 2 · edited May 23 '17 at 12:19

0

Another option for you is to use a horizontal ListBox, then you can animate the ScrollViewer. If you want to try it this way, here's a link that may help: WPF - Animate ListBox.ScrollViewer.HorizontalOffset?.

edited May 23 '17 at 12:19

Community

1
1

answered Aug 30 '11 at 14:48

Josh

2,955
1
19
28

WPF Margin Thickness

2 Answers2