Am trying to apply animation individually for a group of ellipes using C# code behind.
Am starting animation on MouseLeftButtonDown Event. It is working fine for the any first ellipse..but when
I click on next ellipse both (the previous ellipse and current ellipse) are getting animated.
This is the code i have tried....
public void AnimateTheMovment(int to,double by,Ellipse elps)
{
DoubleAnimation da = new DoubleAnimation();
da.By = (double)by;
da.SpeedRatio = 2;
da.Duration = new TimeSpan(0, 0, 3);
elps.UpdateLayout();
elps.RenderTransform = transformEllipse;
transformEllipse.BeginAnimation(TranslateTransform.XProperty, da);
}
where elps is a object of the Ellipse am clicking.
And the XAML code is here
<Window x:Class="TestGame.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="600">
<Canvas Width="600" Height="300">
<Rectangle Fill="Black" Width="50" Height="10" HorizontalAlignment="Left" Margin="107,0,0,115" VerticalAlignment="Bottom" Canvas.Left="59" Canvas.Top="157" />
<Rectangle Fill="Black" Width="50" Height="10" HorizontalAlignment="Left" Margin="166,0,0,115" VerticalAlignment="Bottom" Canvas.Left="60" Canvas.Top="157" />
<Rectangle Fill="Black" Width="50" Height="10" HorizontalAlignment="Right" Margin="0,0,327,115" VerticalAlignment="Bottom" Canvas.Left="407" Canvas.Top="157" />
<Rectangle Fill="Black" Height="10" Margin="0,0,183,115" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="50" Canvas.Left="467" Canvas.Top="157" />
<Rectangle Fill="Black" Height="10" Margin="0,0,127,115" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="50" Canvas.Left="347" Canvas.Top="157" />
<Rectangle Fill="Black" Height="10" Margin="0,0,69,115" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="50" Canvas.Left="106" Canvas.Top="157" />
<Rectangle Fill="Green" Height="10" Margin="283,0,245,114" VerticalAlignment="Bottom" Width="61" Canvas.Left="-2" Canvas.Top="157" />
<Ellipse MouseLeftButtonDown="left1_MouseLeftButtonDown" x:Name="left1" Canvas.Left="115" Canvas.Top="124" Height="30" HorizontalAlignment="Left" Width="30" >
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.35 0.35"
Center="0.35 0.35">
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="1" Color="Green" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse MouseLeftButtonDown="left2_MouseLeftButtonDown" x:Name="left2" Canvas.Left="175" Canvas.Top="124" Height="30" HorizontalAlignment="Left" Width="30">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.35 0.35"
Center="0.35 0.35">
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="1" Color="Green" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse MouseLeftButtonDown="left3_MouseLeftButtonDown" x:Name="left3" Height="30" HorizontalAlignment="Left" Width="30" Canvas.Left="235" Canvas.Top="124">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.35 0.35"
Center="0.35 0.35">
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="1" Color="Green" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse MouseLeftButtonDown="right1_MouseLeftButtonDown" x:Name="right1" Height="30" HorizontalAlignment="Right" Width="30" VerticalAlignment="Bottom" Canvas.Left="355" Canvas.Top="124">
<Ellipse.Fill>
<RadialGradientBrush Center="0.35,0.35" GradientOrigin="0.35,0.35">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse MouseLeftButtonDown="right2_MouseLeftButtonDown" x:Name="right2" HorizontalAlignment="Right" Height="30" Width="30" Canvas.Left="415" Canvas.Top="124">
<Ellipse.Fill>
<RadialGradientBrush Center="0.35,0.35" GradientOrigin="0.35,0.35">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse MouseLeftButtonDown="right3_MouseLeftButtonDown" x:Name="right3" HorizontalAlignment="Right" Height="30" Width="30" Canvas.Left="475" Canvas.Top="124">
<Ellipse.Fill>
<RadialGradientBrush Center="0.35,0.35" GradientOrigin="0.35,0.35">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
</Window>
I am unable to get what is happening. Please help me in solving this problem.
My problem is simply demonstrated using this example
This is my XAML code
<grid>
<ellipse height="30" mousedown="ellipse1_MouseDown" mouseleftbuttondown="ellipse1_MouseLeftButtonDown" x:name="ellipse1" fill="Green" width="30" horizontalalignment="Left" margin="65,124,0,108" xmlns:x="#unknown">
<ellipse.rendertransform>
<translatetransform x="0" y="0" />
</ellipse.rendertransform>
</ellipse>
<ellipse mousedown="ellipse2_MouseDown" mouseleftbuttondown="ellipse2_MouseLeftButtonDown" x:name="ellipse2" fill="Red" height="30" width="30" margin="124,124,124,108" xmlns:x="#unknown">
<ellipse.rendertransform>
<translatetransform x="0" y="0" />
</ellipse.rendertransform>
</ellipse>
</grid>
and below is the C# code to apply TranslateTransform on Event MouseDown..
TranslateTransform transformEllipse = new TranslateTransform();
int ellipse1Offset = 50; int ellipse2Offset = 100;
private void ellipse1_MouseDown(object sender, MouseButtonEventArgs e)
{
MoveEllipse(ellipse1Offset, (Ellipse)e.Source);
ellipse1Offset += 50;
}
private void ellipse2_MouseDown(object sender, MouseButtonEventArgs e)
{
MoveEllipse(ellipse2Offset, (Ellipse)e.Source);
ellipse2Offset += 100;
}
public void MoveEllipse(double to, Ellipse elps)
{
DoubleAnimation da = new DoubleAnimation();
da.To = to;
da.SpeedRatio = 2;
da.Duration = new TimeSpan(0, 0, 3);
elps.RenderTransform = transformEllipse;
transformEllipse.BeginAnimation(TranslateTransform.XProperty, da);
}
Now, when i Click an ellipse for the second time the animation TranslateTransform is applied for both the ellipses.
I want to apply animation INDIVIDUALLY without effecting the other ellipse. I mean only one ellipse that is clicked should get animated and the other one should not.Hope you now got my point...Thank you..