将 XAML 元素从一个位置移动到另一个位置
Moving a XAML Element from One Postion to another
我采用了以下 tutorial as a good start point to animation and also explored the toolkit Offset option 但发现它在某种程度上很难实现我想要的,除非另有证明。
目标:
单击矩阵按钮后,将对象从其起始位置移动到单击按钮的位置,然后 return 对象回到其初始位置。
挑战:主要挑战可能是确定每个矩阵元素(按钮)的确切位置;元素相对于 Grid 的位置非常清楚,例如 Grid.Row="1" Grid.Column="2",但是关于 Canvas 和一般的动画...没有主意!
根据下面的代码,如何将EllipseFigure从方格6移动到方格1?
<Canvas>
<Canvas.Resources>
<Storyboard x:Name="myStoryboard">
<!-- Animate the center point of the ellipse. -->
<PointAnimation EnableDependentAnimation="True" Storyboard.TargetProperty="Center"
Storyboard.TargetName="EllipseFigure"
Duration="0:0:5"
From="1,2"
To="0,0"
RepeatBehavior="Forever" />
</Storyboard>
</Canvas.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="BorderBrush" Value="Yellow" />
<Setter Property="BorderThickness" Value="5" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Style>
<Style TargetType="TextBox">
<Setter Property="BorderBrush" Value="Yellow" />
<Setter Property="BorderThickness" Value="5" />
</Style>
</Grid.Resources>
<Button Grid.Row="0" Grid.Column="0" Content="1" />
<Button Grid.Row="0" Grid.Column="1" Content="2" />
<Button Grid.Row="0" Grid.Column="2" Content="3" />
<Button Grid.Row="1" Grid.Column="0" Content="4" />
<Button Grid.Row="1" Grid.Column="1" Content="5" />
<Button Grid.Row="1" Grid.Column="2" Content="6" />
<Path Grid.Row="1" Grid.Column="2" Fill="Blue" PointerPressed="ButtonClick">
<Path.Data>
<!-- Describe an ellipse. -->
<EllipseGeometry x:Name="EllipseFigure"
Center="20,20" RadiusX="15" RadiusY="15" />
</Path.Data>
</Path>
</Grid>
</Canvas>
代码隐藏:
private void ButtonClick(object sender, RoutedEventArgs e)
{
myStoryboard.Begin();
}
使用您拥有的 Storyboard 方法,您可以通过获取按钮和球的位置并设置动画的 To 属性 来完成此操作。您还可以通过将 AutoReverse 设置为 true
来 return 球
<Storyboard x:Name="myStoryboard">
<PointAnimation Storyboard.TargetProperty="Center"
Storyboard.TargetName="EllipseFigure"
Duration="0:0:1"
AutoReverse="True"
EnableDependentAnimation="True"/>
</Storyboard>
确保您订阅了按钮的 Click 事件,而不是球的 PointerPressed。
private void Button_Click(object sender, RoutedEventArgs e)
{
var button = (Button)sender;
// Get the position (top left) of the Button
GeneralTransform transform = button.TransformToVisual(this);
Point buttonPosition = transform.TransformPoint(new Point(0, 0));
// Get the center of the button
Point buttonCenter = new Point(buttonPosition.X + (button.ActualWidth / 2), buttonPosition.Y + (button.ActualHeight / 2));
// Get the position of the ball
transform = Ball.TransformToVisual(this);
Point ballPosition = transform.TransformPoint(new Point(0, 0));
// Get the center of the ball
Point ballCenter = new Point(ballPosition.X + (EllipseFigure.Center.X), ballPosition.Y + (EllipseFigure.Center.Y));
// The animation acts like it's at 0,0. calculate position to go to
Point to = new Point(buttonCenter.X - ballCenter.X, buttonCenter.Y - ballCenter.Y);
var storyBoard = (Storyboard)Root.Resources["myStoryboard"];
var animation = (PointAnimation)storyBoard.Children[0];
animation.To = to;
storyBoard.Begin();
}
请注意,我给你的 Path 元素一个 x:Name of "Ball"
我采用了以下 tutorial as a good start point to animation and also explored the toolkit Offset option 但发现它在某种程度上很难实现我想要的,除非另有证明。
目标: 单击矩阵按钮后,将对象从其起始位置移动到单击按钮的位置,然后 return 对象回到其初始位置。
挑战:主要挑战可能是确定每个矩阵元素(按钮)的确切位置;元素相对于 Grid 的位置非常清楚,例如 Grid.Row="1" Grid.Column="2",但是关于 Canvas 和一般的动画...没有主意!
根据下面的代码,如何将EllipseFigure从方格6移动到方格1?
<Canvas>
<Canvas.Resources>
<Storyboard x:Name="myStoryboard">
<!-- Animate the center point of the ellipse. -->
<PointAnimation EnableDependentAnimation="True" Storyboard.TargetProperty="Center"
Storyboard.TargetName="EllipseFigure"
Duration="0:0:5"
From="1,2"
To="0,0"
RepeatBehavior="Forever" />
</Storyboard>
</Canvas.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="BorderBrush" Value="Yellow" />
<Setter Property="BorderThickness" Value="5" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Style>
<Style TargetType="TextBox">
<Setter Property="BorderBrush" Value="Yellow" />
<Setter Property="BorderThickness" Value="5" />
</Style>
</Grid.Resources>
<Button Grid.Row="0" Grid.Column="0" Content="1" />
<Button Grid.Row="0" Grid.Column="1" Content="2" />
<Button Grid.Row="0" Grid.Column="2" Content="3" />
<Button Grid.Row="1" Grid.Column="0" Content="4" />
<Button Grid.Row="1" Grid.Column="1" Content="5" />
<Button Grid.Row="1" Grid.Column="2" Content="6" />
<Path Grid.Row="1" Grid.Column="2" Fill="Blue" PointerPressed="ButtonClick">
<Path.Data>
<!-- Describe an ellipse. -->
<EllipseGeometry x:Name="EllipseFigure"
Center="20,20" RadiusX="15" RadiusY="15" />
</Path.Data>
</Path>
</Grid>
</Canvas>
代码隐藏:
private void ButtonClick(object sender, RoutedEventArgs e)
{
myStoryboard.Begin();
}
使用您拥有的 Storyboard 方法,您可以通过获取按钮和球的位置并设置动画的 To 属性 来完成此操作。您还可以通过将 AutoReverse 设置为 true
来 return 球<Storyboard x:Name="myStoryboard">
<PointAnimation Storyboard.TargetProperty="Center"
Storyboard.TargetName="EllipseFigure"
Duration="0:0:1"
AutoReverse="True"
EnableDependentAnimation="True"/>
</Storyboard>
确保您订阅了按钮的 Click 事件,而不是球的 PointerPressed。
private void Button_Click(object sender, RoutedEventArgs e)
{
var button = (Button)sender;
// Get the position (top left) of the Button
GeneralTransform transform = button.TransformToVisual(this);
Point buttonPosition = transform.TransformPoint(new Point(0, 0));
// Get the center of the button
Point buttonCenter = new Point(buttonPosition.X + (button.ActualWidth / 2), buttonPosition.Y + (button.ActualHeight / 2));
// Get the position of the ball
transform = Ball.TransformToVisual(this);
Point ballPosition = transform.TransformPoint(new Point(0, 0));
// Get the center of the ball
Point ballCenter = new Point(ballPosition.X + (EllipseFigure.Center.X), ballPosition.Y + (EllipseFigure.Center.Y));
// The animation acts like it's at 0,0. calculate position to go to
Point to = new Point(buttonCenter.X - ballCenter.X, buttonCenter.Y - ballCenter.Y);
var storyBoard = (Storyboard)Root.Resources["myStoryboard"];
var animation = (PointAnimation)storyBoard.Children[0];
animation.To = to;
storyBoard.Begin();
}
请注意,我给你的 Path 元素一个 x:Name of "Ball"