试图动画使其下方的另一个矩形向上移动？

Question

<StackPanel x:Name="rootStackPanel" Background="{ThemeResource SystemControlAcrylicWindowBrush}" Padding="0,48">

    <Rectangle x:Name="sampleRectangle" Width="200" Height="300" Fill="DeepPink" DoubleTapped="Rectangle_DoubleTapped" RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
            <CompositeTransform TranslateY="-100"/>
        </Rectangle.RenderTransform>
    </Rectangle>
    <Rectangle x:Name="otherRectangle" Width="200" Height="200" Fill="Cyan"/>

</StackPanel>

我希望实现动态外观，当粉红色矩形向上移动时，蓝色矩形占据空间左侧。这样它总是触及粉红色的矩形。

我尝试过操纵视觉图层提供的偏移和缩放属性，但实际高度不受任何属性的影响，因此另一个矩形只停留在原始位置。现在我正在尝试使用故事板动画来实现这种效果。但正如您所看到的，转换属性（以及scale属性）不会以某种方式影响控件的实际容器，而是使其中的内容转移到任何转换。

那么，我需要操作哪些属性来实现stackpanel中的另一个矩形随着第一个矩形的变化而动态移动的效果？

我知道调整宽度或高度属性会导致我想要实现的目标但是对于可能存在文本框而不是简单矩形的更复杂场景，有一种奇怪的占位符文本动画（缩小文字），这是我不想要的东西！

Answer 1

  

那么，我需要操作哪些属性来实现stackpanel中的另一个矩形随着第一个矩形的变化而动态移动的效果？

您可以使用Microsoft.Toolkit.Uwp.UI.Animations.Behaviors直接实现此功能。在为矩形设置动画之前，您需要获得每个矩形的绝对位置，如下所示。

var scgt = sampleRectangle.TransformToVisual(Window.Current.Content);
Point screenCoords = scgt.TransformPoint(new Point(0, 0));

var ddv = otherRectangle.TransformToVisual(Window.Current.Content);
Point Res = ddv.TransformPoint(new Point(0, 0));

如果您希望粉红色矩形向上移动，您可以Offset偏移Y值

sampleRectangle.Offset(offsetX: 0, offsetY: -(float)screenCoords.Y - (float)sampleRectangle.Height, duration: 2500).Start();

然后像跟随

一样动画otherRectangle

 otherRectangle.Offset(offsetX: -(float)Res.X, offsetY: -(float)Res.Y).Scale(scaleX: 2, scaleY: 2).Start();

缩放scaleX时，您需要保持scaleY与TextBox相等。否则，TextBox将会变形。