將XAML元素從一個位置移動到另一個位置

我將以下tutorial作爲動畫的一個很好的起點，並且探索了toolkit Offset option，但發現它完成我想要的操作非常複雜，除非另有證明。將XAML元素從一個位置移動到另一個位置

目標：在點擊一個按鈕矩陣，從其起始位置移動所述對象到所述點擊的按鈕的位置，然後返回該對象返回到其初始位置。

挑戰：主要的挑戰可能是確定每個矩陣元素的確切位置（按鈕）;元素在網格方面的位置非常清晰，例如Grid.Row =「1」Grid.Column =「2」，但是關於Canvas和動畫一般......不知道！

根據下面的代碼，如何將橢圓圖從方形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(); 
    }

來源

2017-05-19 usefulBee

使用你的故事板的方法，你可以通過獲取按鈕和球的位置做到這一點，並設置到動畫的屬性。您還可以通過自動翻轉設置爲true

<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：「球」名稱

來源

2017-05-19 22:29:51

將XAML元素從一個位置移動到另一個位置

回答

相關問題