WPF 边距厚度

Question

背景： 我正在将图像加载到水平显示的堆栈面板（称为 MainStack）中（为了论证，显示 10 个图像），视图中只有 4 个图像的空间。当我从列表中加载图像时，我将每个图像的宽度设置为 300，以便它们都位于相同大小的框中。

我想使用堆栈面板的边距（左）属性将图像从右向左移动。我希望向左滚动与每个图像的宽度完全相同的量（以 4 秒延迟循环），直到最后一个图像出现在视图中。这是我的边距动画代码：

    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()

奇怪的事情正在发生。堆栈面板向左移动，但仅移动了图像宽度的大约一半。

到底是怎么回事？！？

/* 编辑 */ 根据 HB 的建议，我尝试实现 TranslateTransform 但没有取得太大成功。

谁能看出这段代码有什么问题吗？

    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()

似乎什么也没有发生。 本

Answer 1

我认为您应该尝试将整个堆栈面板放入画布中，然后仅对 Canvas.Left 属性进行动画处理以滚动图像。

Answer 2

另一个选择是使用水平 ListBox，然后您可以为 ScrollViewer 设置动画。如果您想尝试这种方式，这里的链接可能会有所帮助： WPF - Animate ListBox.ScrollViewer .水平偏移？。