Storyboard EllipseGeometry animation - wpf

Question

all. I have started a simple WPF application and would like a button to follow an elliptical path when it is made visible(for now I just want it to occur when I click...for testing purposes). It should simply move along the path then come to rest at the final point. I am having trouble getting the storyboard to work in a style. It won't reference the path that I have already defined. How do I resolve this? Eventually, each button will need to have it's own final resting point, so I will need to pass in an extra animation at a later date. The code is in XAML(posted below).
<Window x:Class="EllipseFollowsPath.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:EllipseFollowsPath"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1366">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="768" Width="1366">
<Grid.Resources>
<PathGeometry x:Key="path">
<PathGeometry.Figures>
<PathFigure StartPoint="921,384" IsClosed="False">
<ArcSegment Point="445,384" Size="60 60"
SweepDirection="Counterclockwise"/>
</PathFigure>
<PathFigure StartPoint="445,384" IsClosed="False">
<ArcSegment Point="921,384" Size="60 60"
SweepDirection="Counterclockwise"/>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
<Storyboard x:Key="sb" RepeatBehavior="Forever">
<MatrixAnimationUsingPath
Storyboard.TargetName="transform"
Storyboard.TargetProperty="Matrix"
PathGeometry="{StaticResource path}"
Duration="0:0:2">
</MatrixAnimationUsingPath>
</Storyboard>
</Grid.Resources>
<Button Height="20" Width="20">
<Button.RenderTransform>
<MatrixTransform x:Name="transform"/>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource sb}">
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>

Answer 1

The code below works...
<Window x:Class="EllipseFollowsPath.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:EllipseFollowsPath"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1366">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="768" Width="1366">
<Grid.Resources>
<PathGeometry x:Key="path">
<PathGeometry.Figures>
<PathFigure StartPoint="921,384" IsClosed="False">
<ArcSegment Point="445,384" Size="60 60"
SweepDirection="Counterclockwise"/>
</PathFigure>
<PathFigure StartPoint="445,384" IsClosed="False">
<ArcSegment Point="921,384" Size="60 60"
SweepDirection="Counterclockwise"/>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
<Storyboard x:Key="sb" RepeatBehavior="Forever">
<MatrixAnimationUsingPath
Storyboard.TargetName="transform"
Storyboard.TargetProperty="Matrix"
PathGeometry="{StaticResource path}"
Duration="0:0:2">
</MatrixAnimationUsingPath>
</Storyboard>
</Grid.Resources>
<Button Height="20" Width="20">
<Button.RenderTransform>
<MatrixTransform x:Name="transform"/>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource sb}">
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>