从左侧以外的点开始动画答案

【问题标题】：Animating from a point other than the left side从左侧以外的点开始动画
【发布时间】：2012-12-04 18:07:50
【问题描述】：

我有一个动画问题，我不知道如何通过 Google 搜索或找到解决方案。我试图基本上创建一个包装选框。我通过在画布中包含以下内容来做到这一点：

|---A部分---|---B部分---|C部分---|

动画从 B 部分的左侧在屏幕右侧开始，并在 B 部分的右侧碰到屏幕左侧时结束。 A 部分和 C 部分是 B 部分的镜像，可产生“环绕”效果。当动画结束时，我将所有内容向右移动到 B 部分的确切宽度。对用户来说，似乎什么都没发生......这一切都只是环绕。

问题是……选框中的某些项目可以隐藏，或者可以更改大小。因此，如果您隐藏一个项目，该项目将从所有三个部分中隐藏。由于东西被隐藏在 A 部分中，并且所有部分的大小都是动态的，因此整个选取框向左移动。

有没有办法将动画“锚定”在某个位置，比如在 B 部分的中间，这样当项目隐藏在 A 部分中时，它不会将 B 和 C 部分滑过？相反，我希望 A 部分向右移动以填充空间。

编辑：让我重新措辞......因为这令人困惑。

我有一个画布，其中包含一个堆栈面板，其中包含另外三个堆栈面板。这三个堆栈面板实际上是相同信息的副本，这给人一种在我制作动画时环绕的选框的错觉。在选取框中添加/删除项目时，堆栈面板中的这些项目会更改，从而调整堆栈面板的整体大小，从而调整画布的大小。我想知道的是，我是否可以“锚定”堆栈面板中的特定位置。我可以在第二个堆栈面板副本中的第一个项目上“锚定”吗？

【问题讨论】：

标签： wpf animation

【解决方案1】：

回答主要问题：

有没有办法使用某些东西来动画画布的位置除了 Canvas.Left 属性

将Canvas 的RenderTransform 属性设置为TranslateTransform 并为TranslateTransform.X 属性设置动画：

<Canvas x:Name="myCanvas" RenderTransformOrigin="0.5,0.5">
    <Canvas.RenderTransform>
        <TranslateTransform X="0"/>
    </Canvas.RenderTransform>  
</Canvas>

然后在代码中：

编辑：此方法调用的第二个参数应该是DoubleAnimation 类型，而不是Duration。当我打字的时候，我一定是在办公桌前睡觉。对不起。

(TranslateTransform)MyCanvas.RenderTransform.BeginAnimation(TranslateTransform.XProperty, new Duration(TimeSpan.FromSeconds(3)));

我希望这会有所帮助。

【讨论】：

确实如此。不敢相信我没有学习 rendertransformorigin 已经走到了这一步。有没有办法锚定控件中的特定点，而不是百分比？例如，如果我想锚定一个可能会四处移动的特定控件，因为它周围的控件可以改变大小。 I'd like it so that when the marquee changes size, whatever is on the screen at the time stays on the screen, instead of moving right or left.这有意义吗？
你能分享你的标记吗？ Canvas 在添加或删除其他项目时，孩子们根本不应该四处走动。您必须有另一个布局面板处理 Canvas 内的位置才能体验您所描述的内容。请发布一些标记，以便我们继续提供帮助。谢谢。
我本可以更好地解释这一点。我有一个画布，其中包含一个堆栈面板，其中包含另外三个堆栈面板。这三个堆栈面板实际上是相同信息的副本，这给人一种在我制作动画时环绕的选框的错觉。在选取框中添加/删除项目时，堆栈面板中的这些项目会更改，从而调整堆栈面板的整体大小，从而调整画布的大小。我想知道的是，我是否可以“锚定”堆栈面板中的特定位置。我可以在第二个堆栈面板副本中的第一个项目上“锚定”吗？
另外，我尝试设置 RenderTransformOrigin。当侯爵重新尺寸时，它仍然不会从中间重新尺寸。一切都相对于左侧移动。
我仍然不确定您在问什么，但让我尝试指出一些可能会有所帮助的事情：

【解决方案2】：

当你详细说明你想要的行为时，我的另一个答案已经过时了，所以请原谅我发布第二个。根据我对上述答案的后面 cmet，考虑以下示例：

<Canvas x:Name="LayoutRoot">

    <Grid x:Name="MarqueePanels">

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Rectangle Grid.Column="0" Height="{Binding ElementName=PrimaryMarquee, Path=ActualHeight}" Width="{Binding ElementName=PrimaryMarquee, Path=ActualWidth}">
            <Rectangle.Fill>
                <VisualBrush Visual="{Binding ElementName=PrimaryMarquee}"/>
            </Rectangle.Fill>
        </Rectangle>

        <StackPanel Grid.Column="1" x:Name="PrimaryMarquee">
            <TextBlock Text="Marquee Item 1"/>
            <TextBlock Text="Marquee Item 2"/>
            <TextBlock Text="Marquee Item 3"/>
        </StackPanel>

        <Rectangle Grid.Column="2" Height="{Binding ElementName=PrimaryMarquee, Path=ActualHeight}" Width="{Binding ElementName=PrimaryMarquee, Path=ActualWidth}">
            <Rectangle.Fill>
                <VisualBrush Visual="{Binding ElementName=PrimaryMarquee}"/>
            </Rectangle.Fill>
        </Rectangle>

    </Grid>

</Canvas>

如上所述，将任何TextBox 元素的Visibility 设置为Hidden 不会导致StackPanel 父级调整大小，但是使用Visibility.Collapsed 将强制Arrange 传递父面板。因此，如果您确实需要使用 StackPanel 来包含视觉元素，那么我建议您根据上面的 cmets 使用 Visibility.Hidden 代替 Visibility.Collapsed。

还要注意使用VisualBrush 来复制选取框内容。这将简化代码，并确保所有 3 种视觉效果始终匹配（您对包含 VisualBrush 的 Rectangle 对象应用的任何定位或转换除外）。

另外，我应该说我个人会使用Canvas 代替StackPanel，因为Canvas 更适合子元素的绝对定位，因此是您提出问题的原因。

克雷格，我真的希望这会有所帮助。我（像这里的大多数人一样）会尽我所能提供帮助。祝你好运！

【讨论】：

它帮助我学习了一些关于 WPF 的新知识，但我认为它不能解决我的问题。视觉画笔删除了我在选框中需要的功能... IE，点击的能力。 Visibility.Hidden 也不是我想要的……我需要折叠这些项目。我只需要物品向内折叠。我拥有有关股票工作的所有内容，除了在选选更改大小（删除，添加，更改等）时发生的情况。一切都向左移动

【解决方案3】：

知道了。

我将边距设置为 -(theControl.ActualWidth / 2)。我所有的代码都将所有内容都移回相同的数量以进行补偿。

然后我在控件上有一个 SizeChanged 的事件处理程序，我在其中设置了这个值。如果控件的大小发生变化，则边距会更新，并且所有内容都集中在控件的中间。如果您想要在控件中设置动画中心的特定点，则使用该点而不是上述中点。

【讨论】：