Question

Grid.SetColumn(Image, 0);

使用具有1行和3个不同列的网格，上面的命令可用于将元素（在本例中为Image）从一列移动到下一列。例如，从列0-1,1-0,1-2和2-1移动。该命令效果很好，但图像传送＆＃39;从一列到下一列是相当静态的。

为了完善运动，下面的代码可以用来为图像运动设置动画：

await Image.TranslateTo(-100, 0, 1000); // Move image left

然而，这需要摆弄从一列到另一列的准确距离。不确定使用静态数字是否会在不同大小的设备上转换为相同的视觉变化，因此我就是这样。

有没有办法动画在列之间移动的元素，利用Grid.SetColumn进行精确移动？或者，有没有办法计算X Grid.SetColumn正在制作和使用它的变化？

Answer 1

由于ActualWidth是Xamarin中的内部：https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Core/ColumnDefinition.cs，我们无法使用它来在运行时获取每列的宽度。它可能不完美，但我们也可以通过在每个列的根位置添加StackLayout来获得宽度。然后我们可以使用StackLayout的宽度来获得宽度。

假设您要翻译的图像位于第0列。这是我在列之间移动的方式：

//get each column's width by stackLayout
var firstWidth = FirstStack.Width;
var secondWidth = SecondStack.Width;
var thirdWidth = ThirdStack.Width;

//put the distances we need to translate in a list, notice to add the ColumnSpacing.
List<double> distanceList = new List<double>();
distanceList.Add(0);
distanceList.Add(firstWidth + MyGrid.ColumnSpacing);
distanceList.Add(firstWidth + secondWidth + MyGrid.ColumnSpacing * 2);

然后，如果要从（任何列）移动 - 0，请使用

await Image.TranslateTo(distanceList[0], 0);
//any - 1
await Image.TranslateTo(distanceList[1], 0);
...

这适用于第0列中的项目，对于1或2，您需要修改distanceList。它可能有点复杂，但可以满足您的要求。

动画元素移动网格中的列？

1 个答案: