locked
start animation by after clicking two elements RRS feed

  • Question

  • Hello,

    In my application, I need to swap the positions of two rectangles by clicking on both of them. I mean, I have 5 rectangles and I want to allow user to swap the positions of any two rectangles just by clicking on two of them. How can I do this??

    Need urgent help !!

    Thanks in advance,

    Warm regards,

    Hrishi

    Saturday, August 20, 2011 6:53 AM

Answers

  • Can anybody please help me out in this problem??

    As per your previous post description about your requirement, please follow the below code

    *Note : make one change in place of child canvas i used stackpanel.

    <UserControl x:Class="MovingRectangles.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
    
        <Grid x:Name="LayoutRoot" Background="White">
            <Button x:Name="BtnClick" Content="Click to Arrange" Click="BtnClick_Click" Margin="175,12,111,265" Height="20" Width="150"></Button>
            <Canvas>
                <StackPanel x:Name="One" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Canvas.Left="48" Canvas.Top="58">
                    <Rectangle Fill="Aqua"  Width="100" Height="100" Stroke="Black" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"></Rectangle>
                    <TextBlock Width="63" Height="18" Text="Aqua" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Margin="0,-97,0,0" />
                </StackPanel>
                <StackPanel x:Name="Two" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"  Canvas.Left="318" Canvas.Top="36">
                    <Rectangle Fill="Beige"  Width="100" Height="100" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Stroke="Black" ></Rectangle>
                    <TextBlock Width="63" Height="18" Text="Beige" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Margin="0,-97,0,0" ></TextBlock>
                </StackPanel>
                <StackPanel x:Name="Three" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Canvas.Left="406" Canvas.Top="178">
                    <Rectangle Fill="Coral" Width="100" Height="100" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"  Stroke="Black" ></Rectangle>
                    <TextBlock Width="67" Height="18" Text="Coral" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Margin="0,-97,0,0" ></TextBlock>
                </StackPanel>   
    			<StackPanel x:Name="Five" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Canvas.Left="14" Canvas.Top="194">
                    <Rectangle Fill="DarkMagenta" Width="103" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Height="100" Stroke="Black"></Rectangle>
                    <TextBlock Width="83" Height="18" Text="DarkMagenta" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Margin="0,-97,0,0"></TextBlock>
                </StackPanel>			
                <StackPanel x:Name="Six" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Canvas.Left="213" Canvas.Top="138">
                    <Rectangle Fill="DeepPink" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Width="100" Height="100" Stroke="Black" ></Rectangle>
                    <TextBlock Width="78" Height="18" Text="DeepPink" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Margin="0,-97,0,0" ></TextBlock>
                </StackPanel>            
    
            </Canvas>       
        </Grid>
    </UserControl>
    
    
    
    
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    
    namespace MovingRectangles
    {
        public partial class MainPage : UserControl
        {
            StackPanel _firstRect;        
            bool _first = false;
            double _firstLeft=0;
            double _firstTop=0;
    
            public MainPage()
            {
                InitializeComponent();
            }
    
            private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                UIElement  UI = sender as UIElement;
                StackPanel _rect = null;
               
                if (UI != null && UI is Canvas)
                {
                    _rect = UI as StackPanel;
                    GetAnimation(_rect);
                }
                else if (UI != null && UI is Rectangle)
                {
                    Rectangle ele = UI as Rectangle;
                    _rect = ele.Parent as StackPanel;
                    GetAnimation(_rect);
                }
                else if (UI != null && UI is TextBlock)
                {
                    TextBlock ele = UI as TextBlock;
                    _rect = ele.Parent as StackPanel;
                    GetAnimation(_rect);
                }
    
                
            }
    
            private void GetAnimation (StackPanel _rect)
            {
                double _left = (double) _rect.GetValue(Canvas.LeftProperty);
                double _top = (double) _rect.GetValue(Canvas.TopProperty);
                if (!_first)
                {
                    _firstRect = _rect;
                    _firstLeft = _left;
                    _firstTop = _top;
                    _first = true;
                }
                else if (_first)
                {
                    Storyboard _storyBoard = new Storyboard();
    
                    DoubleAnimation _doubleAnimationFirstLeft = new DoubleAnimation();
                    _doubleAnimationFirstLeft.To = _left;
                    _doubleAnimationFirstLeft.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(_doubleAnimationFirstLeft, _firstRect);
                    Storyboard.SetTargetProperty(_doubleAnimationFirstLeft, new PropertyPath(Canvas.LeftProperty));
    
                    DoubleAnimation _doubleAnimationFirstTop = new DoubleAnimation();
                    _doubleAnimationFirstTop.To = _top;
                    _doubleAnimationFirstTop.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(_doubleAnimationFirstTop, _firstRect);
                    Storyboard.SetTargetProperty(_doubleAnimationFirstTop, new PropertyPath(Canvas.TopProperty));
    
    
                    DoubleAnimation _doubleAnimationSecondLeft = new DoubleAnimation();
                    _doubleAnimationSecondLeft.To = _firstLeft;
                    _doubleAnimationSecondLeft.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(_doubleAnimationSecondLeft, _rect);
                    Storyboard.SetTargetProperty(_doubleAnimationSecondLeft, new PropertyPath(Canvas.LeftProperty));
    
                    DoubleAnimation _doubleAnimationSecondTop = new DoubleAnimation();
                    _doubleAnimationSecondTop.To = _firstTop;
                    _doubleAnimationSecondTop.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(_doubleAnimationSecondTop, _rect);
                    Storyboard.SetTargetProperty(_doubleAnimationSecondTop, new PropertyPath(Canvas.TopProperty));
    
    
                    _storyBoard.Children.Add(_doubleAnimationFirstLeft);
                    _storyBoard.Children.Add(_doubleAnimationFirstTop);
                    _storyBoard.Children.Add(_doubleAnimationSecondLeft);
                    _storyBoard.Children.Add(_doubleAnimationSecondTop);
    
                    _storyBoard.Begin();
                    _firstRect = null;
                    _firstLeft = 0;
                    _firstTop = 0;
                    _first = false;
                }
            }
    
            private void BtnClick_Click (object sender, RoutedEventArgs e)
            {
                Storyboard _storyBoard = new Storyboard();
                
                _storyBoard.Children.Add(AnimationLeft(100,One));
                _storyBoard.Children.Add(AnimationTop(100, One));
    
                _storyBoard.Children.Add(AnimationLeft(220, Two));
                _storyBoard.Children.Add(AnimationTop(100, Two));
    
                _storyBoard.Children.Add(AnimationLeft(340, Three));
                _storyBoard.Children.Add(AnimationTop(100, Three));
    
    
                _storyBoard.Children.Add(AnimationLeft(100, Five));
                _storyBoard.Children.Add(AnimationTop(220, Five));
    
    
                _storyBoard.Children.Add(AnimationLeft(220, Six));
                _storyBoard.Children.Add(AnimationTop(220, Six));
                _storyBoard.Begin();
                
              
            }
    
            private DoubleAnimation AnimationLeft(double to,StackPanel stkpnl)
            {
                DoubleAnimation _doubleAnimationFirstLeft = new DoubleAnimation();
                _doubleAnimationFirstLeft.To = to;
                _doubleAnimationFirstLeft.Duration = TimeSpan.FromSeconds(1);
                Storyboard.SetTarget(_doubleAnimationFirstLeft, stkpnl);
                Storyboard.SetTargetProperty(_doubleAnimationFirstLeft, new PropertyPath(Canvas.LeftProperty));
                return _doubleAnimationFirstLeft;
            }
    
            private DoubleAnimation AnimationTop (double to, StackPanel stkpnl)
            {
                DoubleAnimation _doubleAnimationFirstLeft = new DoubleAnimation();
                _doubleAnimationFirstLeft.To = to;
                _doubleAnimationFirstLeft.Duration = TimeSpan.FromSeconds(1);
                Storyboard.SetTarget(_doubleAnimationFirstLeft, stkpnl);
                Storyboard.SetTargetProperty(_doubleAnimationFirstLeft, new PropertyPath(Canvas.TopProperty));
                return _doubleAnimationFirstLeft;
            }
        }
    }
    
    Thursday, August 25, 2011 4:40 AM

All replies

  • Hai !!! Deo

                You can do one thing just create two rectangle and make them drag and drop. SO easily u can chage place for both..

    It will be very easy to do and here is a example to create....

    http://www.85turns.com/2008/08/13/drag-and-drop-silverlight-example/

    http://www.codeproject.com/KB/silverlight/Drag_and_Drop_Manager_Sl.aspx

    Hope your problem will solve..


    Thanks & Regards,
    Sanjay
    Please "Mark as Answer",If it helped you.Bcz It may help others too.
    Saturday, August 20, 2011 9:03 AM
  • I need to swap the positions of two rectangles by clicking on both of them

    quite easy........

    Have a canvas and add rectangles as per your requirement using the canvas.left and canvas.top attached properties.

    when a user clicks on the first (any) rectangle saves the rectangle and its left and right properties and assign it to second clicked rectangle.

    I did a sample example for you, follow this.

    <UserControl x:Class="MovingRectangles.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
    
        <Grid x:Name="LayoutRoot" Background="White">
            <Canvas>
                <Rectangle Fill="Aqua" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Width="100" Height="100" Stroke="Black" Canvas.Left="100" Canvas.Top="100"></Rectangle>
                <Rectangle Fill="Beige" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Width="100" Height="100" Stroke="Black" Canvas.Left="220" Canvas.Top="100"></Rectangle>
                <Rectangle Fill="Coral" Width="100" Height="100" Canvas.Left="340" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Stroke="Black" Canvas.Top="100"></Rectangle>
                <Rectangle Fill="DarkGreen" Width="100" Height="100" Canvas.Left="460" Stroke="Black" Canvas.Top="100" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"></Rectangle>
                
                <Rectangle Fill="DarkMagenta" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Width="100" Height="100" Stroke="Black" Canvas.Left="100" Canvas.Top="220"></Rectangle>
                <Rectangle Fill="DeepPink" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Width="100" Height="100" Stroke="Black" Canvas.Left="220" Canvas.Top="220"></Rectangle>
                <Rectangle Fill="DarkRed" Width="100" Height="100" Canvas.Left="340" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Stroke="Black" Canvas.Top="220"></Rectangle>
                <Rectangle Fill="Gold" Width="100" Height="100" Canvas.Left="460" Stroke="Black" Canvas.Top="220" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"></Rectangle>
            </Canvas>
        </Grid>
    </UserControl>
    
    
    
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    
    namespace MovingRectangles
    {
        public partial class MainPage : UserControl
        {
            Rectangle _firstRect;        
            bool _first = false;
            double _firstLeft=0;
            double _firstTop=0;
    
            public MainPage()
            {
                InitializeComponent();
            }
    
            private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                Rectangle _rect = sender as Rectangle;
                double _left = (double)_rect.GetValue(Canvas.LeftProperty);
                double _top = (double)_rect.GetValue(Canvas.TopProperty);
                if (!_first)
                {              
                    _firstRect = _rect;
                    _firstLeft = _left;
                    _firstTop = _top;
                    _first = true;
                }
                else if (_first)
                {
                    _firstRect.SetValue(Canvas.LeftProperty, _left);
                    _firstRect.SetValue(Canvas.TopProperty, _top);
                    _rect.SetValue(Canvas.LeftProperty, _firstLeft);
                    _rect.SetValue(Canvas.TopProperty, _firstTop);
                    _firstRect = null;
                    _firstLeft = 0;
                    _firstTop = 0;
                    _first = false;
                }
            }
        }
    }
    
    Saturday, August 20, 2011 11:06 AM
  • Dear deodhar.hrishi,

    My previous post was without animation, just change the .cs code to have the animation on rectangles.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    
    namespace MovingRectangles
    {
        public partial class MainPage : UserControl
        {
            Rectangle _firstRect;        
            bool _first = false;
            double _firstLeft=0;
            double _firstTop=0;
    
            public MainPage()
            {
                InitializeComponent();
            }
    
            private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                Rectangle _rect = sender as Rectangle;
                double _left = (double)_rect.GetValue(Canvas.LeftProperty);
                double _top = (double)_rect.GetValue(Canvas.TopProperty);
                if (!_first)
                {              
                    _firstRect = _rect;
                    _firstLeft = _left;
                    _firstTop = _top;
                    _first = true;
                }
                else if (_first)
                {                
                    Storyboard _storyBoard = new Storyboard();
    
                    DoubleAnimation _doubleAnimationFirstLeft = new DoubleAnimation();
                    _doubleAnimationFirstLeft.To = _left;
                    _doubleAnimationFirstLeft.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(_doubleAnimationFirstLeft, _firstRect);
                    Storyboard.SetTargetProperty(_doubleAnimationFirstLeft, new PropertyPath(Canvas.LeftProperty));
    
                    DoubleAnimation _doubleAnimationFirstTop = new DoubleAnimation();
                    _doubleAnimationFirstTop.To = _top;
                    _doubleAnimationFirstTop.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(_doubleAnimationFirstTop, _firstRect);
                    Storyboard.SetTargetProperty(_doubleAnimationFirstTop, new PropertyPath(Canvas.TopProperty));
    
    
                    DoubleAnimation _doubleAnimationSecondLeft = new DoubleAnimation();
                    _doubleAnimationSecondLeft.To = _firstLeft;
                    _doubleAnimationSecondLeft.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(_doubleAnimationSecondLeft, _rect);
                    Storyboard.SetTargetProperty(_doubleAnimationSecondLeft, new PropertyPath(Canvas.LeftProperty));
    
                    DoubleAnimation _doubleAnimationSecondTop = new DoubleAnimation();
                    _doubleAnimationSecondTop.To = _firstTop;
                    _doubleAnimationSecondTop.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(_doubleAnimationSecondTop, _rect);
                    Storyboard.SetTargetProperty(_doubleAnimationSecondTop, new PropertyPath(Canvas.TopProperty));
    
    
    
                    _storyBoard.Children.Add(_doubleAnimationFirstLeft);
                    _storyBoard.Children.Add(_doubleAnimationFirstTop);
                    _storyBoard.Children.Add(_doubleAnimationSecondLeft);
                    _storyBoard.Children.Add(_doubleAnimationSecondTop);
    
                    _storyBoard.Begin();
                    _firstRect = null;
                    _firstLeft = 0;
                    _firstTop = 0;
                    _first = false;
                }
            }
        }
    }
    
    Saturday, August 20, 2011 11:35 AM
  • Dear amjad,

    Thanku very much for the helpSmile.... Just another extended query... 

    Firstly, in my application, the 5 rectangles are of different sizes and if they are swapped, they will overlap...rite??...so what can I do to not allow them doing so??

    Secondly, I was successfully able to run the code in a fresh appn..but in my app it isnt. Basically, in my app the rectangles along with overlapping textboxes are placed in a canvas and thus I need to move the canvas rather than only the rectangle. I tink this above code should work with the canvases too as we are targeting the left and top properties wrt outer canvas.

    Moreover, those canvases(with rectangles) are a part of 2-3 more storyboards which I have defined using XAML. Its like, these canvases are first arranged on two parallel lines by clicking a button and then the user can swap them.

     So whenever I click on those canvases(rects), they just execute the XAML - defined storyboard and doesnt get swapped... (Is it something like its prefering XAML-defined storyboard on C# defined ones)

    Thanks in advance,

    Regards,

    Hrishi

    P.S: U can call me Hrishikesh or Hrishi...Smile

    Saturday, August 20, 2011 6:04 PM
  • Heyy amjad,

    I understood why the storyboard was getting overwritten....I had used the controlStoryboardAction behaviour unnecessarily. But still its not working..

    I have all the rectangles inside the canvas...is that the problem?? And when i debugged it, I understood that the values in

    Rectangle _rect = sender as Rectangle;

    double _left = (double)_rect.GetValue(Canvas.LeftProperty);

    double _top = (double)_rect.GetValue(Canvas.TopProperty);

    are zero.. and it also gives me a nullreference exception for the same code fragment....as _rect is not instantiated with the new keyword..

    Need help urgently !!

    Thaks in advance,

    Warm regards

    Hrishi

    
    
    
    
    Tuesday, August 23, 2011 7:30 AM
  • I have all the rectangles inside the canvas...is that the problem??

    if you dont have canvas then how can you set and get left and right attached propertis of a control.

    as _rect is not instantiated with the new keyword..

    here no need to instantiate the rectangle becoz, you are taking the refrence of already created rectangle and you can see same thing in my example.

    Did u run my sol?

    i did not get your question, please elaborate it.

    Tuesday, August 23, 2011 7:42 AM
  • Hii,

    sorry for the trouble,

    I mean.. I have parent canvas (Layout root) and inside that I have 5 more small canvases which contain a rectangle and a textblock each... On a button click I first move the 5 canvases to be arranged on two parallel lines (2 one line and 3 on the other). And then i want to allow the user to swap their positions by clicking two of them at a time.

    I tried ur code in a fresh project and it does work...but wen i use the same thing in my project it gives me a "null reference" exception. I also tried changign the "Rectnagle" to "Canvas", but still it gives me the same exception saying "Object reference not set to an instance of an object." 

    Here's my code,

    Thanks,

    Hrishi

     Canvas Swaprectangle;
     bool swaprect = false;
     double rLeft = 0;
     double rTop = 0;
    
     private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                Canvas rect = sender as Canvas;
                double left = (double)rect.GetValue(Canvas.LeftProperty);
                double top = (double)rect.GetValue(Canvas.TopProperty);
                if (!swaprect)
                {
                    Swaprectangle = rect;
                    rLeft = left;
                    rTop = top;
                    swaprect = true;
                }
                else if (swaprect)
                {
                    Storyboard swapTasks = new Storyboard();
    
                    DoubleAnimation animateFirstRectLeft = new DoubleAnimation();
                    animateFirstRectLeft.To = left;
                    animateFirstRectLeft.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(animateFirstRectLeft, Swaprectangle);
                    Storyboard.SetTargetProperty(animateFirstRectLeft, new PropertyPath(Canvas.LeftProperty));
    
                    DoubleAnimation animateFirstRectTop = new DoubleAnimation();
                    animateFirstRectTop.To = top;
                    animateFirstRectTop.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(animateFirstRectTop, Swaprectangle);
                    Storyboard.SetTargetProperty(animateFirstRectTop, new PropertyPath(Canvas.TopProperty));
    
                    DoubleAnimation animateSecondRectLeft = new DoubleAnimation();
                    animateSecondRectLeft.To = rLeft;
                    animateSecondRectLeft.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(animateSecondRectLeft, rect);
                    Storyboard.SetTargetProperty(animateSecondRectLeft, new PropertyPath(Canvas.LeftProperty));
    
                    DoubleAnimation animateSecondRectTop = new DoubleAnimation();
                    animateSecondRectTop.To = rTop;
                    animateSecondRectTop.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(animateSecondRectTop, rect);
                    Storyboard.SetTargetProperty(animateSecondRectTop, new PropertyPath(Canvas.TopProperty));
    
                    swapTasks.Children.Add(animateFirstRectLeft);
                    swapTasks.Children.Add(animateFirstRectTop);
                    swapTasks.Children.Add(animateSecondRectLeft);
                    swapTasks.Children.Add(animateSecondRectTop);
    
                    swapTasks.Begin();
                    Swaprectangle = null;
                    rLeft = 0;
                    rTop = 0;
                    swaprect = false;
    
                }
            }
    Tuesday, August 23, 2011 10:29 AM
  • Dear All,

    Can anybody please help me out in this problem?? I really need it urgently...

    Any help will be appreciated,

    Thanks in advance,

    Warm regards,

    Hrishi

    Wednesday, August 24, 2011 7:17 AM
  • Can anybody please help me out in this problem??

    As per your previous post description about your requirement, please follow the below code

    *Note : make one change in place of child canvas i used stackpanel.

    <UserControl x:Class="MovingRectangles.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
    
        <Grid x:Name="LayoutRoot" Background="White">
            <Button x:Name="BtnClick" Content="Click to Arrange" Click="BtnClick_Click" Margin="175,12,111,265" Height="20" Width="150"></Button>
            <Canvas>
                <StackPanel x:Name="One" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Canvas.Left="48" Canvas.Top="58">
                    <Rectangle Fill="Aqua"  Width="100" Height="100" Stroke="Black" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"></Rectangle>
                    <TextBlock Width="63" Height="18" Text="Aqua" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Margin="0,-97,0,0" />
                </StackPanel>
                <StackPanel x:Name="Two" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"  Canvas.Left="318" Canvas.Top="36">
                    <Rectangle Fill="Beige"  Width="100" Height="100" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Stroke="Black" ></Rectangle>
                    <TextBlock Width="63" Height="18" Text="Beige" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Margin="0,-97,0,0" ></TextBlock>
                </StackPanel>
                <StackPanel x:Name="Three" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Canvas.Left="406" Canvas.Top="178">
                    <Rectangle Fill="Coral" Width="100" Height="100" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"  Stroke="Black" ></Rectangle>
                    <TextBlock Width="67" Height="18" Text="Coral" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Margin="0,-97,0,0" ></TextBlock>
                </StackPanel>   
    			<StackPanel x:Name="Five" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Canvas.Left="14" Canvas.Top="194">
                    <Rectangle Fill="DarkMagenta" Width="103" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Height="100" Stroke="Black"></Rectangle>
                    <TextBlock Width="83" Height="18" Text="DarkMagenta" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Margin="0,-97,0,0"></TextBlock>
                </StackPanel>			
                <StackPanel x:Name="Six" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Canvas.Left="213" Canvas.Top="138">
                    <Rectangle Fill="DeepPink" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Width="100" Height="100" Stroke="Black" ></Rectangle>
                    <TextBlock Width="78" Height="18" Text="DeepPink" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Margin="0,-97,0,0" ></TextBlock>
                </StackPanel>            
    
            </Canvas>       
        </Grid>
    </UserControl>
    
    
    
    
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    
    namespace MovingRectangles
    {
        public partial class MainPage : UserControl
        {
            StackPanel _firstRect;        
            bool _first = false;
            double _firstLeft=0;
            double _firstTop=0;
    
            public MainPage()
            {
                InitializeComponent();
            }
    
            private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                UIElement  UI = sender as UIElement;
                StackPanel _rect = null;
               
                if (UI != null && UI is Canvas)
                {
                    _rect = UI as StackPanel;
                    GetAnimation(_rect);
                }
                else if (UI != null && UI is Rectangle)
                {
                    Rectangle ele = UI as Rectangle;
                    _rect = ele.Parent as StackPanel;
                    GetAnimation(_rect);
                }
                else if (UI != null && UI is TextBlock)
                {
                    TextBlock ele = UI as TextBlock;
                    _rect = ele.Parent as StackPanel;
                    GetAnimation(_rect);
                }
    
                
            }
    
            private void GetAnimation (StackPanel _rect)
            {
                double _left = (double) _rect.GetValue(Canvas.LeftProperty);
                double _top = (double) _rect.GetValue(Canvas.TopProperty);
                if (!_first)
                {
                    _firstRect = _rect;
                    _firstLeft = _left;
                    _firstTop = _top;
                    _first = true;
                }
                else if (_first)
                {
                    Storyboard _storyBoard = new Storyboard();
    
                    DoubleAnimation _doubleAnimationFirstLeft = new DoubleAnimation();
                    _doubleAnimationFirstLeft.To = _left;
                    _doubleAnimationFirstLeft.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(_doubleAnimationFirstLeft, _firstRect);
                    Storyboard.SetTargetProperty(_doubleAnimationFirstLeft, new PropertyPath(Canvas.LeftProperty));
    
                    DoubleAnimation _doubleAnimationFirstTop = new DoubleAnimation();
                    _doubleAnimationFirstTop.To = _top;
                    _doubleAnimationFirstTop.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(_doubleAnimationFirstTop, _firstRect);
                    Storyboard.SetTargetProperty(_doubleAnimationFirstTop, new PropertyPath(Canvas.TopProperty));
    
    
                    DoubleAnimation _doubleAnimationSecondLeft = new DoubleAnimation();
                    _doubleAnimationSecondLeft.To = _firstLeft;
                    _doubleAnimationSecondLeft.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(_doubleAnimationSecondLeft, _rect);
                    Storyboard.SetTargetProperty(_doubleAnimationSecondLeft, new PropertyPath(Canvas.LeftProperty));
    
                    DoubleAnimation _doubleAnimationSecondTop = new DoubleAnimation();
                    _doubleAnimationSecondTop.To = _firstTop;
                    _doubleAnimationSecondTop.Duration = TimeSpan.FromSeconds(1);
                    Storyboard.SetTarget(_doubleAnimationSecondTop, _rect);
                    Storyboard.SetTargetProperty(_doubleAnimationSecondTop, new PropertyPath(Canvas.TopProperty));
    
    
                    _storyBoard.Children.Add(_doubleAnimationFirstLeft);
                    _storyBoard.Children.Add(_doubleAnimationFirstTop);
                    _storyBoard.Children.Add(_doubleAnimationSecondLeft);
                    _storyBoard.Children.Add(_doubleAnimationSecondTop);
    
                    _storyBoard.Begin();
                    _firstRect = null;
                    _firstLeft = 0;
                    _firstTop = 0;
                    _first = false;
                }
            }
    
            private void BtnClick_Click (object sender, RoutedEventArgs e)
            {
                Storyboard _storyBoard = new Storyboard();
                
                _storyBoard.Children.Add(AnimationLeft(100,One));
                _storyBoard.Children.Add(AnimationTop(100, One));
    
                _storyBoard.Children.Add(AnimationLeft(220, Two));
                _storyBoard.Children.Add(AnimationTop(100, Two));
    
                _storyBoard.Children.Add(AnimationLeft(340, Three));
                _storyBoard.Children.Add(AnimationTop(100, Three));
    
    
                _storyBoard.Children.Add(AnimationLeft(100, Five));
                _storyBoard.Children.Add(AnimationTop(220, Five));
    
    
                _storyBoard.Children.Add(AnimationLeft(220, Six));
                _storyBoard.Children.Add(AnimationTop(220, Six));
                _storyBoard.Begin();
                
              
            }
    
            private DoubleAnimation AnimationLeft(double to,StackPanel stkpnl)
            {
                DoubleAnimation _doubleAnimationFirstLeft = new DoubleAnimation();
                _doubleAnimationFirstLeft.To = to;
                _doubleAnimationFirstLeft.Duration = TimeSpan.FromSeconds(1);
                Storyboard.SetTarget(_doubleAnimationFirstLeft, stkpnl);
                Storyboard.SetTargetProperty(_doubleAnimationFirstLeft, new PropertyPath(Canvas.LeftProperty));
                return _doubleAnimationFirstLeft;
            }
    
            private DoubleAnimation AnimationTop (double to, StackPanel stkpnl)
            {
                DoubleAnimation _doubleAnimationFirstLeft = new DoubleAnimation();
                _doubleAnimationFirstLeft.To = to;
                _doubleAnimationFirstLeft.Duration = TimeSpan.FromSeconds(1);
                Storyboard.SetTarget(_doubleAnimationFirstLeft, stkpnl);
                Storyboard.SetTargetProperty(_doubleAnimationFirstLeft, new PropertyPath(Canvas.TopProperty));
                return _doubleAnimationFirstLeft;
            }
        }
    }
    
    Thursday, August 25, 2011 4:40 AM
  • Heyy Amjad,

    Thank you very much for helping me!!

    I tried your solution and its working...Smile

    Sorry for the trouble caused coz of me not explaining u the problem properly!!

    Thanks again!!

    Hrishi

    Thursday, August 25, 2011 7:54 AM
  • Dear,

    I used ur solution in my application, but it gives me an exception saying "Multiple animations in the same containing Storyboard cannot target the same property on a single element."

    The 5 rectangles in question have 2 ControlStoryboardAction behaviours set to it for 2 XAML defined storyboards... how can I remove the rectangle from the source object section of these storyboards?? I think this is the cause of the exception!!

    I know it is possible to begin the storyboard from code directly without using the behaviour.but in my app if i delete the behaviour and try to start it thru code, it doesnt..!!

    Please help!!

    Thanks in advance !!

    Regards,

    Hrishi

    Thursday, August 25, 2011 11:31 AM
  • deodhar.hrishi

    Make sure that you mark my post as answer, if it helped you.

    I gave you the complete code according to your requirement, then again why are you changing it.

    ok do onething send the complete solution to my email id syedamjad6736atyahoodotcom

    Thursday, August 25, 2011 1:34 PM