How can I move an EllipsePath using animation in WPF? - wpf

Question

I want to make a slider button using WPF. So I have this code to create a circle and to move it when clicked.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Border Background="LightGray" Margin="167,63,224,190" CornerRadius="20,20,20,20" Height="40" Width="80">
<Path Fill="Red">
<Path.Data>
<EllipseGeometry Center="20,20" RadiusX="20" RadiusY="20"/>
</Path.Data>
<Path.Effect>
<DropShadowEffect Direction="270" ShadowDepth="2" Color="Gray"></DropShadowEffect>
</Path.Effect>
<Path.Triggers>
<EventTrigger RoutedEvent="Border.MouseDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<PointAnimation Storyboard.TargetProperty="Center" Duration="0:0:0.3" From="20,20" To="60,20"></PointAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Path.Triggers>
</Path>
</Border>
</Grid>
It is okey that it shows up when program started. But it throws an exception when clicked on it. The error is System.InvalidOperationException. So how can I fix this problem?

Answer 1

Perhaps this is something closer to what you are looking to do?
<Window x:Class="MainWindow"
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"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Border Background="LightGray" Margin="167,63,224,190" CornerRadius="20,20,20,20" Height="40" Width="80">
<Canvas>
<Ellipse Fill="Red" Width="40" Height="40" Canvas.Left="0" Canvas.Top="0">
<Ellipse.Effect>
<DropShadowEffect Direction="270" ShadowDepth="2" Color="Gray"></DropShadowEffect>
</Ellipse.Effect>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Border.MouseDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:0.3" From="0" To="40" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>
</Border>
</Grid>