index > Windows Presentation Foundation (WPF) > How to remove an object from a motion path with a mouse?

How to remove an object from a motion path with a mouse?

Hi guys..
How do I remove an object from a motion path with a mouse?
An example of what I have so far is below..
[IMG]http://i36.tinypic.com/2ynmbfb.gif[/IMG]
http://i36.tinypic.com/2ynmbfb.gif
I have done 2 circles going around in a motion path with the help of expression blend..
How do I like "pull' one of these circles out of the path using a mouse?
When I pull the circle, it will go to the white area aka a canvas?

After pulling, how do I put back the circle into the path?
Foe example, If I click on the click and drag it back to the path, the circle will automatically move around in the path again..

Hope you guts understand what I mean.. :)

ChengTeck90

In depends on how the animation is implemented. Can you provide the code generated by Blend?

Bigsby, Lisboa, Portugal - O que for, quando for, é que será o que é... http://bigsby.eu

Bigsby

In depends on how the animation is implemented. Can you provide the code generated by Blend?
Bigsby, Lisboa, Portugal - O que for, quando for, é que será o que é... http://bigsby.eu

No problem.. :)
Here is the code..

<Window
	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"
	x:Class="WpfApplication4.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	Width="640" Height="480" mc:Ignorable="d">
	<Window.Resources>
		<Storyboard x:Key="Storyboard1">
			<DoubleAnimationUsingPath BeginTime="00:00:00" Duration="00:00:06" RepeatBehavior="Forever" Storyboard.TargetName="Ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X">
				<DoubleAnimationUsingPath.PathGeometry>
					<PathGeometry Figures="M282.5,1.25 C282.5,65.17696 218.92443,117 140.5,117 C62.075566,117 -1.5,65.17696 -1.5,1.25 C-1.5,-62.67696 62.075566,-114.5 140.5,-114.5 C218.92443,-114.5 282.5,-62.67696 282.5,1.25 z"/>
				</DoubleAnimationUsingPath.PathGeometry>
			</DoubleAnimationUsingPath>
			<DoubleAnimationUsingPath BeginTime="00:00:00" Duration="00:00:06" RepeatBehavior="Forever" Storyboard.TargetName="Ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Source="Y">
				<DoubleAnimationUsingPath.PathGeometry>
					<PathGeometry Figures="M282.5,1.25 C282.5,65.17696 218.92443,117 140.5,117 C62.075566,117 -1.5,65.17696 -1.5,1.25 C-1.5,-62.67696 62.075566,-114.5 140.5,-114.5 C218.92443,-114.5 282.5,-62.67696 282.5,1.25 z"/>
				</DoubleAnimationUsingPath.PathGeometry>
			</DoubleAnimationUsingPath>
			<DoubleAnimationUsingPath BeginTime="00:00:01" Duration="00:00:06" RepeatBehavior="Forever" Storyboard.TargetName="Ball1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X">
				<DoubleAnimationUsingPath.PathGeometry>
					<PathGeometry Figures="M129,-114.75 C129,-50.82304 65.424434,1 -13,1 C-91.424434,1 -155,-50.82304 -155,-114.75 C-155,-178.67696 -91.424434,-230.5 -13,-230.5 C65.424434,-230.5 129,-178.67696 129,-114.75 z"/>
				</DoubleAnimationUsingPath.PathGeometry>
			</DoubleAnimationUsingPath>
			<DoubleAnimationUsingPath BeginTime="00:00:01" Duration="00:00:06" RepeatBehavior="Forever" Storyboard.TargetName="Ball1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Source="Y">
				<DoubleAnimationUsingPath.PathGeometry>
					<PathGeometry Figures="M129,-114.75 C129,-50.82304 65.424434,1 -13,1 C-91.424434,1 -155,-50.82304 -155,-114.75 C-155,-178.67696 -91.424434,-230.5 -13,-230.5 C65.424434,-230.5 129,-178.67696 129,-114.75 z"/>
				</DoubleAnimationUsingPath.PathGeometry>
			</DoubleAnimationUsingPath>
			<DoubleAnimationUsingPath BeginTime="-00:00:02" Duration="00:00:09" Storyboard.TargetName="Ball1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Source="Angle">
				<DoubleAnimationUsingPath.PathGeometry>
					<PathGeometry Figures="M129,-114.75 C129,-50.82304 65.424434,1 -13,1 C-91.424434,1 -155,-50.82304 -155,-114.75 C-155,-178.67696 -91.424434,-230.5 -13,-230.5 C65.424434,-230.5 129,-178.67696 129,-114.75 z"/>
				</DoubleAnimationUsingPath.PathGeometry>
			</DoubleAnimationUsingPath>
		</Storyboard>
	</Window.Resources>
	<Window.Triggers>
		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
			<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
		</EventTrigger>
	</Window.Triggers>

	<Grid x:Name="LayoutRoot">
		<Ellipse x:Name="Path" Stroke="Black" Margin="162,162,177,47.5">
			<Ellipse.Fill>
				<SolidColorBrush/>
			</Ellipse.Fill>
		</Ellipse>
		<Ellipse x:Name="Ball" Stroke="Black" HorizontalAlignment="Left" Margin="141,0,0,143" VerticalAlignment="Bottom" Width="46" Height="44" Fill="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" RenderTransformOrigin="0.5,0.5" MouseLeftButtonDown="Ball_MouseLeftButtonDown">
			<Ellipse.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform/>
				</TransformGroup>
			</Ellipse.RenderTransform>
		</Ellipse>
		<Ellipse x:Name="Ball1" Fill="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" Stroke="Black" Margin="296,0,285,32" VerticalAlignment="Bottom" Height="34" RenderTransformOrigin="0.5,0.5">
			<Ellipse.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform/>
				</TransformGroup>
			</Ellipse.RenderTransform>
		</Ellipse>
    </Grid>
