CODEWITHSUNDEEP
c#xamlanimationcoordinates
Phu Minh Pham
Phu Minh Pham

Reputation: 1055

Move a rectangle on a canvas in WPF from code behind

In my XAML i have a listbox and some textboxes in a grid and a reactangle in a canvas:

Title="MainWindow" Height="350" Width="500" WindowStartupLocation="CenterScreen">
<Grid>
<ListBox HorizontalAlignment="Left"
         Margin="12,12,0,12"
         Name="listBoxContainer"
         Width="120">
    <ListBoxItem Content="Item1" />
    <ListBoxItem Content="Item2" />
    <ListBoxItem Content="Item3" />
</ListBox>

<TextBox Height="23"
         Margin="138,12,85,0"
         Name="textBoxAddress"
         VerticalAlignment="Top" />

<TextBox Margin="138,41,85,12"
         Name="textBoxMsg" />

<Button Content="Button"
        Name="buttonAnimation"
        Width="75"
        Margin="0,10,5,0"
        Height="23"
        VerticalAlignment="Top"
        HorizontalAlignment="Right"
        Click="Button1Click" />

<Canvas Name="CanvasAnimation">
    <Rectangle Canvas.Left="408" 
               Canvas.Top="140" 
               Height="50" 
               Name="rectAnimation" 
               Stroke="Black" 
               Width="50" />
</Canvas>
</Grid>

From my code behind, i can move the rectangle from its position to a distance:

private void Button1Click(object sender, RoutedEventArgs e)
{
    var trs = new TranslateTransform();
    var anim3 = new DoubleAnimation(0, -200, TimeSpan.FromSeconds(2));
    trs.BeginAnimation(TranslateTransform.XProperty, anim3);
    trs.BeginAnimation(TranslateTransform.YProperty, anim3);
    CanvasAnimation.RenderTransform = trs;
}

I would like to know how i can move the rectangle from its position to another position by coordinates? Like having the rectangle move to the position of the listbox or textbox

Upvotes: 2

Views: 10922

Answers (2)

Nels
Nels

Reputation: 321

Sorry for the late answer, but it sounds like you want to set a dependency property. 

rectAnimation.SetValue(Canvas.TopProperty, 0.0);
rectAnimation.SetValue(Canvas.LeftProperty, 0.0);

This will (instantly) place the rectangle at the top and left of the containing canvas.

Upvotes: 0

nvoigt
nvoigt

Reputation: 77354

Please note that the below code assumes the coordinates for the button on the canvas and on the form are the same. This is not optimal, you should find a better solution, like putting the button on the canvas.

private void Button1Click(object sender, RoutedEventArgs e)
{
  //Point relativePoint = buttonAnimation.TransformToAncestor(this).Transform(new Point(0, 0));
  Point relativePoint = buttonAnimation.TransformToVisual(CanvasAnimation).Transform(new Point(0, 0));

  var moveAnimX = new DoubleAnimation(Canvas.GetLeft(rectAnimation), relativePoint.X, new Duration(TimeSpan.FromSeconds(10)));
  var moveAnimY = new DoubleAnimation(Canvas.GetTop(rectAnimation), relativePoint.Y, new Duration(TimeSpan.FromSeconds(10)));

  rectAnimation.BeginAnimation(Canvas.LeftProperty, moveAnimX);
  rectAnimation.BeginAnimation(Canvas.TopProperty, moveAnimY);
}

Upvotes: 3

Related Questions