</Window>

ChengTeck90

Anyone can help me? :(

ChengTeck90

Hi Cheng,

You can handle the MouseLeftButtonDown, MouseLeftButtonUp and MouseMove events of the Window.In theMouseLeftButtonDown event handler, stopthestoryboard.In theMouseMove event handler,move theBallby changing its translate transform'sX and Yvalues.In theMouseLeftButtonUp event,check if theBall is onthepath. Ifyes,begin the storyboard.The following is a sample.

// code behind in the Window
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
NameScope.SetNameScope(this, new NameScope());
this.RegisterName("Ball", this.Ball);
this.RegisterName("Ball1", this.Ball1);

this.MouseLeftButtonDown += new MouseButtonEventHandler(OnMouseLeftButtonDown);
this.MouseMove += new MouseEventHandler(OnMouseMove);
this.MouseUp += new MouseButtonEventHandler(OnMouseUp);
}
Storyboard storyboard;
StoryboardStatus sbStatus;
Point startPoint;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
storyboard = this.FindResource("Storyboard1") as Storyboard;
storyboard.Begin(this, true);
sbStatus = StoryboardStatus.Running;
}
void OnMouseUp(object sender, MouseButtonEventArgs e)
{
if (sbStatus == StoryboardStatus.Stopped && e.LeftButton == MouseButtonState.Released)
{
Point hittest = new Point();
hittest.X = (int) ((this.Ball.RenderTransform as TransformGroup).Children[3] as TranslateTransform).X;
hittest.Y = (int) ((this.Ball.RenderTransform as TransformGroup).Children[3] as TranslateTransform).Y;
bool isInPath= (storyboard.Children[0] as DoubleAnimationUsingPath).PathGeometry.StrokeContains(new Pen(){Thickness =10}, hittest);
if (isInPath)
{
storyboard.Begin(this, true);
this.sbStatus = StoryboardStatus.Running;
}
}
}

void OnMouseMove(object sender, MouseEventArgs e)
{
if (sbStatus == StoryboardStatus.Stopped && e.LeftButton == MouseButtonState.Pressed)
{
Point newpos = e.GetPosition(this);

((this.Ball.RenderTransform as TransformGroup).Children[3] as TranslateTransform).X += newpos.X - startPoint.X;
((this.Ball.RenderTransform as TransformGroup).Children[3] as TranslateTransform).Y += newpos.Y - startPoint.Y;

startPoint.X = newpos.X;
startPoint.Y = newpos.Y;
}
}

void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (e.Source == this.Ball && sbStatus == StoryboardStatus.Running)
{
double currentX = ((this.Ball.RenderTransform as TransformGroup).Children[3] as TranslateTransform).X;
double currentY = ((this.Ball.RenderTransform as TransformGroup).Children[3] as TranslateTransform).Y;
storyboard.Stop(this);
((this.Ball.RenderTransform as TransformGroup).Children[3] as TranslateTransform).X = currentX;
((this.Ball.RenderTransform as TransformGroup).Children[3] as TranslateTransform).Y = currentY;
sbStatus = StoryboardStatus.Stopped;
startPoint = e.GetPosition(this);
}
}

}
enum StoryboardStatus
{
Running,
Paused,
Stopped,
}

// XAML in the Window
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="Window1" Height="468" Width="640" Loaded="Window_Loaded">
<Window.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingPath x:Name="animationForBallX" BeginTime="00:00:00" Duration="00:00:06" RepeatBehavior="Forever" Storyboard.TargetName="Ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X">
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M282.5,1.25 C282.5,65.17696 218.92443,117 140.5,117 C62.075566,117 -1.5,65.17696 -1.5,1.25 C-1.5,-62.67696 62.075566,-114.5 140.5,-114.5 C218.92443,-114.5 282.5,-62.67696 282.5,1.25 z"/>
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath BeginTime="00:00:00" Duration="00:00:06" RepeatBehavior="Forever" Storyboard.TargetName="Ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Source="Y">
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M282.5,1.25 C282.5,65.17696 218.92443,117 140.5,117 C62.075566,117 -1.5,65.17696 -1.5,1.25 C-1.5,-62.67696 62.075566,-114.5 140.5,-114.5 C218.92443,-114.5 282.5,-62.67696 282.5,1.25 z"/>
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath BeginTime="00:00:01" Duration="00:00:06" RepeatBehavior="Forever" Storyboard.TargetName="Ball1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X">
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M129,-114.75 C129,-50.82304 65.424434,1 -13,1 C-91.424434,1 -155,-50.82304 -155,-114.75 C-155,-178.67696 -91.424434,-230.5 -13,-230.5 C65.424434,-230.5 129,-178.67696 129,-114.75 z"/>
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath BeginTime="00:00:01" Duration="00:00:06" RepeatBehavior="Forever" Storyboard.TargetName="Ball1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Source="Y">
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M129,-114.75 C129,-50.82304 65.424434,1 -13,1 C-91.424434,1 -155,-50.82304 -155,-114.75 C-155,-178.67696 -91.424434,-230.5 -13,-230.5 C65.424434,-230.5 129,-178.67696 129,-114.75 z"/>
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath BeginTime="-00:00:02" Duration="00:00:09" Storyboard.TargetName="Ball1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Source="Angle">
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M129,-114.75 C129,-50.82304 65.424434,1 -13,1 C-91.424434,1 -155,-50.82304 -155,-114.75 C-155,-178.67696 -91.424434,-230.5 -13,-230.5 C65.424434,-230.5 129,-178.67696 129,-114.75 z"/>
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
</Storyboard>
</Window.Resources>

</Window>

The only problem with the above sample is that the Ball always starts moving around from the very original point, i.e.from the middle right point on the path, no matter where I put the Ball on the path.

If you have any question, please feel free to let me know.

Sincerely,
Linda Liu

Please remember to mark the replies as answers if they help and unmark them if they provide no help.
Welcome to the All-In-One Code Framework! If you have any feedback, please tell us.

Linda Liu

You can use google to search for other answers

Custom Search

More Threads

• ListBox SelectedItem sometimes is not visible (scrolling is out of sync)

• Stopping TextBox from auto-growing to fit its contents

• XPS and StackPanel, DockPanel etc.

• Tooltip Displaying Item in ListBox

• ClickOnce and Obfuscator issue

• Canvas, to front

• Viewport2DVisual3D memory leak.

• What version to report SDK RC1 faults against ?

• Different menu style on Windows XP

• Certain XAML 'Display items' in Environment/Fonts and Colors ignored by Text Editor?